[react, webpack] 경로 요약하기(alias)

본문에는 webpack 과 typescript 두가지 설정방법이 있는데, typescript만 설정해도 작동한다

 

프로젝트를 진행하다보면 다음과 같은 경로를 참고할 때가 있다.

# root 경로에 있는 styles 폴더
import {useCustomStyles} from "../../../../styles/CustomStyles";
...

 

../../ 이런경로보다는 항상 root경로로부터 찾아갈 수 있도록 설정하는게 더 나아보였다.

 

그래서 다음으로 설정을 추가한다

webpack.config.js (파일이 없는 경우 생략)

import path from 'path'

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './'),  // ./ 경로를 @으로 설정
            extensions: ['.ts', '.tsx', '.js', '.json'],
        }
    },
}

 

module 에서 다음과 같은 에러가 발생하면 .eslintrc.json 파일을 수정한다.

ESLint: 'module' is not defined.(no-undef)

 

.eslintrc.json 파일을 열어 env 에 node 를 추가한다

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true   // 이 부분 추가
    },
...

 

마지막으로 tsconfig.json 내에 baseUrl과 paths 를 다음처럼 추가한다(없으면 추가)

 

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

 

이제 다음처럼 설정이 가능하다

# root 경로에 있는 styles 폴더
# 이전
# import {useCustomStyles} from "../../../../styles/CustomStyles";
# 이후
import {useCustomStyles} from '@/styles/CustomStyles'
...

 

 

 

끝,