![]()
🤔 Addon-controls 란? 공식문서를 해석해보면, 따로 코드화 작성 없이 동적으로 상호 작용할 수 있는 그래픽 UI를 제공한다고 정의되어 있습니다. 현재 최신 storybook을 설치하면 예제에는 있지만 사용하려면 다운을 받아야 합니다. 해당 글은 react + typescript 기준으로 작성됩니다. 🔨 설치하기 npm i -D @storybook/addon-controls 설치가 끝나면 .storybook/main.js에 addon을 추가해줍니다. //main.js module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-lin..
![]()
💉 react에 storybook 적용하기 react + typescript + storybook 프로젝트를 만들어보려고 합니다. React 설치 먼저, 타입 스크립트가 적용된 리액트 프로젝트를 생성해보겠습니다. npx create-react-app 프로젝트명 --typescript 생성된 프로젝트의 src 폴더 에서 안 쓰는 파일들을 지워줍니다. (필수로 지워야 하는 것은 아닙니다.) // 삭제 후 목록 src ├── App.tsx ├── index.tsx ├── react-app-env.d.ts ├── reportWebVitals.ts └── setupTests.ts storybook 적용 콘솔 창에 아래 명령어를 쳐줍니다. npx -p @storybook/cli sb init --type react..
