[Next.js] Storybook 도입기 part.1

1. Storybook 설치

npx storybook@latest init

문서를 자동으로 생성할 것이냐와 컴포넌트를 테스트 할 것이냐의 용도를 물어보는데,
필자는 우선 문서화의 기능만 사용할 것이므로 첫 번째 요소만을 선택했다.

@storybook/experimental-nextjs-vite
이는 해당 패키지를 설치하여 Vite 환경으로 마이그레이션을 진행할 것이냐를 묻는데 일단 No로 선택했다.

해당 커맨드가 실행되면서 localhost:6006이 켜지고 예제 컴포넌트가 담긴 가이드 문서가 보여진다.

2. Storybook 실행

npm run storybook

http://localhost:6006 해당 주소를 통해 실제 사용될 Storybook UI가 실행된다.

마무리

FE로서 실무를 하게 되면, 무조건 컴포넌트의 효율적인 관리에 대해서 많은 생각을 하게된다.

props는 물론 조건부 스타일에 대한 깊이있는 고민을 하게 되기 때문인 것 같다.

다음은 storybook에서 state 연동으로 인터렉션 구현하는 방법과 함께 돌아올 것이다.