https://s3-us-west-2.amazonaws.com/secure.notion-static.com/749c9f9a-83e4-49bb-bfbc-a173fedcea36/_2020-12-13__9.55.23.png

스토리북?

컴포넌트 기반의 UI 개발 도구 및 유닛 테스트를 위한 오픈 소스

처음에는 react 프레임워크용으로 만들어 졌지만, 현재 Vue, Angular, Html, Svelt, 다양하게 지원

개발 복잡도를 증가함에 따라 복잡도를 낮춰주고, 개발환경을 관리해줄 부트스트랩, styled-components는 코드를 도와주는 것이라면 눈에 보이는걸 도와주는 것

아틀라시안, 슬랙, 마이크로소프트, 에어비엔비, 국내 IT기업 등등 많은 곳에서 사용

테스팅의 문제점!

리액트 → 컴포넌트의 상태를 바꿔줄때 서로의 데이터 바인딩 허용 안되서 스테이트 로직을 담당하는 부모 컴포넌트를 활용하여 하위 컴포넌트로 내려주는 형태

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1a6a0677-f5f5-41c4-9c94-bef9d46abbf1/_2020-12-13__10.35.34.png

규모가 커지고 핸들링한 스테이트가 커지면 상태관리 힘듬 → 리덕스/MobX 활용

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5fb33b2a-c8a8-4d69-8c37-a556a4509ef8/_2020-12-13__10.36.34.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/71114a4d-94b6-46bc-a972-ae1e1707e155/_2020-12-13__10.36.50.png

로직이나 스테이트에 의존적인 view 나 UI

로그인, 로그아웃, 어떤 조건 렌더딩 등등..

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dca13e60-cf5d-4830-9d13-decdada4c8d1/_2020-12-13__10.38.07.png

로딩중, 데이터없음, 데이터길이 0, 등등..

실제 보이는데 엄청 오래걸림 → 테스트 시간,

스토리북 ⇒

선형적