원할한 협업을 위한 노력 (2) 협업 환경 구성하기

1. 요구사항

앞서 1편에서는 새로운 개발자님이 합류하게 되어 코드를 쉽게 할 수 있도록, 폴더구조 변경, 코드 리펙토링과 같은 작업을 거쳤다. 새로 온 개발자님과 나 모두 꾸준히 사이트를 개선하고 관리할 생각이었기 때문에, 앞으로의 원활한 협업을 위해 추가 환경을 개선하기로 하였다.

Storybook을 활용하여 코드리뷰를 하자

이 프로젝트에서 기획자, 디자이너님들과 원할한 협업을 해보기 위해 Storybook을 활용하고 있었다. 여기서 더 나아가, 기존에 develop에 푸시 됐을 때, 자동 배포되던 Storybook을 Pull Request시 배포되도록 한다면 코드리뷰에도 활용할 수 있으리라 생각했다. 이에 Storybook과 github action을 통해 나의 개발내용이 develop으로 푸시될 때마다 새롭게 storybook이 배포되게 하였다.

name: "Chromatic Deployment"  
on:  
  pull\_request:  
    branches:  
      - develop  
jobs:  
  test:  
    runs-on: ubuntu-latest  
    steps:  
     # Storybook 배포  
      - uses: actions/checkout@v1  
      - run: yarn  
      - name: publish to chromatic  
        id: chromatic  
        uses: chromaui/action@v1  
        # Options required for Chromatic's GitHub Action  
        with:  
          projectToken: ${{ secrets.CHROMATIC\_PROJECT\_TOKEN }}  
          token: ${{ secrets.GITHUB\_TOKEN }}  
      # PR comment  
      - name: comment PR  
        uses: thollander/actions-comment-pull-request@v2  
        with:  
          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"  

Storybook 자동 배포 및 PR 댓글작성

Github Template으로 협업 속도를 늘리자

항상 협업을 하게되면 조금 더 편하게 할 수 없을까? 욕심이 생기는 것 같다. 이번에도 Github Issue와 PR를 활용한 협업을 진행하다 보니 ISSUE와 PR을 만들 때 템플릿이 있으면 더 좋지 않을까? 생각했다

Issue Template

Issue Template는 settings -> options -> Set up templates에서 쉽게 만들 수 있다.

템플릿 생성 버튼

양식은 마크다운을 지원하기 때문에 마크다운 양식으로 구현할 수 있는데, 나는 기능 개발 Issue를 제작할 때 간단한 설명과 해야할 일을 기록할 수 있는 마크다운을 제작했다.

PR Template

PR Template도 Issue처럼 버튼으로 만들 수 있으면 편했겠지만, 아쉽게도 약간의 차이가 있다. 어떤 방식이든 상관없지만 main 브랜치에 pull_request_template.md 파일에 양식을 만들어서 저장해 주면 된다.

마무리

새로운 개발자님을 맞이하면서 코드리팩토링과 프로젝트 구성을 다시 할 수 있었다. 특히 이 과정에서 내 코드가 미흡했던 부분이나, 프로젝트 관리가 아쉬웠던 부분을 찾아서 해결할 수 있었기에 오히려 좋은 기회가 된 것 같다. 물론 지금도 프로토타입 버전이고 꾸준히 협업을 하면서 아쉬운 부분을 찾고 개선해 나갈 것이다.