고티켓-react 컴포넌트 라이브러리 만들기(1)-storybook

아니 고티켓이 뭐냐??

고스락 티켓 프로젝트이다. 시작하기 앞서 궁금하면 들어가보도록 하라.

고스락 티켓예매 프로젝트

궁금하지 않다면 바로 시작해보자.

storybook

---

 이글을 읽으면 뭘 얻어갈수있는지. 먼저 적어보도록 하겠다.

• storybook에 대해 느낌만 알아갈 수 있다. 컴포넌트 라이브러리화는 롤업 이후에 진행을 한다.
• 언어는 javascript 이다. 타입스크립트는 아직이다.
• 필자의 협업을 위해 어떤 고민을 했는지 알아 갈 수 있다.

여기서 중요한점은 필자는 백엔드 개발자를 지망한다는거다. 감안하고 보도록 .

---

• 필자의 협업을 위해 어떤 고민을 했는지 알아 갈 수 있다.

 프로젝트 단계에서 백엔드를 가장 먼저 시작했다. 관련 api 목록과 주고받아야할 정보들 , 인증미들웨어에 기술을 해주고, 진행을 했더니 일주일만에 무리없이 끝났다. 백엔드 api 가 나와야 프론트단에서 정보를 주고받을 수있으니... 그 뒤에 프론트에서 어떻게 하면 협업을 쉽게 할수 있을까에 대한 고민을 많이했었다. 디자인시스템을 구축이라는 주제로 찾아보니 storybook에 관한 이야기가 많이 나왔었다.

 우린 거창하게 디자인 시스템을 구축하기보다는 기획단부터 컴포넌트를 여러게 쓸수있도록 하고, 티켓 예매, 확인 과정은 모바일 뷰에 맞추어 레이아웃을 제작 하다보니. 공통으로 들어갈 수 있는 컴포넌트들이 많았다. 같은 소스들을 하나의 컴포넌트로 만들어 복사해서 붙여넣기 방식으로 프론트를 제작하면 서로의 작업분배와 작업시간이 짧아질거라 판단했고, 스토리북을 도입하게 된 계기가 되었다.

 스토리북만 도입한다고 끝나는건아니고 , 해당 스토리북을 프론트 레포지토리에서 하는것이아닌 자동으로 npm 으로 패키징해서 배포까지 하는 과정을 포스팅 할 예정이니 기대하시라.

 

• storybook에 대해 느낌만 알아갈 수 있다.

 스토리북은 간단하다. ( 도큐먼트는 그리 친절하지 않다 ) 튜토리얼은 필자의 설명보다 유툽의 튜토리얼의 영상을 보는게 최고다.

짤막 짤막하게 20편 분량의 소개 영상들이다.

스토리북 튜토리얼 영상

---

 사용을하며 스토리북의 좋은점들을 정리해봤다.

독립적으로 컴포넌트를 만들 수있다

 이건 매우 좋은 점이였다. 내가 개발하는 화면에 컴포넌트가 노출이 되어야 눈으로 확인하면서 개발을 할 수 있는데, 담기는 화면에 따라 라우터 설정도 해줘야하고 , props 값에 따라 변화는 상태들에 대해 일일히 확인해 줘야하고 , 기존 웹에서 만드는 파일에다가 만드는거니깐 개발을 먼저 한뒤에 나중에 리팩토링 하는 방식으로 컴포넌트 화를 많이 진행했던것 같다.

 storybook의 강점은 npm run start를 해서 리액트앱을 띄워서 하는것이 아닌 npm run storybook을해서 스토리 북 내에서 컴포넌트 작업을 해준다는 것이다. 

좌 : 원래 컴포넌트 작성 파일 /우 : 스토리북 파일 

 스토리북을 실행시키게 되면 자동으로 .stories.jsx 가 적혀진 파일명들을 읽어 스토리북 웹에 띄워준다. 해당 컴포넌트를 바로바로 눈으로 확인 할수 있다는 것이다.

