CRA(create-react-app)로 만든 프로젝트 / Storybook 7 버전에서 절대 경로를 설정하는 방법 (with Typescript) / jest 절대 경로 설정하기

 

CRA(create-react-app)로 만든 프로젝트 / Storybook 7 버전에서 절대 경로를 설정하는 방법 (with craco) / jest 절대 경로 설정하기

 

0. 이 글을 적게 된 계기

스토리북 절대 경로를 설정하지 않아 발생한 에러가 났습니다.

 

Module not found: Can't resolve "@"


Field 'browser' doesn't contain a valid alias configuration

 

CRA로 만든 프로젝트에서 절대 경로 설정하는 방법은 많이 있으나 스토리북 7 버전 환경에서 절대 경로를 설정한 예시를 찾기가 어려워 나중에 제가 다시 볼 목적으로 글을 작성하게 되었습니다. 그리고 이러한 정보가 필요한 사람들에게 도움이 되었으면 좋겠습니다.

 

스토리북7 에러 메세지

 

 

 

CRA(create-react-app)로 만든 프로젝트 절대 경로 설정하기

1. cra로 만든 프로젝트는 tsconfig, webpack설정을 따로 해줘야 합니다.

```

create-react-app (CRA)은 리액트 애플리케이션을 빠르게 생성할 수 있는 툴체인입니다. 그러나 CRA는 내부적으로 많은 설정 파일을 숨기고 있고, 이 설정을 커스터마이즈하기 위해서는 eject 명령어를 사용하여 CRA의 내부 설정 파일을 외부로 노출해야 합니다. 그리고 이렇게 eject 명령어를 실행하면 CRA에서 제공하는 많은 기능들을 사용할 수 없게 됩니다.

 

 

2. 이를 위해서는 craco, tsconfig-paths-webpack-plugin 두 개의 라이브러리가 필요합니다.

 

 

craco

2-1. craco를 설치해줍니다.

npm i -D @craco/craco

 

@craco/craco

craco는 CRA의 설정을 커스터마이즈하기 위한 대안적인 방법입니다. craco는 CRA의 내부 설정 파일을 변경하거나 노출하지 않고, CRA에서 제공하는 기능을 그대로 사용할 수 있습니다. craco는 CRA의 내부 설정 파일을 덮어쓰거나, 새로운 설정을 추가할 수 있습니다. 이렇게 craco를 사용하면 CRA의 기본 설정을 변경하면서도, CRA의 내부 기능을 계속해서 사용할 수 있어서 편리합니다.

 

Craco를 사용하여 다음과 같은 설정을 할 수 있습니다.

• 웹팩(Webpack) 설정 커스터마이징
• Jest 설정 커스터마이징
• babel 설정 커스터마이징

 

 

tsconfig-paths-webpack-plugin

2-2.tsconfig-paths-webpack-plugin를 설치해줍니다.

npm install --save-dev tsconfig-paths-webpack-plugin

tsconfig-paths-webpack-plugin

craco를 사용할 때, 절대경로(alias)를 사용하기 위해서는 tsconfig-paths-webpack-plugin 라이브러리가 필요합니다. 이 라이브러리는 Webpack에서 tsconfig.json 파일의 baseUrl과 paths 설정을 읽어들여서, 절대경로(alias)를 처리할 수 있도록 도와줍니다.

 

3. tsconfig.path.json 파일을 root 폴더에 생성해줍니다. Alias를 설정합니다.

 

자신이 사용할 baseURL을 설정해주고 절대 경로를 baseURL에 맞춰서 코드를 작성해줍니다.

 

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@assets/*": ["assets/*"],
      "@pages/*": ["pages/*"],
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"],
      "@constants/*": ["constants/*"],
      "@type/*": ["types/*"],
      "@providers/*": ["providers/*"],
      "@contexts/*": ["contexts/*"]
    }
  }
}

 

4. package.json 설정 변경하기

scripts에서 react-scripts를 craco로 변경합니다.

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
    }

 

5. craco.config.js 파일을 루트 폴더에 만듭니다. 

 

다음과 같이 설정해줍니다. 

 

overrideWebpackConfig 함수는 craco가 제공하는 함수 중 하나로, CRA 애플리케이션의 Webpack 설정 객체를 받아서 변경할 수 있도록 해줍니다. 이 함수는 CRA 애플리케이션의 Webpack 설정 객체를 파라미터로 받아서, 해당 객체를 변경한 후 변경된 설정 객체를 반환합니다.

 

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

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

 

6. tsconfig.json에 extends 옵션을 추가합니다.

 

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

 

 

7. 리엑트에서 절대 경로 설정은 끝났습니다.

이제 다음과 같이 사용할 수 있습니다.

 

import React, { type FormEvent, useCallback, useEffect, useRef } from 'react';
import { useFocusInput } from '@hooks/useFocusInput';
import { useFormInputs } from '@hooks/useFormInputs';
import { useHideScrollState } from '@hooks/useHideScrollState';
import { useCardInputInfoContext } from '@contexts/useCardInputInfo';
import { usePageContext } from '@contexts/usePageContext';
import { CardNumberInput } from '@components/addCardPage/CardNumberInput';
import { CvcInput } from '@components/addCardPage/CvcInput';
import { ExpirationInput } from '@components/addCardPage/ExpirationInput';
import { OwnerInput } from '@components/addCardPage/OwnerInput';
import { PasswordInput } from '@components/addCardPage/PasswordInput';

 

 

---

Storybook 7 버전에서 절대 경로를 설정하기

 

1. 루트 폴더의 .storybook/main.ts 파일을 엽니다. 그리고 webpackFinal을 설정해줍니다.

 

webpackFinal 함수는 Storybook에서 제공하는 함수 중 하나로, Storybook의 Webpack 설정 객체를 파라미터로 받아서 해당 객체를 변경한 후, 변경된 Webpack 설정 객체를 반환하는 역할을 합니다.

이 함수 내부에서는 먼저 config.resolve 객체와 config.resolve.plugins 배열이 있는지 확인하고, 없으면 빈 객체와 빈 배열을 추가해줍니다. 그 다음, tsconfig-paths-webpack-plugin 라이브러리를 추가하여, Storybook에서 tsconfig.json 파일의 baseUrl과 paths 설정을 사용할 수 있도록 해줍니다.

이 코드를 통해, Storybook에서도 CRA 애플리케이션과 동일한 방법으로 절대경로(alias)를 사용할 수 있게 됩니다.

import path from 'path';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: [...],
  addons: [...],
  framework: {...},
  docs: {...},
  staticDirs: [...],
  webpackFinal: async (config) => {
    if (!config.resolve) {
      config.resolve = {};
    }

    if (!config.resolve.plugins) {
      config.resolve.plugins = [];
    }

    config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      })
    );
    return config;
  },
};

export default config;

 

스토리북 코드는 7 버전을 기반으로 작성되었습니다.

 

2.스토리북에서 절대 경로 설정은 끝났습니다.

 

 

 

 

---

Jest 절대 경로 설정하기

craco.config.js에서 jest 설정을 하면 사용 가능 합니다.

 

 

package.json의 test도 craco test로 변경해줍니다.

package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },

 

craco.config.js

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

module.exports = {
	// 이 부분 !
  jest: {
    configure: {
      moduleNameMapper: {
        '^@components(.*)$': '<rootDir>/src/components$1',
        '^@assets/(.*)$': '<rootDir>/src/assets/$1',
        '^@pages/(.*)$': '<rootDir>/src/pages/$1',
        '^@components/(.*)$': '<rootDir>/src/components/$1',
        '^@styles/(.*)$': '<rootDir>/src/styles/$1',
        '^@recoil/(.*)$': '<rootDir>/src/recoil/$1',
        '^@type/(.*)$': '<rootDir>/src/types/$1',
        '^@utils/(.*)$': '<rootDir>/src/utils/$1',
        '^@constants/(.*)$': '<rootDir>/src/constants/$1',
        '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
      },
    },
  },
 plugins: [
 	...
  ],
};

 

 

 

Add Webpack alias to Jest | CRACO

 

참고한 자료

 

🧭 Paths Alias 사용하기(CRA, Storybook 설정도 함께)

tsconfig-paths-webpack-plugins 완벽하게 사용하기 | 개발자 상현에 하루하루