7. 디자인시스템 - svg 및 alias 설정

 

 

1. svg 설정 (Component 형태로 사용가능하게)

1.1. storybook 설정

사전설치

$ yarn add --dev @svgr/webpack
$ yarn add --dev url-loader

 

main.ts

# .storybook/main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';
import path from 'path';

...

const config: StorybookConfig = {
  ...

  // webpackFinal을 통해 Webpack 설정을 변경
  webpackFinal: async (config) => {
    if (!config.module || !config.module.rules) {
      return config;
    }

    // TODO. 이거 추가해야 ReactComponent as ArrowRight 된다.
    config.module.rules = [
      ...config.module.rules.map((rule) => {
        if (!rule || rule === '...') {
          return rule;
        }

        if (rule.test && /svg/.test(String(rule.test))) {
          return { ...rule, exclude: /\.svg$/i };
        }
        return rule;
      }),
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
        // use: ['@svgr/webpack'],
      },
    ];

    ...

    return config;
  },
  
  ...
}

 

1.2. typescript 설정

tsconfig.json 수정

# tsconfig.json

{
  ...
  // "include": ["src", "src/custom.d.ts"],
  "include": ["src"],
  "exclude": ["node_modules", "dist"],
  ...
}

 

custom.d.ts 추가

# src/custom.d.ts

declare module '*.mdx';

declare module '*.svg' {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const content: string;

  export { ReactComponent };
  export default content;
}

 

1.3. rollup 설정

사전설치

$ yarn add --dev @svgr/rollup
$ yarn add --dev rollup-plugin-image

 

rollup.config.mjs

# rollup.config.mjs

...
import image from 'rollup-plugin-image'; // 이미지를 위한 플러그인 예시
import svgr from '@svgr/rollup';
import alias from '@rollup/plugin-alias';
...

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      ...

      // 다른 플러그인들과 함께 이미지 및 SVG 플러그인을 추가
      image(),
      svgr(), // SVG를 컴포넌트로 사용 할 수 있게 해줌.

      ...
    ],
  },
  ...
];

 

2. Alias 설정

1.1. storybook 설정

main.ts

# main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';
import path from 'path';

const config: StorybookConfig = {
  ...
  
  // webpackFinal을 통해 Webpack 설정을 변경
  webpackFinal: async (config) => {
    if (!config.module || !config.module.rules) {
      return config;
    }

    ...

    // alias 지정
    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, '../src/components'),
      '@assets': path.resolve(__dirname, '../src/assets'),
    };

    return config;
  },
};
export default config;

 

1.2. typescript 설정

tsconfig.json 수정

# tsconfig.json

{
  ...

  // alias 지정
  "paths": {
    "@components/*": ["src/components/*"],
    "@assets/*": ["src/assets/*"]
  }
}

 

1.3. rollup 설정

사전설치

$ yarn add --dev @rollup/plugin-alias

 

rollup.config.mjs

# rollup.config.mjs

...
import alias from '@rollup/plugin-alias';
...

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      ...
      
      // alias 지정
      alias({
        resolve: ['.ts', '.tsx', '.json', '.js', '.jsx'],
        entries: [
          {
            find: /^@assets\/(.*)/,
            replacement: 'src/assets/$1',
          },
          {
            find: /^@components\/(.*)/,
            replacement: 'src/components/$1',
          },
        ],
      }),

      ...
    ],
  },
  ...
];