컴포넌트를 문서화 할 수 있다

 굉장히 편리한 기능은 컴포넌트를 만드는 과정이 문서화까지 자동으로 이어진다는 점이다. ( 100%는 아니지만)

ProcessDescription.propTypes = {
  /**
   * 위쪽의 텍스트를 변경할 수 있습니다.
   */
  topLabel: PropTypes.string.isRequired,

  /**
   * 아랫쪽의 텍스트를 변경할 수 있습니다. null 값으로 값을 안주셔도 됩니다.
   */
  bottomLabel: PropTypes.string
};

ProcessDescription.defaultProps = {
  topLabel: '위쪽 콘텐츠를 채워주세요',
  bottomLabel: null
};

 위의 코드 와 같이 타입스크립트 기반이 아니므로, javascript에는 리액트의 propTypes를 통해 컴포넌트에 들어갈 값들을 ( 실행 이후 이다. 타입스크립트는 실행 이전에 타입을 구별해주는거고) 판별을하여 올바른 값들이 안들어가면 콘솔에 경고창을 띄워 주게 된다.

스토리북의 설명

 위 예시처럼 원래 컴포넌트를 제작하는 파일에 propTypes를 작성하면서 주석을 잘 적게 되면 storybook docs 에 해당 props의 이름과 주석의 설명이 자동으로 적혀지게 된다. 컴포넌트를 만들면서 자동으로 문서 작업 까지 할 수 있는것이다. 또한 props의 변수 이름 이나 , 타입들을 스토리북에서 판단하여 control이라는것을 생성하는데, color라는 이름이 들어있는 변수인경우 색을 선택할 수 있는 컨트롤, string인 경우 string control 등 스토리북에서 판단하여 props를 조절할 수 있는 기능이 있다. 물론 argTypes 에서 커스텀으로 조절 할 수 있다.  아기자기한 내 컴포넌트들이 눈에 바로바로 보이니깐 정말 귀엽다.

storybook control

문서를 공유 할 수 있다

 swagger 처럼 build과정을 통해서 스토리북을 배포시킬수 있다. 즉 로컬에서 보면서 만들었던 스토리북 ui들이 남들도 볼 수 있는 문서화 되여 공유가 가능해진다는 것이다. 결과물(웹페이지) 가 나와야 디자이너가 볼 수 있고 공유 할 수 있는 환경들이 컴포너화가 된 상태에서 바로바로 하나 하나씩 볼 수 있다는 기능이 놀랍다.

 고티켓 프로젝트에서는 github action을 통해 main 브런치에 push 액션이 오게되면 github page에 배포를 하는 전략을 취하고 있는데,

원리는 간단하다.

GitHub - storybookjs/storybook-deployer: Deploy your storybook as a static site

 문서가 매우 잘되어있으니 참고 하시라. stroybook-deployer 을 인스톨한뒤에 package.json 파일에 가보면 deploy-storybook   명령어가 생긴것을 볼 수 있는데 github action에 아래 액션을 추가하고.

name: Build & Deploy Storybook
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install and Build 🔧
        # This needs an Acces Token stored as "GH_TOKEN" 👇
        run: |
          npm install
          npm run deploy-storybook -- --ci
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

 간단히 레포지토리에 GH_TOKEN 시크릿을 삽입하면 main 브런치에 푸시 이벤트가 있을때마다 빌드를해 gh-page에 바로바로 공유가 가능하다.

 

---

 굉장히 만족하면서 쓰고있다. Antd를 사용해봤던 경험을 바탕으로 nested 된 children을 받아 레이아웃을 만들고 , 남을 위한 소스코드를 만든 다는 관점에서 고민을 많이했었고, 한층 더 신경써서 리액트 컴포넌트를 만들 수 있는 기회였다. 아래 고티켓 스토리북 링크를 첨부한다. 심심하면 눌러보시라

Webpack App