[NextJS] CRA+TypeScript 에서 Nextjs이사 - 폴더 구조 비교

1. 폴더 구조의 비교

1.React 프로젝트 - CRA+TypeScript

 

우선 가장 큰 특징은 리액트 프로젝트에선 다음과 같이 src폴더가 존재하고 그 안에

• component
• apis
• assets
• feature
• hook
• pages
• shared
• stores
• types
• utils
  와 같은 큰 카테고리의 폴더들이 존재한다. 각 폴더 안에는 또 component단위 혹은 기능 단위로 쪼개어 파일이 배치되어 있다.

위 폴더 구조를 보면 component폴더 안에 card컴포넌트를 구현할 폴더를 하나 만들고 그에 해당하는 index.tsx파일과 styeld.ts파일이 존재하는 것을 확인할 수 있다. 

 

또한 리액트 프로젝트에서는 src폴더 안에 assets폴더를 만들어 사용할 아이콘, 폰트, 이미지들을 모아둘 수 있다.

 

* 리액트 프로젝트 돌아가는 과정

또한 리액트 프로젝트를 살펴보면 다음과 같은 파일들이 존재하는 것을 알 수 있다. 이 파일들은 어떤 역할을 할까?

• App.tsx - 전체적인 리액트 어플리케이션의 라우팅, 레이아웃 등을 담당한다. 
  
  

•  App.css - 어플리케이션의 전역적인 css를 담당한다. App.tsx에서는 이 css파일을 import해서 적용한다. 
  
  

• index.tsx - React 어플리케이션을 렌더링해주는 역할을 담당한다.  CRA를 통해 리액트 어플리케이션을 만들면 건들 경우가 거의 없지만 react-query나 redux같은 라이브러리의 경우 index.tsx를 건드려줘야하는 경우도 존재한다. 

• index.css - App.css보다 한단계 더 위의 전역적 css를 설정한다. 

css변수 같은 것을 지정해줄 수 있다. 이렇게 :root부분에 정의된 css변수들은 하위 폴더 안에서 var()안에 넣으면 공통적으로 사용이 가능하다. 

 

2. Next JS의 폴더 구조

CRA+Typescript조합의 프로젝트와 가장 큰 다른 점은 src폴더의 부재이다. src폴더가 존재하지 않아도 nextjs는 돌아간다. 하지만 nextjs에서는 폴더 들의 이름을 어느정도는 제약하고 있다.  그 중 가장 중요한 폴더는 pages폴더이다. 

pages 폴더 안에는 각 페이지 이름에 해당하는 폴더들이 존재해야한다. 

pages폴더 안

pages폴더 안에는 다음과 같이 하위 주소에 해당하는 폴더들이 있다. 저렇게 폴더 구조에서 pages폴더의 하위 폴더로 폴더를 만들어주기만 하면 자동으로 nextjs는 라우팅을 해준다....!

그 후 보이는 폴더는 _app.tsx파일이다. 이 파일에서는 리액트의 APP.tsx파일과 비슷하게 전체적인 설정을 해준다. 

_app.tsx

레이아웃과 같은 것들을 설정해 준 것을 확인할 수 있다. 

그럼 pages.폴더 안에 들어가자 마자 있는 index.tsx파일은 무엇일까?

바로 /주소에 해당하는 페이지이다. 만약 처음 사이트에 접속하면 이 index.tsx파일에 있는 내용이 맨 처음 보여지게 될 것이다. 

index.tsx

그 후 나머지 폴더는 유사하지만 한가지 또 다른 점이 있다. 이 폴더 또한 pages폴더와 마찬가지로 폴더 이름을 제약하는데 바로 폰트나 이미지 비디오와 같은 assets를 넣어주는 public폴더이다. 

리액트에서는 src폴더 안에 assets폴더를 만들고 그 안에 카테고리 별로 저장을 했지만 nextjs에서는 public폴더를 만들어주고 그 안에 assets폴더를 만들어주어야한다. 

public폴더 구조

다음과 같이 설정해주는 것이 nextjs의 보편적인 폴더 구조라고 한다.