[next.js] 초기 설정 명령어들 의미(What is your project named)

What is your project named? my-app
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
What import alias would you like configured? @/*

---

 

1.프로젝트 이름 (my-app)

'my-app'은 단지 예시 프로젝트 이름 이며 원하는 어떤 이름으로도 설정 가능

 

2.TypeScript 사용 여부

 

3.ESLint 사용 여부

ESLint는 코드의 문법적 오류나 패턴을 찾아내는 도구인데 이를 사용여부 선택

 

4.Tailwind CSS 사용 여부

 

5.src/ 디렉터리 사용 여부

 

6.App Router 사용 여부

 

7.기본 import 별칭 (@/*) 커스터마이징 여부

프로젝트 내에서 모듈을 더 쉽게 import 할 수 있다

 

8.설정하고 싶은 import 별칭 (@/*)

여기서 '@/*'는 프로젝트의 루트 디렉터리를 가리키는 별칭

 

---

src/ 디렉터리 사용 여부

 

사용하는 경우

my-app/
│
├── src/
│   ├── components/
│   │   ├── NavBar.js
│   │   └── Footer.js
│   ├── views/
│   │   ├── HomePage.js
│   │   └── AboutPage.js
│   └── App.js
│
├── public/
│   ├── index.html
│   └── favicon.ico
│
├── package.json
├── .gitignore
└── README.md

 

사용하지 않는 경우

my-app/
│
├── components/
│   ├── NavBar.js
│   └── Footer.js
├── views/
│   ├── HomePage.js
│   └── AboutPage.js
├── App.js
├── index.html
├── favicon.ico
├── package.json
├── .gitignore
└── README.md

 

---

기본 import 별칭 (@/*) 커스터마이징 여부

 

사용 전

import MyComponent from '../components/MyComponent';

 

사용 후 

import MyComponent from '@/components/MyComponent';

---

Docs | Next.js