🚀 vite react typescript 환경에서 path alias 설정

왜 절대경로를 설정했나요?

• 프론트엔드 컴포넌트 설계 아키텍처에서 FSD 아키텍처를 선택하기로 했다
• FSD는 Layer가 구분되어 있고, 각 Layer는 고유한 책임 영역이 있습니다. 또 계층적으로 Layer가 존재하여 상위 Layer만 하위 Layer의 모듈을 사용할 수 있다
• FSD는 폴더 구조가 구체화되어 있어서 기본으로 제공되는 ../././pages 와 같이 상대경로를 사용하면 import 문이 길어지고, 코드의 가독성이 떨어지는 경험을 줄 수 있다

Vite 환경에서의 절대 경로 설정 방법

• vite를 react-ts 템플릿을 선택하여 설정하게 되면 tsconfig.json 파일이 자동으로 생성이 된다
• tsconfig.json 에 하단의 내용을 추가한다

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

• vscode 환경에서 @/pages/MainPage 와 같이 입력 했을 때, 모듈을 찾을 수 없다는 오류가 뜬다
• vite 환경이라면 추가적으로 vite-tsconfig-paths를 설치해주어야 한다
• vite.config.ts에 하단의 내용을 추가한다