01-6. 폴더 구조 설정

개요

현재 제목에 '01-'로 시작하는 글들의 목적은 npx create-next-app으로 만드는 템플릿을 직접 구성하는 목적이다.

만약 npx create-next-app@latest my-app으로 프로젝트를 만든다면 자동으로 물어보는 질문은 다음 6가지이다.

 

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use src/ directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? › No / Yes

 

위 질문들에게서 Enter만 치면 입력되는 값, 즉 default 추천 값은 

앞의 5개는 Yes, 마지막 질문 1개는 No로 되어있다.

앞서 살펴본 항목은 이 6가지 질문 중 4가지에 대해서 수동 세팅을 알아보았다.

이제 남은 2개 질문에 대해서 살펴보자. (4번째와 6번째)

 

SRC 폴더

src 폴더를 만든다는 것은 app router를 쓰느냐 안 쓰느냐와 전혀 상관이 없다.

단지 app폴더, components 폴더에 src라는 부모 폴더를 하나 더 생성하느냐 마느냐이고 그 이상도 이하도 아니다.

src 폴더로 구성

1. 위에는 src 폴더를 두는 경우 

src 폴더가 없는 구성

 

2. src 폴더없이 바로 root directory에 app과 components 폴더를 생성할 수도 있다.

그럴 경우는 없겠지만 만약 이 두 가지를 혼용해서 쓴다면 2번째 방법 (root에 app 폴더)이 더 우선 순위를 가진다.

그래서 단순 취향 차이인데, 인터넷에 여러 사이트에 설문조사를 한 것이 있는데

src폴더를 사용한다 : 55%

src폴더를 사용하지 않는다 : 45% 

정도 나온다.

 

import alias

골뱅이 표시 '@'는 우리가 component에서 import 할 때 

import { Card } from "../../../../components/card";

 

너무 많은 ../../를 쓰지 않기 위해서이다.

default 세팅은 src폴더를 쓸 경우 '@'는 src 폴더를 나타내고, 

src 폴더를 쓰지 않을 경우 root 폴더가 된다.

 

create-next-app으로 프로젝트를 생성하는 경우 default 답이 'No'로 생성된 이유는

나중에 커스터마이징이 가능하기 때문이다. (솔직히 바꿀 일은 없다.)

바꾸고 싶으면

jsconfig.json에서

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  ...

 

src 폴더를 사용하면 [*./src/*"]으로 하면 되고

tsconfig.json에도 똑같이

{
  "compilerOptions": {
	"paths": {
      "@/*": ["./*"]
    },
    ...

 

을 바꿔주면 된다.