October 15, 2022
Storybook 이란 프로젝트 진행하면서 개발한 UI를 별도로 구성하여 관리하는 오픈소스 도구 입니다. 파워풀한 에드온 기능들도 많이 제공하고 있습니다. 또 디자인 시스템 처럼 내가 사용하는 프로젝트에서 사용하는 컴포넌트 및 페이지를 스토리북으로 관리하며, 테스트까지 넣을 수 있습니다. 개발 서버를 기동하지 않고, 바로 스토리북 서버를 실행하여 바로바로…
October 26, 2022
Storybook 설정 및 옵션 스토리북을 설치하면 .storybook 디렉토리가 생성되며, 해당 디렉토리에서 스토리북 관련 환경을 설정합니다. 확장자가 cjs로 되어있는데 CJS 확장자 =>javascript를 브라우저에서만 아니라, 다른 곳에서도 사용할 수 있게 해주는 API CJS --> ESM 사용하기 위해서 main.cjs preview.cj…
November 08, 2022
스토리북 메뉴추가 하기 스토리북에 화면 좌측 리스트에 컴포넌트를 추가 하려면 스토리구성요소 파일을 생성 해야합니다. 여러가지 구성요소로 작성방법들이 있지만 여기에서는 제일 흔하게? 자주 사용되는 CSF 방식으로 작성을 하겠습니다. 스토리북 파일 구조는 프로젝트에 맞도록 지정을 합니다. 여기서는 component 디렉토리에 stories 파일을 추가 하…
November 14, 2022
chromatic 이란? 크로메틱 공식 홈페이지(chromatic)에 많은 기능과 내용이 있습니다. 스토리북으로 컴포넌트를 관리하고 테스트를 넣었다면, 크로메틱으로 시각화 테스트 및 협업 도구로 사용하기 좋습니다. 내가 사용한 기능 디자이너, 기획자, 등등 다른 사람과 헙업시 chromatic 도메인에 초대를 해서 컴포넌트 별로 코멘트를 작성이 가능하며,…
November 28, 2022
Storybook Interaction 테스트 스토리북에서 작성한 컴포넌트 및 page를 Interaction addon을 설치하여 기능을 추가할 수 있습니다. 스토리에 대한 상호작용 테스트는 Jest기반으로 실행이 되며, UI가 어떤식으로 변화하는지 단계 별로 재생을 하면서 디버깅을 할 수 있습니다. 스토리에 대한 변경/추가 사항 및 리팩토링을 하게 …
December 20, 2022
Storybook React Router 연결하기 스토리북으로 컴포넌트을 관리 하다가 지금은 개발된 Page도 스토리북에 추가하여 interaction 테스트 기능을 넣는 작업을 진행 했습니다. 그러다보니 React-router를 이용한 페이지 이동에 넘어오는 Params 값을 사용해하는 케이스들이 발생했습니다. storybook에 React-router…