[에러일지] ESLint 설정으로 TypeScript와 React 오류 해결하기

프로젝트를 진행하다 보면 ESLint에서 여러 가지 경고와 오류를 만나게 됩니다.
특히 TypeScript와 React를 함께 사용할 때, ESLint 설정이 올바르지 않으면 다양한 문제가 발생할 수 있습니다.
이번 포스팅에서는 주요 ESLint 오류와 그 해결 방법에 대해 알아보겠습니다.

🛑 문제 원인

TypeScript와 ESLint를 함께 사용할 때, ESLint는 JavaScript 파일과 모듈을 해석하는 방식으로 동작합니다. 그러나 TypeScript 파일(.ts, .tsx)을 해석하려면 ESLint가 TypeScript의 모듈 해석 방식을 이해해야 합니다. 이 과정에서 eslint-plugin-import와 eslint-import-resolver-typescript 패키지가 필요합니다.

🔄 처리 과정

❌ 1. Unable to resolve path to module './App'

// 예시 코드
import App from './App';

🤔 이유

이 오류는 파일 경로가 잘못되었거나 해당 파일이 존재하지 않을 때 발생합니다. ESLint가 파일을 찾을 수 없기 때문에 발생합니다.

✔️ 해결

.eslintrc.js 설정 파일에 import/resolver 설정을 추가하여 TypeScript 파일을 올바르게 해석할 수 있도록 합니다.

settings: {
  "import/resolver": {
    typescript: {
      alwaysTryTypes: true,
    },
  },
},

❌ 2. Missing file extension for "./App"

// 예시 코드
import App from './App';

🤔 이유

ESLint가 파일 확장자를 명시하지 않은 import 문을 허용하지 않을 때 발생합니다. TypeScript 파일을 해석할 때 확장자가 필요하기 때문입니다.

✔️ 해결

.eslintrc.js 파일에 import/extensions 규칙을 추가하여 파일 확장자를 명시하지 않아도 되도록 설정합니다.

rules: {
  "import/extensions": [
    "error",
    "ignorePackages",
    {
      js: "never",
      jsx: "never",
      ts: "never",
      tsx: "never",
    },
  ],
},

❌ 3. JSX not allowed in files with extension '.tsx'

// 예시 코드
const App = () => <div>Hello, World!</div>;

🤔 이유

이 오류는 .tsx 파일에서 JSX를 사용하는 것이 허용되지 않음을 나타냅니다. 그러나 TypeScript에서는 보통 .tsx 확장자 파일에서 JSX를 사용합니다. ESLint 설정을 확인하고 수정할 필요가 있습니다.

✔️ 해결

.eslintrc.js 파일에서 react/jsx-filename-extension 규칙을 추가하여 .tsx 파일에서 JSX를 사용할 수 있도록 합니다.

rules: {
  "react/jsx-filename-extension": [1, { extensions: [".tsx", ".jsx"] }],
}

ESLint 플러그인 설치 확인

아래 명령어로 필요한 ESLint 플러그인들이 설치되어 있는지 확인합니다. 혹시 설치되지 않았다면 설치해 주세요.

npm install eslint-plugin-import eslint-import-resolver-typescript --save-dev 

package.json

"devDependencies": {
  "eslint-import-resolver-typescript": "^3.6.1",
  "eslint-plugin-import": "^2.29.1",
}

.eslintrc.js 설정

.eslintrc.js 파일에 settings 섹션을 추가하여 TypeScript resolver를 설정합니다.

settings: {
  "import/resolver": {
    typescript: {
      alwaysTryTypes: true,
    },
  },
},

• import/resolver: ESLint의 import 플러그인이 모듈을 어떻게 해석할지 지정합니다.
• typescript: TypeScript resolver를 사용하도록 설정합니다.
• alwaysTryTypes: 타입 정의 파일(.d.ts)을 찾으려고 시도합니다.

TypeScript 설정 (tsconfig.json)

TypeScript 설정 파일에서 baseUrl과 paths 설정을 통해 모듈 경로를 간단하게 관리할 수 있습니다.

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    }
  }
}

🎯 결과

이 설정을 통해 ESLint는 TypeScript 파일을 해석할 때 TypeScript의 모듈 해석 방식을 사용하게 되며, 이로 인해 파일 확장자를 명시하지 않고도 모듈을 올바르게 해석할 수 있게 됩니다.
따라서, import/extensions와 import/no-unresolved 오류가 해결된 것입니다.

🗂️ 정리

• eslint-import-resolver-typescript 설치: ESLint가 TypeScript 파일을 해석할 수 있도록 도와줍니다.
• settings 섹션 추가: ESLint가 TypeScript의 모듈 해석 방식을 사용하도록 설정합니다.

이렇게 설정을 통해 ESLint와 TypeScript를 원활하게 통합할 수 있습니다. 문제가 해결되어 다행입니다. 추가적인 문제가 생기면 언제든지 질문해 주세요.