[Next.js] 최종 팀프로젝트 - (2) Storybook

Storybook

UI 컴포넌트를 독립적으로 분리해 개별 관리하고 테스트를 도와주는 도구

1) 왜 사용해야하는지?

• 컴포넌트를 개별 정돈하는데 굉장히 편리하다고 함..
• 재사용성을 고려한 디자인, 개발이 가능
• 테스트 하기 용이

2) '개발자 vs 디자이너' 입장에서의 장점

<개발자>

• 불필요한 작업을 줄임
• 안정적으로 검증된 코드를 사용가능
• 캡슐화를 통해 테스트가 쉬워짐

<디자이너>

• 개발자와 소통이 쉬워짐
• 디자인 변경 시 쉽게 수정 가능
• 유저에게 일관된 경험 제공
• 컴포넌트를 문서화할 수도 있고 디자인 시스템에 적용해 피그마의 컴포넌트들과 동기화할 수도 있다.

---

적용하기

1. 초기 세팅

npx sb init
설치를 하고 나면 package.json 파일에서 "devDependencies"에 storybook에 대한 파일들이 생겨난 것을 볼 수 있다.

2. 실행

yarn storybook
-> 실행하면 vscode 내에서 폴더가 .storybook 폴더가 생기고 이 안에 main.ts, preview.ts 파일이 생성된다. 여기 파일들은 전역적인 설정 관련된 것들이 담겨있다.

• .storybook/main.ts → stories를 위한 config 설정들
  addon : 필요한 확장 프로그램을 찾아서 npm 설치한 이후에 여기에 추가하여 사용할 수 있다
• .storybook/preview.ts → 모든 story들에 글로벌하게 적용될 포맷 세팅

-> src/components 와 같은 위치에서 src/stories 폴더를 만든다.

• 예를들어 Button.tsx 컴포넌트를 만들면, stories 폴더 안에 Button.stories.tsx 파일을 만들어 관리할 수 있다.

3. 브라우저에서 확인

4. 스토리 만들기(컴포넌트 만들기)

<참고>
Storybook 공식문서
참고자료 1 - 스토리북 제대로 활용하기
YouTube 영상자료 1 - Storybook이 뭐죠?
YouTube 영상자료 2 - 스토리북 설치 & 실행

---

☄️ 트러블슈팅

스토리북을 설치했더니 계속 어디선가 이상한 오류?가 났다.

`"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities

오류나는 걸 검색해보니 같은 오류가 많았는지,
.eslintrc.json 의 rules 부분에 아래 react/no-unescaped-entities 부분을 추가하면 된다고 했다.