못생긴 상대경로에서 간zlzl존 절대경로로😎

도입배경

혹시... 당신의 경로. 못생겼다는 생각해보셨습니까?

개발을 하면서 import문은 당연히 작성하게 된다. 당신은 매번 폴더의 경로를 보면서 ..을 찍으며 현재 파일이 있는 디렉토리를 나가는게 일상이 되어 불편함을 못느꼈을 수도 있다. 하지만 편안함과 자동화에 미쳐버린 나는 폴더 경로를 보는 행위조차 귀찮아졌다. 귀찮음, 가독성뿐만 아니라 절대경로를 사용하면 경로를 잘못 입력하거나 계산하고 있는 일이 없어질 것이다!      

경로가 예뻐지는 법

vite configuration에서 alias를 만들어주기

# vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
...
  resolve: {
    alias: {
      '@components': resolve(__dirname, './src/components'),
      '@container': resolve(__dirname, './src/container'),
      '@core': resolve(__dirname, './src/core'),
      '@images': resolve(__dirname, './src/images'),
      '@page': resolve(__dirname, './src/page'),
      '@util': resolve(__dirname, './src/util'),
    },
  },
});

vite 환경설정 파일(vite.config.ts)에서 resovle 옵션을 지정해주어 alias를 만들어주자. node에서 기본으로 제공해주는 path모듈의 resolve를 사용해주어 절대경로로 만들어 지정해주자!

여기까지 해주고 yarn으로 실행해주면... 페이지가 잘 뜬다 성공!!!

...? 어?

타스도 알려줘... 당신의 경로...

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@": ["src/*"],
      "@components/*": ["src/components/*"],
      "@container/*": ["src/container/*"],
      "@core/*": ["src/core/*"],
      "@images/*": ["src/images/*"],
      "@page/*": ["src/page/*"],
      "@util/*": ["src/util/*"]
    }
  },
...
}

typescript는 컴파일단계에서 에러를 검출하는데, alias에 대한 설명을 말해주지 않는다면 해당하는 모듈을 찾을 수 없다고 에러를 뱉는다. 그까이꺼 typescript의 configuration에서도 알려주면 해결된다.

🚨주의 : 더 깊은 경로 일 수록 상단에 넣어주세요🚨

해당 글을 작성한 이후, VSCode에서 모듈 자동완성 기능이 정상 작동하지 않는 것을 확인했다... src/components 경로에 해당한다면 @components alias가 떠야하는데 @가 떠버린 것이다! VSCode는 tsconfig.json의 paths의 위부터 탐색해 맞는 경로가 있다면 바로 추천해준다. 현재 tsconfig.json의 최상단에 src경로를 가진 @가 있었기에 더 깊은 경로가 있어도 @로 처리해버렸던 것이다.

따라서 depth가 깊은 alias를 상단으로 올려주었다.

최종 경로 모습

이제야 좀 이쁘고 멋져보이네😎 간단한 설정으로 당신의 경로를 이쁘게 만들어보세요!

참고자료

vite 공식 문서-resolve-alias

Import Aliases in Vite