[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
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를 추가해준다. 위와 같이 수정해주면 된다.
레퍼런스
Author And Source
이 문제에 관하여([TS + storybook] 절대 경로 설정하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@1998yuki0331/TS-storybook-절대-경로-설정하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)