React storybook mini session 정리

스토리북?

컴포넌트 기반 UI 개발 환경

-> 서로 다른 뎁스의 컴포넌트들을 동일한 뎁스로 flat하게 펼쳐줌

-> 그러면 상위 의존성 없이 mock data를 넣어서 테스트 가능

 

스토리북의 좋은 점: 

컴포넌트 각각을 브라우저에서 볼 수도 있음

로그인할 때도 로그인하고 로그아웃하고 할 필요없이 로그인 컴포넌트하나 띄워서 해 볼 수 있음

 

+@ : 스토리북 플러그인

knobs : UI에 바로바로 적용돼서 눈으로 확인 가능

actions

 

+@ : webpack이 내장 

=> 개발환경이 따로 구축된다.

즉, 스토리북으로 만든 애들만 따로 배포할 수 있다. 사내에서 디자이너와 기획자와 소통하기 원활 (따로 배포 안해도 된다.)

 

컴포넌트의 역할을 철저하게 나누자!

 

SDD (Storybook Driven Development) 개발 환경을 구축하자!

요구사항 -> Figma를 이용하여 UI 구성 -> 컴포넌트 구조화 -> story 작성 -> 컴포넌트를 연결하여 완성