당신2 9하던 Storybook

이 글은 프론트엔드 팀에서 UI 컴포넌트 개발 및 관리를 위해 Storybook을 도입하고 활용하는 경험을 공유합니다. Storybook은 비즈니스 로직과 분리된 UI 컴포넌트를 독립적으로 개발하고 시각적으로 테스트할 수 있게 해주는 도구입니다.

29CM 프론트엔드 팀은 Angular에서 React로 전환하는 과정에서 발생한 중복 컴포넌트 생성, 컴포넌트 동작 확인 시간 소요, UI 테스트의 비효율성 등의 문제를 해결하기 위해 Storybook을 도입했습니다. 컴포넌트와 스토리를 1:1로 매칭하고, 작은 컴포넌트부터 페이지까지 스토리로 관리하며, VSCode의 코드 조각 기능을 활용하여 스토리 작성을 간소화하는 등 구체적인 활용 방안을 소개합니다.

이를 통해 개발 속도를 높이고 컴포넌트의 효율성과 재사용성을 증대시키는 것을 목표로 합니다.