절대 경로 설정하기 (craco + typescript + storybook)

craco + typescript

1. craco 설치

yarn add @craco/craco
yarn add craco-alias -D

 

2. craco.config.js 세팅

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json",
      },
    },
  ],
};

 

3. tsconfig.json 세팅

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

 

4. tsconfig.paths.json 세팅

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@api/*": ["src/api/*"],
      "@components/*": ["src/components/*"],
      "@configs/*": ["src/configs/*"],
      "@fonts/*": ["src/fonts/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@store/*": ["src/store/*"],
      "@styles/*": ["src/styles/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

 

 

스토리북 절대 경로

프로젝트에 절대 경로를 설정하고 나니 스토리북에서 에러가 발생했다. 찾아보니 스토리북도 따로 절대 경로를 설정해야 한다고 한다. (참고 자료)

먼저 tsconfig.json에서 해당 코드를 추가하여 path 설정을 하였다.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@api/*": ["src/api/*"],
      "@components/*": ["src/components/*"],
      "@configs/*": ["src/configs/*"],
      "@fonts/*": ["src/fonts/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@store/*": ["src/store/*"],
      "@styles/*": ["src/styles/*"],
      "@utils/*": ["src/utils/*"]
    },
}

그리고 tsconfig-paths-webpack-plugin 을 설치한다.

yarn add -D tsconfig-paths-webpack-plugin

마지막으로 .storybook/main.js 에서 TsconfigPathsPlugin 설정을 추가한다.

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