[jiheon788] Path Alias 오류 수정

[jiheon788]

문제 상황

tsconfig로 path alias 기능 사용하려했으나 빌드 실패

문제 해결

프로젝트 빌드 시에도 path alias를 보고 올바른 경로를 찾을 수 있도록 웹팩에게도 path alias를 알려줘야 합니다. 웹팩에서 path alias 설정은 webpack.config.js 파일을 변경해줘야 하는데, cra로 만든 프로젝트라면 eject를 해야 해당 파일이 나타납니다.
여기서는 eject를 하지 않고 webpack 설정을 확장하기 위해 craco 라이브러리를 사용하였습니다.

변경 사항

• @ 옆에 / 붙여야 합니다.

// before
import NewComp from '@pages/NewComp'

// after
import NewComp from '@/pages/NewComp'

• 기존에는 아래와 같이 tsconfig에 폴더 하나씩 입력해주어야했습니다. 설정 수정하여 src 아래 폴더는 자동으로 alias import 가능합니다.

# tsconfig.json 
# ⚠ 안해도 됩니다.

"paths": {
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"],
      "@lib/*": ["lib/*"]
    }
...