ts-cra-storybook을 사용한 프로젝트에서 Alias 설정하기

프로젝트를 시작하면서 기본 alias를 잡고 가는 것이 편한 것 같다.

typescript.path.json에서 아래와 같이 대강 사용할 것 같은 alias들을 설정해 주었다.

// tsconfig.path.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@hooks": ["src/hooks"],
      "@hooks/*": ["src/hooks/*"],
      "@containers/*": ["src/containers/*"],
      "@atoms/*": ["src/components/atoms/*"],
      "@molecules/*": ["src/molecules/*"],
      "@api": ["src/api"],
      "@/*": ["src/*"]
    }
  }
}

---

// tsconfig.json
{
  "extends": "./tsconfig.path.json",
  "compilerOptions": {
    ...
  },
  "include": ["src/**/*","tsconfig.paths.json", "craco.config.js"]
}

이후, cra로 작성된 프로젝트에서는 craco를 이용해서 webpack 설정을 살살 얼래준다.

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

이후, package.json파일을 수정한다.

{
	...
	"scripts": {
		"start": "craco start",
		"build": "craco build",
		"test": "craco test",
		"eject": "react-scripts eject"
	},
    ...
}
// 요로코롬

마지막으로 루트 디렉토리에 craco.config.json을 만들어서 여기에서 webpack 설정을 다루면 된다. (한땀한땀😅 alias 설정 )

그런데 craco-alias라는 기가맥힌 플로그인이 있다.

// craco.config.js
import CracoAlias from 'craco-alias';

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

---

이러면 ts-cra 상황에서 alias 사용이 가능해진다.
그런데...
프로젝트에 storybook을 추가해버리니 storybook에서는 alias들이 에러를 뱉는다.

찾아보니 스토리북은 별도의 빌드환경을 사용하기 때문에 webpack 설정을 따로 해주는 것이 필요한 것으로 보인다.

여기를 참고 하였다.

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

module.exports = {
  stories: ...,
  addons: ...,
  webpackFinal: async (config) => {
    config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      }),
    );
    return config;
  },
};

이렇게 storybook의 webpack 설정 또한, tsconfig의 alias를 참조하게 하였다.