Dev

∙ 인스턴스 루트 디렉토리 용량 확인 오라클 클라우드 인스턴스 생성시 부트 볼륨을 분명 100GB 설정하고 생성했지만 생성후 SSH 로 원격 접속하여 df -h 명령어로 루트디렉토리의 용량을 봤는데 39GB 밖에 되지 않았고 lsblk로 각 블록장치의 용량을 확인해보니 부팅파티션과 스왑파티션을 제외하더라도 루트 디렉토리 용량이 너무 작았다. 할당되지 않은 용량들을 루트 디렉토리에 재할당하기 위해 구글링을 하다가 해결방안을 찾았다. 위 이미지를 보면 lsblk 명령어를 통해 확인된 sda 전체 디스크 용량은 100GB이다. 루트디렉토리가 마운트 되어 있는 sda3 파티션용량은 부팅 파티션, 스왑파티션인 sda1, sda2를 제외하더라도 38.1GB 밖에 되지 않는다. ∙ 해결 방안 : growpart를 이..

저번 포스팅에 이어서 이번 포스팅에서는 오라클 클라우드에서 VM을 생성하는 방법에 대해 포스팅하려 한다.(Mac OS 환경에서 진행) 1. 구획 생성 VM을 생성하기 전에 구획을 먼저 생성해야 한다. 구획을 생성하게 되면 구획별로 VCN(가상 클라우드 네트워크), 인스턴스 등을 생성하고 관리할 수 있다. 구획 탭에서 구획생성을 클릭하여 구획이름과 설명을 입력하고 구획을 생성한다. 2. VCN(Virtual Cloud Network) 네트워크 생성 VM 생성시 구성할 가상 클라우드 네트워크를 생성한다. 네트워킹 -> 가상 클라우드 네트워크 항목을 선택한 후 구획을 위에서 이전에 만든 구획으로 선택한 뒤 VCN 마법사 시작을 클릭한다. 인터넷 접속을 통한 VCN 생성을 선택한 후 VCN 마법사 시작을 클릭한..

나만의 웹 서버, 웹 어플리케이션을 시간, 장소 구애받지 않고 어디서든 접속이 됐으면 좋겠다 라는 생각이 항상 있었고 내 PC를 서버로 하루종일 켜 둘수는 없으니 클라우드 서비스를 이용하여 구축하기로 결정했다. 적당한 클라우드 서비스를 몰색하던 중 오라클 클라우드의 Free Tier를 사용해보신 사용자분들의 후기를 봤는데 무료 서비스임에도 지원되는 기능과 서비스 항목이 상당히 좋다는 글을 많이 보고 오라클 클라우드로 마음을 굳히게 되었다. 오라클 클라우드 프리티어를 통해 무료로 제공받을수 있는 항목은 오라클 클라우드 프리티어 공식 홈페이지(https://www.oracle.com/kr/cloud/free/#always-free)에 VM 사양, 데이터베이스 용량 등 자세한 설명이 나와있으니 참고. • 프리..

Next.js에서는 HTML 파일을 서버에서 Pre-rendering 하여 정적인 HTML 파일의 경우 클라이언트에게 대기시간 없이 빠르게 화면을 표출하고 CSR(Cllient Side Rendering)의 단점인 SEO(Search Engine Optimization)부분에서도 이점을 가져올 수 있다. Next.js 에서 지원하는 Pre-Rendering 방식은 페이지 유형에 따라 다르게 사용할 수 있는 getServerSideProps와 getStaticProps 두가지가 있다. 1. getStaticProps 정적 사이트 생성(Static-Site-Generation, SSG)으로 빌드 시점에 서버에서 데이터를 가져와서 페이지를 렌더링한 후 만들어진 정적 html 파일을 클라이언트에게 제공하는 방식..

이번 포스트는 Next.js의 Pages Router에서 제공하는 라우팅 기능중 API Routes에 관해 정리하는 포스트이다. Next.js APP으로 MySQL을 연계하여 데이터를 핸들링 하기 위해 API Routes를 사용해보며 사용방법을 정리하려 한다. API Routes Next.js 는 API Routes를 사용하여 서버사이드 로직을 작성하고 API 엔드포인트를 생성하는 기능을 제공한다. API Routes를 사용하면 Next.js 어플리케이션 내에서 백엔드의 역할을 수행하는 API 엔드포인트를 간단하게 만들 수 있다. 1. /pages/api 디렉토리생성 첫번째로 Next.js 어플리케이션 루트 디렉토리 내에서 pages 디렉토리 안에 api 디렉토리를 생성한다. 이 디렉토리는 API Rou..

React.js 를 공부하다 보니 Next.js와 TypeScript를 자연스레 접하게 되었다. 이번 포스트는 Next.js의 기본적인 개념과 디렉토리 구조 및 Route에 대해 간략히 정리하는 글이다. Next.js 란? Next.js 는 간단하게 요약하면 React의 SSR(Server Side Rendering)을 구현할 수 있도록 도와주는 프레임워크이다. React는 기본적으로 SPA(Single Page Application)로 개발하며 CSR(Client Side Rendering)으로 렌더링 되기 때문에 사용자가 최초 접속하는 시점에 모든 js 파일을 로드하고 서버에서 데이터를 가져오기 때문에 처음 접속시 시간이 지연 될 수 있다. 뿐만 아니라 렌더링을 클라이언트쪽에서 하고 렌더링이 되기 전..

React 프로젝트를 Github Action을 이용하여 AWS S3로 자동배포하는 방법에 대해 간략하게 정리하는 글이다. 우선적으로 배포할 프로젝트의 Github Repository(원격저장소)가 생성이 되어있고 AWS 계정이 있다는 전제하에 진행을 한다. 1. Workflow 생성 Github Action을 이용하여 자동 배포를 위한 workflow를 생성하기 위해 해당 repository 상단 탭에 Action 탭을 클릭하여 workflow를 생성하는 화면으로 들어온다. 현재 배포하려는 React 프로젝트는 npm 으로 build하기 때문에 Node.js 에서 Configure 를 클릭한다. Configure에서 workflow를 작성하면 되는데 기본적인 workflow가 작성이 되어있다. 위 wo..

1. TDD(Test Driven Development) : 테스트 주도 개발 React Testing Library 를 정리하기에 앞서 TDD : 테스트 주도 개발에 대해 먼저 얘기할 필요가 있을 것 같다. TDD란 간단하게 말해서 테스트 코드를 먼저 작성하고 그 테스트를 통과하기 위한 코드를 구현하는 형태의 개발방법론이다. TDD 의 개발 절차 TDD의 개발 절차는 실패 -> 성공 -> 리팩토링 3가지로 구성되어 있다. 실패하는 작은 단위의 테스트부터 작성을 하고 해당 테스트를 통과하기 위한 코드를 작성한 뒤 테스트 성공 이후에는 해당 코드에 중복되는 코드는 없는지, 더 개선할 수 있다면 리팩토링의 과정을 거친다. React 에서는 테스트를 위해 React Testing Library 와 Jest 가..