[Next.js+TS] 프로젝트 세팅하기 🔨

0. Prologue

Why Next.js ?

• SSR (서버 사이드 렌더링) 을 쉽게 구현할 수 있게 한다.
• 코드 스플리팅 사용하여 여러 개의 파일을 분리하고 필요에 따라 파일을 불러 올 수 있게 한다.
• 라우팅이 쉬워진다.
• 검색 엔진 최적화 (SEO) 에 유리하다.

1. 설치하기

create-next-app 사용하기

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

설치 후
npm run dev or yarn dev 명령어를 치면
http://localhost:3000에 다음과 같은 화면이 뜬다.

next , react, react-dom 설치하기

npm install next react react-dom
# or
yarn add next react react-dom

package.json에 스크립트 추가하기

package.json 파일을 열어 script를 추가한다

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

각각의 의미는 다음과 같다.
dev - 개발모드의 Next.js를 시작한다
build - 실제로 가동하기 위한 어플리케이션을 구축한다
start - Next.js 서버를 시작한다
lint - Next.js에 내장되어있는 ESLint의 구성을 설정한다.

2. ESLint + Prettier 설정하기

ESLint 와 Prettier란 ?

- ESLint
더 깔끔한 자바스크립트 코드를 작성하기 위한 코드 스타일 가이드, 문법적 오류나 안티 패턴을 고칠 수 있고 일관된 코드 스타일로 작성하도록 도와준다.
- Prettier
원본 스타일을 모두 제거하고 모든 코드가 일관된 스타일을 만들어주는 도구 (Opinionated Code Formatter). ESLint와 달리 논리적인 코드를 고쳐줄 순 없고, 오직 포맷팅만 해준다.

설치하기

yarn add -D eslint eslint-plugin-import

eslint-plugin-import : ES6 의 import/export syntax 체크, 파일 경로나 import 이름을 잘못 입력하는지 여부를 체크해주는 lint 플러그인.

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier : ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화한다. Prettier 에서 문법 관련된 ESlint 규칙을 사용하지 않게 되기 때문에 ESLint 는 자바스크립트 문법을 담당하고, 코드 스타일 정리는 Prettier 가 담당하게 된다.
eslint-plugin-prettier : 원하는 형식의 formatting 을 설정한다.

yarn add --dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

@typescript-eslint/parser TS에서 ESLint를 사용할 수 있게 하는 *parser
*parser : _ 인터프리터나 컴파일러의 구성 요소 가운데 하나로, 입력 토큰에 내재된 자료 구조를 빌드하고 문법을 검사하는 것
@typescript-eslint/eslint-plugin 코드베이스에서 ESLint를 적용할 수 있게 하는 *plugin
*plugin : 웹 브라우저의 표준 기능을 확장해 주는 프로그램

.eslintrc.js 생성하기

.eslintrc.js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
};

root true로 설정하지 않으면 파일 시스템의 상위 폴더까지 탐색하게 된다.
parser 위에서 설치한 parser를 적용한다. ESLint가 TS문법을 이해할 수 있게 한다.
plugin 위에서 설치한 plugin을 적용한다. 코드베이스 규칙을 따르게 한다.
extends

• eslint:recommended을 적용하면 ESLint의 내장되어있는 추천 설정을 사용할 수 있다.
• @typescript-eslint/recommended는 eslint:recommended 와 비슷하다. 이걸 적용하면 타입스크립트 전용 규칙을 추가적으로 사용할 수 있다.

eslintignore

eslintignore 을 만들어 필요없는 파일을 무시할 수 있게 해준다.

# don't lint build output (make sure it's set to your correct build folder name)
dist
node_modules

Airbnb / Standard 규칙을 따른다면

• Airbnb's ESLint config
• Standard

각 페이지에 가서 설치한 후 적용하면 된다.
필자는 에어비엔비 설정을 적용했다.

yarn add -D eslint-config-airbnb-typescript 

.eslintrc.js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: ['airbnb', 'airbnb-typescript', 'prettier'],
  parserOptions: {
    project: './tsconfig.json',
  },
};

만약 eslint-config-prettier을 추가했어도 ESLint와 prettier 사이에서 충돌이 날 수 있는데 그럴 경우 rules 옵션을 추가해주면 된다.

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: ['airbnb', 'airbnb-typescript', 'prettier'],
  parserOptions: {
    project: './tsconfig.json',
  },
 rules: {
    '@typescript-eslint/semi': 'off',
    '@typescript-eslint/space-before-function-paren': 'off',
  },
 };

Prettier 설정하기

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

• singleQuote: single 쿼테이션 사용 여부
• semi : 세미콜론 사용 여부
• useTabs : 탭 사용 여부
• tabWidth : 탭 너비
• trailingComma : 여러 줄을 사용할 때, 후행 콤마 사용 방식
• printWidth: 줄 바꿈 할 폭 길이
• arrowParens : 화살표 함수 괄호 사용 방식

  https://typescript-eslint.io/docs/linting/
  https://nextjs.org/docs