[TS + storybook] 절대 경로 설정하기

최근에 하고 있는 프로젝트에서 import하는 파일들을 절대 경로로 관리하기 위해 설정을 했는데, storybook에서 config paths를 읽기 위해서는 추가적인 작업이 필요했다. 처음 알게 된 거라 기록해서 남기기로 한다.

tsconfig 수정

우선 파일들을 절대 경로로 관리하기 위해선 tsconfig를 설정해주면 된다. (내가 관리하는 프로젝트는 CRA로 생성된 typescript의 리액트 프로젝트이다.)

baseUrl과 paths

{
  "compilerOptions": {
    /* 생략 */
    "baseUrl" : "./src",
    "paths": { 
      "@atoms/*": ["components/UI/atoms/*"],
      "@molecules/*": ["components/UI/molecules/*"],
      "@organisms/*": ["components/UI/organisms/*"],
    },
  },
  "include": ["src"]
}

내가 진행 중인 프로젝트는 atomic 디자인 패턴을 따르고 있기 때문에 위와 같이 해줬다. baseUrl은 이름 그대로 기준이 되는 경로를 뜻하며, paths는 baseUrl에서 설정한 경로 아래에 있는 경로들에 별칭을 정해주는 거라 이해하면 쉽다.

storybook 설정하기

바꾼 절대 경로로 import 구문을 수정하고 storybook을 다시 실행하면 오류가 나는 것을 확인할 수 있을 것이다. 따라서 storybook에 tsconfig에서 설정한 내용들을 이해할 수 있도록 해줘야 한다.

필요 패키지 설치

yarn add -D tsconfig-paths-webpack-plugin
npm install -D tsconfig-paths-webpack-plugin

https://www.npmjs.com/package/tsconfig-paths-webpack-plugin

tsconfig-paths-webpack-plugin 패키지를 설치해준다. tsconfig의 paths를 읽을 수 있도록 도와주는 패키지이다.

.storybook/main.js 수정

const TsconfigPathsPlugin  = require('tsconfig-paths-webpack-plugin')
module.exports = {
  webpackFinal: async config => ({
    ...config,
    resolve: {
      ...config.resolve,
      ...config.resolve.plugins.push(new TsconfigPathsPlugin({})),
    },
  }),
};

storybook 세팅에서 TsconfigPathsPlugin를 추가해준다. 위와 같이 수정해주면 된다.

레퍼런스

• js/리액트 절대경로 설정하기 - jsconfig.json / tsconfig.json
• [Typescript] storybook에서 절대 경로 설정하기