스토리북으로 컴포넌트 기반 개발하기

기술스택과 선정이유

본론 전에 프로젝트 사용 기술과 이유에 대해서 간략히 얘기하도록 하겠다.

프로젝트 기술 스택은 다음과 같이 정하였다.
react+vite, tailwind, typescript, vitest, react testing library, playwright, storybook

-> keepy는 모바일 웹 앱 형태로 빠른 개발주기를 가지고 애자일 방식으로 디벨롭 해나가는게 목적이다.

1. react+vite
   SEO가 필요하지 않고, 빠른 개발을 위해 복잡한 SSR보다 CSR을 사용하기로 하였다.

2. tailwind
   이것도 css보다 tailwind를 쓰는게 더 익숙해지기도 했고, css 파일이 늘어나는걸 좋아하지 않아서 tailwind로 결정했다.

3. vitest, react testing library, playwright
   단위테스트는 vitest + react testing library로, E2E 테스트는 playwrigth로 할 예정이다.
   jest도 고민했으나, 개발 환경이 vite기 때문에 vitest가 더 알맞을 것이라 생각했다.

4. storybook
   이전 글에서 이유를 설명하였다!
   CodIN 프로젝트 도입 전 작은 프로젝트에서 먼저 익히고싶었던 것도 있다ㅎㅎ

바라고 바라던 ...

이전까지 해왔던 프로젝트들은 마감일에 떠밀려서 확장성과 가독성은 처참한 코드를 작성해왔다.
취업준비를 하면서 프로젝트의 개수가 많아도 대부분 빈 껍데기라는 생각이 들었다.

그래서 이번에는 내가 생각하는 이상적인 개발을 해보려고 한다! (가능할지는 모르겠지만)

그 처음은 바로바로
TDD와 컴포넌트 기반 개발!!

TDD에 대한 내용은 다음에 얘기하기로 하고, 이번에는 컴포넌트 기반 개발에 대해서 이야기 해 보겠다.

스토리북으로 컴포넌트 기반 개발하기

1. 디자인 토큰
   

컬러는 마음에 드는 메인컬러를 고르고, 이에 어울리도록 claude에게 figma MCP를 활용하여 디자인 시스템 페이지를 생성해달라고 하였다.

폰트는 디자인 친구들이 pretendard를 자주 쓴걸 어깨너머로 봐서 그걸로 했다ㅎㅎ...
로고 폰트는 피그마 폰트중에 가장 마음에 드는걸로 선정했다!

이렇게 미리 지정을 해둔 값들을 변수화 시킬 차례!

tailwind를 사용하기 때문에 index.css 파일의 @theme에 컬러,폰트 변수들을 저장하였다.

2. 컴포넌트 개발하기
   디자인 토큰들을 설정하였으니 다음은 컴포넌트 개발을 해보았다.
   (srotybook 설치 및 사용법은 다른분들께서도 많이 적어주셨을 것 같아 내가 고민한 것 위주로 적을 예정이다.)

일단 스토리북에 등록하기 위해 스토리 파일을 생성해야했다.
그리고 tdd도 같이 하려니 컴포넌트 하나에 파일이 세 개나 있게 되었다!
-> 깔끔하게 정리하기 위해 컴포넌트 폴더를 하나 만들고 그 폴더 안에 세개의 파일을 넣어놓는 방향으로 가기로 헀다. (더 좋은 방법이 있으면 알려주세요!!!)

그래서 위 사진같은 구조가 되었당. 아직까지는 만족!!

개발 순서는 다음과 같이 했다.
테스트코드 작성 -> 이에 맞게 개발 (반복)
컴포넌트 완성되면 스토리북에 등록

3. 스토리북!

나는... 보고 탄식했다.

내가 이걸 이제야 알았다니...!!!!!!

CodIN 프로젝트 할때는 공통 컴포넌트 하나 만들면 문서화해서
이건 이런이런 props가 있고 이렇게 사용하는거에여~~ 라고 설명해줬어야 했는데

스토리북을 쓰면 그냥!!! 보면 이해가 된다...
뭐... 스토리북 파일 쓰는것도 일이긴 하지만 prop를 쉽게 바꾸고 이걸 시각적으로도 보여주니까 훨씬 이해하기 쉬운 것 같다.

이전에는 알려주지 않으면 무슨 컴포넌트 파일이 있는지, 어디에 있는지, 어떻게 쓰는지를 파악하느라 시간이 오래 걸렸는데 이런 시간을 굉장히 단축할 것 같다.

이렇게 이름을 지정해서 하위 페이지로 올리면
이런 두가지 스타일의 헤더가 있구나~ 이걸 하려면 props 설정을 이렇게 하면되는구나~ 할 것 같다!!!

스토리북 의문점

이건 그냥 작업하다가 떠오른 생각인데 현업에서도 스토리 파일을 나처럼(?) 두는지가 궁금하다.
이게 뭔가 응집도가 높아서 괜찮을 것 같긴 한데 너무 파일이 많아지면 정신없어질까봐 걱정이 된다.

현업에서 스토리 파일을 어떻게 관리/배치 하는지 얘기해주실 분 구합니다. .. 😭
더 좋은 방법이나 경험 있으신분들은 댓글로 알려주세요^0^!!