호박너구리 블로그

이전 글에서, 설치된 NextJS 프로젝트에 Typescript를 추가했었습니다. 그리고 이번에는 본격적으로 React 컴포넌트를 추가하여 페이지와 내부 컴포넌트를 만들어서 index 홈페이지를 구성하려고 합니다. 1. 컴포넌트 디렉토리 생성 우선 컴포넌트 디렉토리 구조는 사람마다, 프로젝트마다, 회사마다 다릅니다. 어떤 곳은 atomic 디자인을 추구하며 디렉토리를 여러 단계로 구분하고, 어떤 곳은 components라는 한 폴더 안에 두기도 하죠. (컴포넌트 디렉토리 구조에 대해서는 나중에 구체적으로 다뤄볼게요!) 우선은 대부분의 프로젝트가 components라는 폴더를 갖고있으니 만들어보겠습니다. (선택) Container 디렉토리 생성 그리고 저는 page와 1:1 대응하는 컴포넌트를 contai..

개발 2021. 5. 8. 18:30

React는 Vue와 Angular와 많이 비교되지만, 그래도 프레임워크가 아닌 라이브러리입니다. 그러다보니 React만으로는 아쉬운 점이 많기도 하는데요, 그래서 적지 않은 분들이 프레임워크를 함께 사용합니다. React 프레임워크 중에서는 GatsbyJS와 NextJS가 가장 유명합니다. 저는 그 중에서 NextJS를 통해 프로젝트를 시작해보았습니다! (TODO: 두 개의 차이는 나중에 다른 글로 올려볼게요!) 1. NextJS 프로젝트 생성하기 우선 처음 프로젝트를 시작할 때에는 다음과 같은 명령어를 통해 시작하시면 됩니다. cpx create-next-app 실행하면 app 이름을 적으라고 나오고, 엔터를 치면 완료되었다고 터미널에 표시가 됩니다. 그러면 이제 프로젝트 설정은 끝이 납니다! 매우 ..

개발 2021. 5. 5. 15:24