Storybook 적용기

# 적용 목적:

1. 누락된 UI/기능 기획을 화면을 보며 체크 할 수 있다
   
   • [사례] Post list 화면에 post title이 한줄일때, 3줄이상일때 UI 기획인 빠져있었다(상태변화에 따른 기획 체크)
   • 기존 Lunacy 툴로 협의할 UI 작업을 했는데, Storybook을 이용하며 UI 따로 구현 따로 안해도 되지 않을까?
2. 이전 프로젝트에서 Presenter랑 container랑 분리를 못했다. 툴을 쓰기위해서 강제적으로라도 분리해보자.

 

# Storybook Document 숙지 및 Setup

1. React Native Storybook 설치
   • Auto Setup을 할까? Manual Setup을 할까 고민이다
     • 알지 못하는 개념을 지나치는게 문제이다, 나중에 나의 툴로 갖고 놀고 싶으니 힘들더라도 우선 Manual Setup을 하며 부딪혀보자("삽질은 배신을 안한다는말, 여기서는 통하네")
   • React Native 설치 메뉴얼데로 진행한후 run storybook하면 왼쪽 Panel에 스토리가 loading중이라고 띄고 보이지 않을 것이다, 다음 과정으로 App Start를 한다. 불행히도 React Native는 앱 실행과 함께 사용해야하고 스토리가 storybook 브라우저 UI에안보인다(react-native-web도 마찮가지)
     • run storybook 했는데 스토리들이 안떠서 당황했다, 버그인줄 알고, 많은 삽질끝에 react-native-storybook npm document 보고 알았다. 그래서 PR한번 날려봤다(받아 드려졌다)
     • Comparibility 보면 제약사항도 많은거 같고 device에서 보면서 하면 addon은 아예 못쓴는거 아닌가? 낼 addon action을 해봐야 겠다(결론: addon을 우선 빼더라도 Presenter/Container 분리가 가능하니 사용하면서 추가해보자, 버전이 올라가는걸 모니터링 해보자)
     • vscode에 React-Native-Storybook 플러그인을 추가해 사용하면 창을 여러개 띄우지 않아서 좋다.
   • story 파일을 ./stories/안에 몰아 넣지 않고, 우선 각 컴포넌트 폴더안에 index.tsx랑 같이 index.story.js로 같이 두려고 한다.
2. Storybook Document(Tutorial) 숙지(번역):(진행 중..., 2019.07.16 ~ )
   
   • Simple Component: Todo(할일) App을 예제로 시작한다. 
     • 기본 컴포넌트를 만들고(props, actions 정의)
     • 테스트한 state별 스토리를 추가한다.
     • 기본 컴포넌트 상태, action 타입체크 정의 구현
     • 스냅샷 테스트
   • Composite Component: TaskList 예제로 설명한다.
     • 하위 Task 컴포넌트를 두는 TaskList 컴포넌트 생성(하위에서 필요한 action 정의)
     • TaskList 컴포넌트의 상태별 Storybook 파일 생성(context는 addDecorator를 이용)
     •  
3. dd

 

# 정리

• UI 설계와 구현이 동시에 가능하다? 손쉽게 UI를 그려보고 기획자랑 공유하여 협의가 가능하다?

# 참고 자료

• https://www.youtube.com/watch?v=nWgKVEEI47Q