[Next.js] 프로젝트 초기세팅 : Next.js & TypeScript & eslint(airbnb) & Prettier 설정

 

Next.js 프로젝트를 생성할 때마다 개발 환경 초기 세팅을 다시 찾아보는 것이 귀찮아서, 이번 포스팅에서는 해당 과정을 정리해 보았다. 이 포스팅에서는 Next.js(v.15.0.3), TypeScript, 그리고 eslint(airbnb)를 기준으로 설정 방법을 다룬다. 

 

01. Next.js 설치

먼저 아래 명령어(create-next-app)을 통해 Next.js 초기 세팅을 한다.

npx create-next-app@latest

 

설치 조건은 아래와 같이 선택하였다.

1. 프로젝트 이름 설정
2. TypeScript 사용 여부 선택 → 해당 프로젝트에서는 TypeScript를 사용하려 하였으므로 Yes 선택
3. ESLint 적용할지 여부 → 문법 틀린 부분 지적해주는 Linter 적용하기 위해 Yes 선택
4. Tailwind CSS 사용 여부 선택 → Yes 선택
5. src/ 디렉토리 사용 여부 선택 → src/ 디렉토리로 한 번 감싸지 않으면 app/ 디렉토리가 최상단 루트에 위치하게 되는데 이러면 관리가 복잡해질 것이라 판단하여 Yes 선택
6. App Router → Next.js 13 버전 이후 APP 디렉토리로 구성되므로 Yes 선택
7. Turbopack 사용 여부 → Yes 선택
8. import alias → 절대 경로 사용하기 위해 Yes 선택
9. import alias @/*로 절대 경로 지정

 

 

 

 

02. ESLint 설정

Next.js 프로젝트가 설치되었으면 eslint를 설정해야한다.

앞서 Next.js 설치 때 eslint 설치에 Yes를 선택했다면 ESLint 추가 설치나 .eslintrc.json을 따로 생성하지 않아도 된다.

현재 .eslintrc.json 파일에는 다음과 같은 extends만 존재할 것이다.

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

 

해당 프로젝트에서는 eslint airbnb 규칙을 따르도록 설정할 예정이므로 관련된 패키지와 환경 설정을 해야한다.

 

 

 

1️⃣ eslint-config-airbnb와 관련 dependency 설치

eslint-config-airbnb와 관련된 종속 패키지까지 한 번에 설치하기 위해 아래와 같은 명령어를 입력한다.

npx install-peerdeps --dev eslint-config-airbnb

하지만 나는 위에 명령어는 실행이 안되어서 각각 개별적으로 설치하였다.

 

 

먼저 설치 해야 될 의존성 패키지 목록을 확인하기 위햇 아래와 같은 명령어를 입력하였다.

npm info "eslint-config-airbnb@latest" peerDependencies

 

해당 명령어를 통해 조회된 종속 패키지 목록이다.

{
  'eslint': '^7.32.0 || ^8.2.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-react-hooks': '^4.3.0'
}

 

확인 결과 eslint, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks를 아래 명령어를 통해 개별적으로 설치하기로 하였다.

npm install -D eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

 

설치 완료 후 package.json 파일을 보면 다음과 같은 패키지들이 설치된 것을 확인할 수 있다.

    "eslint": "^8.57.1",
    "eslint-config-next": "15.0.3",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",

 

 

 

2️⃣ eslint-config-airbnb-typescript 관련 dependency 설치

다음으로 typescript 관련 airbnb와 lint 패키지를 설치한다.

npm install -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

설치 후 package.json에

    "@typescript-eslint/eslint-plugin": "^7.18.0",
    "@typescript-eslint/parser": "^7.18.0",
    "eslint-config-airbnb-typescript": "^18.0.0",

위와 같이 설치된 것을 확인할 수 있다.

 

 

 

3️⃣ .eslintrc.json 수정

패키지를 설치한 후, eslintrc.json 파일을 설정하여 ESLint가 프로젝트에서 규칙을 적용할 수 있도록 해야한다.

extends에 'airbnb'와 'airbnb-typescript'를 추가한다.

그리고 parseOptions를 추가하여 ./tsconfig.json을 바라보도록 지정한다.

{
    "extends": ["airbnb", "airbnb-typescript", "next/core-web-vitals", "next/typescript"],
    "parserOptions": {
        "project": "./tsconfig.json"
    }
}

 

 

 

 

03. prettier 설정

1️⃣ prettier 설치

npm install -D -E prettier

 

 

2️⃣ prettier-plugin-tailwindcss & eslint-config-prettier 설치

npm install -D prettier-plugin-tailwindcss eslint-config-prettier

• prettier-plugin-tailwindcss : 유틸리티 클래스명 순서대로 나열해주는 Prettier 플러그인
• eslint-config-prettier : ESLint 와 Prettier 가 충돌하지 않게 하는 ESLint 플러그인

 

3️⃣ .prettierrc 파일 생성 후 작성

{
  "printWidth": 100,                   // 한 줄의 최대 길이를 100으로 설정
  "tabWidth": 2,                       // 탭 크기를 2로 설정
  "semi": false,                       // 코드 끝에 세미콜론을 붙이지 않음
  "singleQuote": true,                 // 문자열에 작은따옴표(') 사용
  "jsxSingleQuote": true,              // JSX 속성에도 작은따옴표 사용
  "trailingComma": "all",              // 객체, 배열의 마지막 항목 뒤에 쉼표를 항상 추가
  "arrowParens": "always",             // 화살표 함수에서 인수가 하나일 때에도 괄호를 항상 사용
  "plugins": ["prettier-plugin-tailwindcss"], // Tailwind CSS 관련 클래스를 자동으로 정렬하는 플러그인 사용
  "overrides": [                       // 특정 파일 형식에 대한 추가 설정
    {
      "files": "*.css",                // `.css` 파일에 대해서
      "options": {
        "printWidth": 0               // CSS 파일에서는 한 줄의 최대 길이를 0으로 설정 (즉, 줄 바꿈을 하지 않음)
      }
    }
  ]
}

 

 

4️⃣ .eslintrc.json 파일에 eslint-config-prettier 충돌 방지 플러그인 등록

{
  "extends": [
	  "prettier",
	  ...
  ],
  ...
}

 

 

---

 

🔥 eslint와 prettier 설정 후에도 반영 안되는 문제

앞선 과정을 통해 ESLint와 prettier 설정을 완료하였음에도 코드를 보면 큰따옴표(""), 세미콜론 등이 그대로 존재하였다.

이런 경우에는 아래 명령어를 통해 프리티어를 실행해준다.

npx prettier --write "src/app/**/*.{tsx,ts,jsx,js}"

 

