에러 기록

next.js 에서 eslint 설정 문제

next.js 에서 eslint를 설정했음에도 불구하고 린트 규칙들이 적용되지 않았다.

해결 1. 플러그인 설치

1. next에서 지원하는 eslint plugin인 @next/eslint-plugin-next
2. eslint-config-next 설치
3. @typescript-eslint/eslint-plugin 설치
4. @typescript-eslint/parser 설치
5. prettier 적용을 위한 eslint-config-prettier, eslint-plugin-prettier 설치

해결 2. eslintrc.json 파일 설정

아래와 같이 플러그인들을 설정

"extends": ["next", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],
"plugins": ["prettier", "@typescript-eslint/eslint-plugin"],

Parsing error : Cannot find module 'next/babel'

next.config.js에서 발생

next/babel이라는 모듈을 인식하지 못하는 문제

해결 1. vscode에서 여는 폴더 변경

백엔드와 프론트엔드 폴더가 같이 사용하는 레포지토리가 아닌, 프론트만 사용하는 폴더인 client 폴더를 vscode에서 열면 됩니다.

해결 2. eslintrc 파일 설정

extends에 "next/babel"을 추가한다. 최종적인 extends는 아래와 같다.

"extends": ["next", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],

React를 import하지 않았을 때의 오류

next에서는 import React from 'react' 를 작성하지 않아도 되지만, eslint를 적용한 이후에는 발생했습니다.

따라서 eslintrc.json 파일의 rules에 아래와 같이 설정을 추가했습니다.

"react/react-in-jsx-scope": 0

eslint가 실시간으로 동작하지 않음

위와 같이 린트 설정은 먹는데, 실시간으로 반영이 되지 않고 있다.

해결 1. Extension 확인

1. vscode의 extension으로 ESLint가 설정되어 있는지 확인한다.

해결 2. vscode editor 설정

2. 기기 별로 프로젝트 세팅 값이 달라질 경우를 대비해서, 최상위 디렉토리에 .vscode 폴더에 에디더 세팅 설정한다.