vite + typescript + react 프로젝트에서 절대경로 설정하기

1. 문제상황 및 설정 미리보기

import를 할때 파일 위치가 깊어질수록 "../" 의 압박이 심해진다.

../ 지옥

위 import 경로에서 ../를 지워보자

이렇게

2. tsconfig, vite.config 설정하기

src/ 내부 1-depth의 파일들을 절대경로로 import 하는 것을 목적으로한다.

2.1 tsconfig

1. baseUrl을 "./src"로 설정 (L9)

    - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로를 기준으로하여 찾는다

2. paths를 "src/*": ["../src/*]로 설정 (L10 ~ L12)

    - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로로 매핑하여 이해한다.

    - 설정 경로는 "baseUrl" 기준이라는 것에 유의하자.

적용예시

2.2 vite.config

1. src 내부 디렉터리 가져오기 (L6 ~ L8)

    - fs.readdirSync(디렉터리 읽기)와 fs.statSync(자세한 정보 파악)을 이용

src아래 1-depth의 디렉터리들

2. config에 적용할 fileAlias 객체 생성 (L10 ~ L16)

    - 'src', srcDirectories를 { src: `/src`, apis: `/src/apis`, assets: `/src/assets` } 같은 객체 형태로 매핑

    - 'src'는 tsconfig의 paths, srcDirectories는 tsconfig의 baseUrl와 연관된다.

적용예시

3. 그래도 에러가 난다면

혹시 cypress나 jest를 쓰고있다면 전부 각각 설정을 해주어야한다.

위 srcDirectories를 유틸 함수로 만들어 여러곳에서 사용할 수 있을 것이다.