서론
코드스쿼드 과정을 하면서 서로의 코드를 확인하고 리뷰를 하는 식으로 프로젝트를 진행했다.
그런데 리뷰를 하다보면, "아~ 이건 화면에서 어떻게 돌아가는지 확인해보고 싶은데," 같은 상황이 무조건 생긴다.
이 코드는 과도한 리렌더링을 일으키지 않을까? 추측만 되고, 직접 확인하기는 어려우니, 나중엔 Git 협업 전략을 세울 때 상대방의 코드를 내 local 에 불러와서 사용하는 것이 쉽도록 같은 레포지토리의 Collaborator 로 추가하여 사용하는 방식을 사용하기도 했다.
그런데 당연히 귀찮다. 내꺼 개발하다가~ 상대방이 작업하던 브랜치를 Pull 받아와서 다시 돌려보고~
그래서 간단히 확인해볼 수 있게 Netlify 로 배포하여 PR 에 추가해주기도 하였다.
그런데 이것도 여간 귀찮은 일이 아니다. 상대방의 귀찮음을 줄여주기 위해 나의 귀찮음을 두 배로 가져가는 느낌도 있다.
PR 마다 netlify 배포를 해야하고 (배포 시간도 나름 걸림), 그 주소를 공유하고 등등..
나중엔 msw 로 API 를 mocking 하다가 build 된 폴더에 mockServiceWorker.js 를 포함해줘도 되는 지 판단이 잘 안서서 중반부터는 따로 배포하여 공유하지 않았다.
그러던 중 Babel 문서 오타 수정을 위한 PR 을 보낸적이 있는데, Netlify bot 이 내 PR 을 배포해주는 것이 아닌가?
이런 기능이 다 있구나.. 내가 앞에서 말했던 귀찮음을 해결할 수 있음과 동시에 PR 에 수정된 내용으로 배포를 진행해주니 테스트 해보기에도 너무 좋겠다는 생각이 들었고, 나중에 내 프로젝트에 적용해보고 싶다는 생각이 들었다.
그래서 어떻게?
평소에 netlify 로 deploy 하는 것은 cli 를 다운받아서 netlify deploy 명령어를 통해 했었다.
Netlify 홈페이지로 가서 레포지토리에 권한을 주고, 연동을 시켜 build 관련 옵션을 설정했다.
일단 내 프로젝트에서 webpack 이 번들링된 결과는 build 폴더로 모여지기 때문에 publish directory 를 build 로 하고,
production 환경의 테스트가 주 이기보다 개발 과정에서 간단히 리뷰하기 위한 용도로 사용하고자 하므로 dev 커맨드로 빌드하도록 하였다.
또 development 환경에서는 msw 를 사용하여 API 를 mocking 하고 있는데, mockServiceWorker.js 는 같이 번들링되는 파일이 아닌 public 폴더에 존재하는 파일이므로 msw init 명령어를 실행해줄 필요가 있었다.
msw
또한 package.json 에서 msw 의 workerDirectory 가 public 으로 되어있어 build 로 바꿀 것인지 물어보는 스크립트가 생기는데 Y 를 입력하기 위해 echo 'Y' 명령어를 같이 넣었다.
기본으로 workerDirectory 를 build 로 하지 않는 이유는 내 로컬에서 테스트 할 때에는 mockServiceWorker 가 public 에 있어야 하기 때문이다.
로컬이 아니라 어찌되었건 netlify 로 배포하는 건데, msw 를 포함시켜도 되나? 고민이 되었지만
실제 production 으로 사용하고자 하는 용도가 아니기도 하고, 사례(netlify + msw)를 찾아보았는데 아무리 뒤져도 안나오다가
kent C 형님이 쓰신 흔적을 발견하고 간단히 써보는 용도로 추가하는건 괜찮겠다 싶어 사용했다.
결국 내가 배포한 사이트를 api 주소로 사용하는 거니까 사이트 대역폭(bandwidth) 이 증가할 것 같긴 한데..
너무 많이 증가하는 것 같다 싶으면 나중에 테스트용 백엔드 서버로 별도로 분리해볼 생각이다.
process not defined -> Environment variables 설정
빌드 한 이후 테스트를 해보는 과정에서 process is not defined 오류가 발생했는데, webpack 에서 process.env 를 주입하고 있는데 왜 안될까 생각해보니 .env 파일은 github 에 올라가지 않게 해놓았다는 점을 깨달았다.
Netlify 옵션에 Environment variables 를 설정해주어 해결했다.
자, 이제 프로젝트 배포 자체는 되었는데, PR 은 어떻게 배포시키는거지? 가 궁금했다.
설마 PR 을 보내면 알아서 생성되나? 궁금해서 테스트해보았는데 맞았다. 굿굿
이제 슬기로운 리뷰생활을 시작하자 😎
