path alias?

상대 경로를 이용하면 프로젝트가 커질수록 ../../src 처럼 복잡하여 구조파악이 어렵고 불편하다. 이를 해결하고 개발 경험을 증진시키는 해결 방법으로 대표되는 것이 path alias이다.

path alias는 경로에 별칭을 붙인다는 뜻으로, 상대경로로 인해 복잡해지는 import를 간략하게 만드는 방법이다. 보통 모듈 번들러에서 해당 기능을 지원하며, 번들러마다 적용하는 방법이 약간씩 다르지만 맥락은 대부분 비슷하다. TS를 사용하는 경우 추가로 tsconfig.json에도 작성해주어야 한다.

path alias를 적용하면 해당 컴포넌트가 어디에 속해있는지 쉽게 파악할 수 있고 import 역시 편해진다.

CRA의 경우 webpack을 사용하는데, webpack config를 따로 정의할 수 없기 때문에 eject하거나 craco와 같은 오버라이딩 라이브러리를 이용해 설정해야 한다.

Path Alias with Vite

번들러 중 하나인 Vite에서도 마찬가지로 지원하는데, vite.config.js 파일에 아래와 같이 작성하면 된다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  resolve: {
	// find: 해당 경로의 이름. 실제로 import문에 적용된다.
	// replacement: 경로 지정. 이때, path.resolve를 이용한다.
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      {
        find: '@components',
        replacement: path.resolve(__dirname, 'src/components'),
      },
      {
        find: '@assets',
        replacement: path.resolve(__dirname, 'src/assets'),
      },
      {
        find: '@page',
        replacement: path.resolve(__dirname, 'src/page'),
      },
      {
        find: '@util',
        replacement: path.resolve(__dirname, 'src/util'),
      },
      {
        find: '@recoil',
        replacement: path.resolve(__dirname, 'src/recoil'),
      },
    ],
  },
});

VScode 자동완성 설정 (w/ JavaScript)

단, 해당 설정을 하고 나면 VSCode는 이를 인지하지 못해 자동완성이 안된다. 이 때는 jsconfig.json에 아래와 같이 path alias를 정의해주면 정상적으로 자동완성이 동작한다. (TS의 경우 tsconfig.json)

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