vite + typescript 에서 절대 경로 설정

왜 하는걸까?

프로젝트가 조금씩 커지면서 폴더와 파일이 늘어나다보면
import 할때 뎁스가 길어져서 불편한 경우가 생긴다.
절대경로를 설정해줌으로써 import 경로 뎁스가 길어지는 불편함을 방지해준다.

어떻게 하면 되나?

먼저,
vite.config.ts 에서 아래와 같이 설정해준다.

경로를 인식해주기 위해서 nodejs 내장 모듈인 path를 불러오고,
경로를 만들어 주기 위해 resolve() 메서드를 사용한다.

설정할 속성으로는 resolve를 사용하고
그 안에 alias(별칭) 속성에 객체를 요소로하는 배열 형태로 설정해준다.

객체에는 무언가를 찾으면(find)
무언가로 바꿔서 인식(replacement)해달라는 방식으로 설정해준다.

여기서는 '@'를 찾으면 현재 디렉토리를(__dirname)를
src 폴더로 대체하라는 의미로 이해하면 될 것 같다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path'; // 추가1!

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  // 추가2!
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
});

다음은,
tsconfig.json 에서 컴파일옵션을 설정해주어야 한다.

compilerOptions 에서 paths 속성을 추가해준다.
아마도 지정 경로가 아니다 보니 컴파일 할 때도
설정해주어야 인식할 수 있으니까 그런 듯 하다.

@/* : @ 이하의 모든 디렉토리를 src로 바꿔준다는 내용으로 이해하고
중괄호와 배열에 담아서 표기하는 표기법에 주의해야겠다.

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,
    // 추가!
    "paths": {
      "@/*": ["./src/*"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

왜 정리하는가?

지난번 교육때 다른 팀에서 한 프로젝트를 둘러보다가
이런 코드가 있었는데 처음보고 신기해서 찾아보다 지나간 기억이 스쳐간다.

찾으면 나오는 자료이긴하지만
이번에 혼자 vite + typescript 를 연습하면서
간단히 정리하면 다음에도 빠르게 복기하면서
사용할 수 있을 것 같아 정리하고 넘어가본다.

참고자료를 찾다보면 일부 설정에 다른 부분이 있는 것 같은데
플젝을 진행해보면서 잘못된 부분은 고쳐나가보려고 한다.

참고자료

• Node.js의 path 모듈로 경로 다루기
  https://www.daleseo.com/js-node-path/
• Node.js dirname / filename / process.cwd() 차이 정리
  https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-dirname-filename-processcwd-%EC%B0%A8%EC%9D%B4-%EC%A0%95%EB%A6%AC
• vite 에서 절대경로 설정하기
  https://velog.io/@hunmok1027/vite-%EC%97%90%EC%84%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0