최신 프론트엔드 개발환경 적용하기4(storybook with vite,emotion))

개발환경 적용은 끝났다. 테스트코드나 ci cd까지 추가하는 건 너무 광범위하다고 생각해서 다루지 않을려고 했다. 그런데 storybook을 적용하면서 몇가지 문제점이 생겨서 적용방법만 소개해보려고 한다. 

 

스토리북 설치하기

다음 명령어로 스토리북을 설치하자. 참고로 yarn이아니라서 그냥 레포에 직접 들어가서 명령어를 입력하면 된다. npx는 yarn 환경이라면 yarn으로 알아서 설치해준다.

npx sb init --builder @storybook/builder-vite

이게 끝이면 내가 글을 쓰지 않았다. yarn story명령어로 스토리북을 실행하면 import를 할 수 없다는 에러가 발생한다. 해당 라이브러리를 찾아보니 실제로 설치되지 않은 라이브러리다. 아마 내부에서 사용되는 것 같은데... 어쨋든 안된다. 깃헙 이슈란에서 해결방법을 찾았다. 무식하지만 그냥 전부 다 설치하면 된다. 아래 버전정보를 적어두었으니 설치되지 않은 storybook의 라이브러리들을 설치하면 된다. yarn pnp와 vite 둘다 문제가 있다는 것 같다. 찝찝하지만 일단 설치하고 넘어가자.

https://github.com/storybookjs/builder-vite/issues/423

 

emotion 연결하기

emotion을 연결하는데도 vite라서 조금 설정법이 다르다. 처음부터 살펴보자.(velopert님이 깃헙 이슈란에 남긴 내용. 감사합니다)

 

먼저 emotion을 설치하자

yarn add @emotion/react @emotion/styled emotion-normalize
yarn add -D @emotion/babel-plugin

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "types": ["vite-plugin-svgr/client", "@emotion/react/types/css-prop"],
  },
  "include": ["src", ".storybook/*"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: [
          [
            '@emotion/babel-plugin',
            {
              autoLabel: 'dev-only',
              labelFormat: '[dirname]--[filename]--[local]___',
            },
          ],
        ],
      },
    }),
  ],
});

storybook/main.cjs

const path = require('path');
const { loadConfigFromFile, mergeConfig } = require('vite');
const react = require('@vitejs/plugin-react');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite',
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config, { configType }) {
    const { config: userConfig } = await loadConfigFromFile(path.resolve(__dirname, '../vite.config.ts'));
    config.plugins = config.plugins.filter(
      (plugin) => !(Array.isArray(plugin) && plugin[0]?.name.includes('vite:react')),
    );

    config.plugins.push(
      react({
        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
        jsxImportSource: '@emotion/react',
        babel: {
          plugins: ['@emotion/babel-plugin'],
        },
      }),
    );
	return config;
  },
};

버전정보

package.json

{
  "name": "client-a",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@common/components": "workspace:*",
    "@common/const": "workspace:*",
    "@common/hooks": "workspace:*",
    "@common/types": "workspace:*",
    "@common/utils": "workspace:*",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "emotion-normalize": "^11.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite-plugin-svgr": "^2.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.0",
    "@emotion/babel-plugin": "^11.10.2",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-backgrounds": "6.5.9",
    "@storybook/addon-docs": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addon-measure": "^6.5.10",
    "@storybook/addon-outline": "^6.5.10",
    "@storybook/addons": "^6.5.10",
    "@storybook/builder-vite": "^0.2.2",
    "@storybook/channel-postmessage": "^6.5.10",
    "@storybook/channel-websocket": "^6.5.10",
    "@storybook/client-api": "^6.5.10",
    "@storybook/preview-web": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "@types/node": "^18.7.16",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "babel-loader": "^8.2.5",
    "eslint-plugin-storybook": "^0.6.4",
    "typescript": "^4.6.4",
    "vite": "^3.1.0"
  }
}

깃헙 레포

https://github.com/yoonminsang/yarn-berry-monorepo-template/tree/91029200ad6c9b6e84723d896b48b2f9feea3cd4

GitHub - yoonminsang/yarn-berry-monorepo-template: yarn berry로 만드는 모노레포

참고글

https://github.com/storybookjs/builder-vite/issues/210