yarnberry, vite, typescript, tailwindcss 환경에서 storybook을 적용하는 방법

🤗tailwindcss에 storybook을 적용시키는 방법

 

슬슬 정이 떨어지고 있는 yarn berry

빠른 건 알겠지만 노드 모듈에 의존성이 있거나

아무튼 지원이 안되는 경우 개복치마냥 에러가 발생하는데 굉장히 열이 받습니다.

임시방편으로 pnpify라는 라이브러리를 제공해주고 있기는 하지만

말그대로 임시방편이며 계속 사용할 것을 기대하고 만든 라이브러리가 아니라고하네요

 

그래도 그나마 storybook까지는 잘 적용을 해볼 수 있습니다.

그나마... 잘 적용을 해 볼 수 있는데 레퍼런스 찾아보기가 상당히 어렵네요

 

우선 제 환경은 다음과 같습니다.

window10

yarn berry

vite

typescript

react

tailwindcss

 

또한 많은 깃허브 이슈 페이지와 블로그를 돌아다녔지만

가장 확실한 해결책이 된 블로그의 링크를 밝히며 시작하겠습니다.

혹시 tailwindcss가 아닌 emotion을 사용하고자 하시는 분은

아래 링크를 참고하시는 것을 추천드리겠습니다.

https://ms3864.tistory.com/441

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

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

위 명령어를 입력해줍니다.

yarn 환경에서 npx를 사용하면 알아서 yarn으로 설치해준다고 하네요

다만 이렇게 설치를 잘 하고 싱글벙글 yarn storybook을하면

일단 1 에러

이건 제가 prettierrc에 넣어둔 plugin 속성에서 나오는 문제니까 무시해도 될 것 같습니다.

혹시 이런 에러가 발생하시는 분은 prettierrc 등 설정파일들을 찾아서

내가 설치하지 않는 모듈을 사용하려고하고있는지 체크해보시기 바랍니다.

첫번째 에러를 잘 해결한 후 다시 install을 시도해봅니다.

동일하게 npx ~~~ 명령어를 입력해주고 설치가 성공적으로 된 것을 확인한 뒤

yarn storybook을 해봅니다.

Internal server error: Failed to resolve import @storybook/global ~~

이라는 에러가 반환되네요

대략 storybook/global 디렉토리에 있는 것들을 import해오지 못했다는 에러로 보입니다.

@storybook/global을 설치해주면 일단 당장 보이는 에러는 해결할 수 있지않을까요?

만일 storybook/global이 아닌 다른 모듈을 불러오는데 실패한 경우에는

그 모듈을 설치해주면 될 듯합니다.

yarn add @storybook/global

성공적으로 실행되는 것을 확인할 수 있네요

하지만 tailwindcss를 사용하시는 경우 여기서 끝이 아닙니다.

 

제대로 스토리북은 열렸지만 자신의 컴포넌트를 연결시켜보면

아무런 CSS도 적용되어있지않은 컴포넌트를 마주치게됩니다.

이는 .storybook/preview.ts 파일에 접근하는 것으로 해결할 수 있습니다.

 

아무래도 storybook 환경이 tailwindcss의 클래스들을 모르기때문에

아무것도 적용이 되지 않는 것인가 싶네요

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindcss를 사용하시는 분은 이 세줄의 코드를 반드시 적용시키고 사용하는 중일것이라 생각합니다.

이 세줄의 코드가 적용되어있는 CSS 파일을 import해오면 되겠습니다.

예컨대 저는 src/index.css에 저 세줄의 코드를 적용시키니

.storybook/preview.ts파일에서 상대경로로 index.css에 접근해서 import를 하겠습니다.

 

.storybook/preview.ts

import type { Preview } from '@storybook/react';
import '../src/index.css';
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

제 devDependencies는 다음과 같습니다.

실행에 반드시 필요하지는 않은 라이브러리도 깔려있으니

혹여 위 방법을 시도해보았는데 안되시는 경우 하나씩 차근차근 설치해보시는것을 권합니다.

"devDependencies": {
    "@babel/core": "^7.21.8",
    "@mdx-js/react": "^2.3.0",
    "@storybook/addon-actions": "^7.0.15",
    "@storybook/addon-backgrounds": "^7.0.15",
    "@storybook/addon-docs": "^7.0.15",
    "@storybook/addon-essentials": "^7.0.15",
    "@storybook/addon-interactions": "7.0.15",
    "@storybook/addon-links": "7.0.15",
    "@storybook/addon-measure": "^7.0.15",
    "@storybook/addon-outline": "^7.0.15",
    "@storybook/addons": "^7.0.15",
    "@storybook/blocks": "7.0.15",
    "@storybook/builder-vite": "^7.0.15",
    "@storybook/channel-postmessage": "^7.0.15",
    "@storybook/channel-websocket": "^7.0.15",
    "@storybook/client-api": "^7.0.15",
    "@storybook/core-common": "^7.0.15",
    "@storybook/global": "^5.0.0",
    "@storybook/node-logger": "^7.0.15",
    "@storybook/preview-web": "^7.0.15",
    "@storybook/react": "^7.0.15",
    "@storybook/react-vite": "7.0.15",
    "@storybook/testing-library": "^0.1.0",
    "@types/node": "^20.1.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "babel-loader": "^9.1.2",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "eslint-plugin-storybook": "^0.6.12",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.2.8",
    "prop-types": "15.8.1",
    "storybook": "7.0.15",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }