next.js 13 초기 세팅 터미널 명령어 모음집

1. creat-next-app 설치

yarn create next-app --typescript

2. 옵션선택

선택사항

✔️ would you like to use ESLint with this project ?

이 프로젝트에서 ESLint 쓸꺼니?

- yes면 ESLint 설치, No면 안설치

✔️ would you like to use Tailwind CSS with this project?

이 프로젝트에서 tailwind css 쓸꺼니?

- yes면 tailwindcss 설치, No면 안설치

✔️ would you like to use `src/` directory with this project?

이 프로젝트에서 src directory 쓸꺼니?

- yes면 src 폴더를 root에 설치, No면 안설치

왼쪽은 src directory에서 NO를 선택하면 적용되는 디렉토리 구조, 오른쪽은 YES를 선택하면 적용되는 구조

✔️ would you like to use experimental `app/` directory with this project?

이 프로젝트에서 실험적인 app 디렉토리 쓸꺼니?

• app 디렉토리에 대한 자세한 설명은 이 블로그에 잘 정리되있는것같다.

✔️ What import alias would you like configured? … @/*

import alias 어떻게 설정할꺼니?

• import alias는 예를들어, import React fom 'react' 에서

모듈의 이름이 'react 인것을 React로 쓸 수 있는 것 처럼,

설정에서 '@/*' 이렇게 해주면, 프로젝트 내에서 자주 사용되는 경로를 간결하게 만들어주는 역할을 한다.

예를들어,

import Header from '../../components/Header 처럼 상대경로의 모듈을 Header라는 이름으로 가져다 쓸 때,

`../../`부분은 @/이렇게 줄여서

import Header from '@/components/Header로 간결하고 가독성 좋게 만들어준다.

3. prettier 설치

yarn add --dev --exact prettier

prettier를 devDependencies에 추가하는데, --exact(-E) 옵션이 정확한 버전을 설치한다고 한다.
-E 옵션 없이 설치하면,^2.8.8로 캐럿이 붙고 최신 버전으로 설치.
-E 옵션 으로 설치하면, 2.8.8로 캐럿 없이 최신 버전으로 설치.
버전을 표기하는 방법은 캐럿과 틸드 major,minor,path
버전은 major,minor,patch로 분리할 수 있는데,
예를들어, 2.8.8이면 major는 2, minor는 8 patch는 8이다.

major 버전은

• 하위 호환되지 않는 변경 사항이 있는 경우 숫자를 올린다.
• 기존 버전과 호환되지 않는 API 변화나 기존 기능의 삭제 등이 있을때 인데,
• 대개 기존 버전과 호환되지 않아서, 기존 사용자에게 영향을 준다.

minor 버전은

• 하위 호환되는 새로운 기능이 추가되는 경우 숫자를 올린다.
• major 버전 내에서 새로운 기능의 추가, 기존 기능의 개선 등이 있을때 인데,
• 기존 버전과 호환되기 때문에, 대개 새로운 기능의 추가가 발생하면 버전을 올린다.

patch 버전은

• 기존 기능에 버그 수정 등의 작은 변경이 있는 경우 올린다
• 기존 기능의 문제점을 수정하는 작업을 할때 이고 대개 새로운 기능을 추가하지 않는다.

여기서 캐럿(^)이 하는일은 minor 버전까지 자동으로 업데이트 해주는 기능.
예를 들어, ^2.8.8이면
2.8.8버전 이상 3.0.0버전 미만까지는 자동으로 업데이트 해준다. 즉, 2.8.8 에서 2.9.9까지는 자동으로 업데이트 하는것.
그래서 개발중에 npm install 혹은 yarn을 입력했을 때 minor나 path가 업데이트 됐다면 버전 표기에 캐럿이 있다.
한편, major로 업데이트는 수동으로 해줘야 한다.

버전 표기법중에 다른 한가지는 물결표시 (~)틸드가 있는데,
만약 ~2.8.8로 표기되어있다면 2.8.8부터 2.9.0미만 까지만 업데이트 되도록 해준다.

4. prettierrc.json 세팅

echo {}> .prettierrc.json

{ 
"trailingComma": "es5",  // 배열이나 객체의 마지막 요소 뒤에 (,) 포함여부
"tabWidth": 2,           // 에디터에서 탭 간격 설정 옵션
"semi": true,            // code 맨 뒤에 semicolon 여부
"singleQuote": true      // 쌍따옴표를 홑따옴표로 할지 여부
}

trailingComma

- 배열이나 객체의 마지막 요소 뒤에 (,)를 붙일지 안붙일지 선택하는건데,

- 값으로 es5, none, all 이렇게 선택할 수 있다.

prettier 공식문서에는
- "es5": ES5에서 허용되는 경우에만 trailing commas를 표시한다. TypeScript의 타입 매개변수에서는 trailing commas를 지원하지 않는다.

- "none": trailing commas를 사용하지 않는다.

- "all": 가능한 경우에 모든 곳에서 trailing commas를 사용한다. 이 설정은 ES2017을 지원하는 엔진 (Node.js 8+ 또는 최신 브라우저)이나 다운레벨 컴파일이 필요하다. 이 설정은 TypeScript 2.7에서부터 지원되는 타입 매개변수에서 trailing commas도 가능하게 하다.
라고 설명하고 있음.

 

tabWitdh

- 에디터에서 탭 간격 설정 옵션

 

semi

- code 맨 뒤에 semicolon 여부

 

singleQuote

- 쌍따옴표를 홑따옴표로 할지 여부

 

간단한 설정들로만 넣어놨고, 더 많은 옵션은 prettier 공식문서중 option 메뉴에 있다.

5. eslint-config-prettier 설치

yarn add --dev eslint-config-prettier

eslint, prettier간에 충돌이 생길 수 있어서 고걸 막아주는 패키지 설치.

 

이정도만 해도 일단 돌아는 간다.