React + typescript Path alias 설정

컴포넌트나 src들을 import 해올 때,
프로젝트의 규모가 커질수록 불러오는 path의 경로가 난잡해지기 마련이다.
무한히 "../../../../" 로 불러올 수도 없는 노릇이니,
경로를 직관적이고 간단하게 바꿀 수 있는 path alias를 사용하자.

Alias path 추가

먼저 Alias 해줄 Path들을 추가하자.

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@apis/*": ["apis/*"],
      "@assets/*": ["assets/*"],
      "@atoms/*": ["components/atoms/*"],
      "@blocks/*": ["components/blocks/*"],
      "@pages/*": ["components/pages/*"],
      "@hooks/*": ["hooks/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"],
      "@components/*": ["components/*"]
    }
  }
}

위에 모든 줄을 사용할 필요는 없고, 사용할 폴더에 따라 커스텀해서 사용하면 된다.

tsconfig.json에 alias path들을 기록해둔 파일을 추가해주자.

// tsconfig.json

{
    ...
    "extends": "./tsconfig.paths.json"
}

Craco 설치

yarn add craco
yarn add tsconfig-paths-webpack-plugin

프로젝트 최상단 경로에 craco 설정파일을 추가해준다.

// craco.config.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        }
      }
    }
  ]
};

package.json에서 script를 수정해주어야 crago로 빌드가 가능하다.

// package.json
{
  ...
  "scripts": {
      "start": "craco start",
      "build": "craco build"
    },
  ...
}

사용법

📦src
┣ 📂components
┃ ┣ 📜Canvas.style.tsx
┃ ┗ 📜Canvas.tsx
┣ 📂hooks
┃ ┗ 📜useCanvas.ts
┣ 📜App.css
┣ 📜App.test.tsx
┣ 📜App.tsx
┣ 📜index.css
┣ 📜index.tsx
┣ 📜logo.svg
┣ 📜react-app-env.d.ts
┣ 📜reportWebVitals.ts
┗ 📜setupTests.ts

Canvas.tsx에서 useCanvas.tsx를 불러오려고 한다!

Path alias 사용 전

import { useCanvas } from '../hooks/useCanvas;

Path alias 사용 후

import { useCanvas } from '@hooks/useCanvas;