Typescript Webpack Alias 설정

목표

📚 React + Typescript 환경에서 Webpack Alias를 이용하여 상대 경로를 절대 경로로 쉽게 바꾸기

// Alias X
import { example } from '../../../test'

// Alias O
import { example } from '@src/test'

Webpack

→ React로만 이루어진 환경에서는 Webpack 설정을 다음과 같이 해주면 된다

→ Typescript에서는 컴파일러에게 프로젝트 디렉토리의 경로를 알려주어야함!

→ tsconfig.json에 추가적인 설정 필요

resolve: {
    alias: {
      '@ingredients': path.resolve(__dirname, 'src/components/Ingredients'),
      '@meal': path.resolve(__dirname, 'src/components/meal'),
      '@set': path.resolve(__dirname, 'src/components/set'),
      '@apis': path.resolve(__dirname, 'src/lib/apis'),
      '@constants': path.resolve(__dirname, 'src/lib/constants'),
      '@utils': path.resolve(__dirname, 'src/lib/utils'),
      '@contexts': path.resolve(__dirname, 'src/contexts'),
      '@test': path.resolve(__dirname, 'src/__test__'),
    },
    extensions: ['.ts', '.tsx', '.js'],
  },

tsconfig.json

→ paths와 baseUrl을 다음과 같이 추가해주어야함

→ paths : alias 경로 작성

→ baseUrl : tsconfig.json이 있는 기본 디렉토리 위치로 설정한다는 뜻

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@ingredients/*": ["src/components/Ingredients/*"],
      "@meal/*": ["src/components/meal/*"],
      "@set/*": ["src/components/set/*"],
      "@apis/*": ["src/lib/apis/*"],
      "@constants/*": ["src/lib/constants/*"],
      "@utils/*": ["src/lib/utils/*"],
      "@contexts/*": ["src/contexts/*"],
      "@test/*": ["src/__test__/*"]
    }
  },
  "include": ["./src/**/*"]
}

package.json

→ 마지막으로 Jest 설정까지 해주어야 함

"jest": {
    "moduleNameMapper": {
      "@ingredients/(.*)": "<rootDir>src/components/Ingredients/$1",
      "@meal/(.*)": "<rootDir>src/components/Meal/$1",
      "@set/(.*)": "<rootDir>src/components/Set/$1",
      "@apis/(.*)": "<rootDir>src/lib/apis/$1",
      "@constants/(.*)": "<rootDir>src/lib/constants/$1",
      "@utils/(.*)": "<rootDir>src/lib/utils/$1",
      "@contexts/(.*)": "<rootDir>src/contexts/$1",
      "@hooks/(.*)": "<rootDir>/src/hooks/$1",
      "@lib/(.*)": "<rootDir>/src/lib/$1",
      "@test/(.*)": "<rootDir>/src/__test__/$1"
    }
  }