위 명령을 수행한 결과 프리티어가 정상적으로 반영되었다.

 

 

🔥 Parsing error: Cannot Read File ...tsconfig.json

모든 파일 상단에 Parsing error: Cannot Read File ...tsconfig.json  에러가 출력되었다.

이는 eslint 상에서 발생한 에러이며, 해당 파일의 경로를 추가해줌으로써 제대로 된 파일 경로를 찾도록 해야한다.

 

이때 eslintrc.json의 "parser": "@typescript-eslint/parser"를 추가하고

extends에 "plugin:@typescript-eslint/recommended"를 추가하였다.

 

이후 "parserOptions": { "project": ["tsconfig.json"] }로 변경하였다. "./tsconfig.json"에서 ["tsconfig.json"]으로 수정한 것이다. 위와 같이 변경하였더니 해결할 수 있었다.

 

최종적인 eslintrc.json은 다음과 같다.

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["import", "@typescript-eslint", "react"],
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "next/typescript",
    "prettier"
  ],
  "ignorePatterns": ["node_modules/"],
  "parserOptions": {
    "project": ["tsconfig.json"],
    "createDefaultProgram": true
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": ["warn", { "extensions": [".ts", ".tsx"] }]
  }
}

 

 

 

🔥 npm run lint 실행 시 "Failed to load config "airbnb" to extend from."으로 실행 안되는 문제

npm run lint로 eslint를 실행하려 하였지만 "Failed to load config "airbnb" to extend from." 오류가 출력되며 실행되지 않았다.

이는 airbnb 툴이 설치되지 않아 발생하여 eslint-config-airbnb를 아래와 같이 설치하였다.

npm install --save-dev eslint-config-airbnb

 

하지만 다음과 같은 오류 출력되며 eslint-config-airbnb가 설치되지 않았다.

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: memorymap@0.1.0
npm error Found: eslint-plugin-react-hooks@5.0.0
...

이 오류는 eslint-plugin-react-hooks의 버전 충돌로 인해 발생하는 문제였다.

eslint-config-airbnb는 eslint-plugin-react-hooks의 버전 4.3.0을 요구하는 반면, 현재 프로젝트에서는 5.0.0 버전이 설치되어 있기 때문이다.

따라서 esling-plugin-react-hooks 버전을 다운그레이드 하기로 하였다.

npm install --save-dev eslint-plugin-react-hooks@4.3.0

eslint-config-airbnb가 요구하는 eslint-plugin-react-hooks의 버전 4.3.0을 설치하여 충돌을 해결하였다.