[토스] CLI 기반 리액트 세팅 툴킷 배포

2025.05.22

마감일이 정말 코앞으로 다가왔다,, (이틀남음) 정말 마지막으로 추가기능과 배포를 진행하려고 계획을 짰었고,

먼저 Cypress를 사용한 E2E 테스트를 추가하면 어떨까..? 싶었는데 아무래도 오버 엔지니어링이 아닌가 싶어 취소하고 CI/CD 파이프라인 구축을 시작했다.

 

주요 목표는 Github Actions로 테스트 및 빌드 자동화 + 린트, 포맷팅, 타입 체크 자동화 및 npm 배포 자동화를 잡았다.

먼저 Github Actions 워크플로우 파일을 작성해주었다.

npm 토큰은 깃헙 시크릿 키로 관리

이후 package.json에 테스트 스크립트(jest)를 추가해주고, Jest 설정 파일을 작성했다.

jest.config.js

 

그리고 npm 접근 토큰을 받기 위해 npm 로그인 후 토큰을 생성해주었다.

Access Token 발행

발행한 토큰은 깃헙 시크릿 키로

 

그 후엔 npm 배포를 진행했다.

먼저 npm 로그인 진행

이후 package.json에 Github 저장소 url을 업데이트 해주고 아래의 단계로 업데이트 후 배포를 진행했다.

npm version minor로 업데이트 진행(태그 자동생성)

이후 npm publish --dry-run으로 본 배포 전 시뮬레이션 진행

경고가 몇개 보이긴 했지만 시뮬레이션은 돌아가는 모습

마지막으로 npm publish로 본 배포를 진행했으며 태그 1.1.0과 함께 잘 배포가 되었다. 

리드미 추가까지 끝!

 

회고를 조금 해보자면 프론트엔드에서 Github Actions와 npm을 통한 배포는 처음이였는데 새로운 경험이였고, CLI를 구성하면서 많은 고민을 했던 것 같다. 앱/웹 서비스를 제작하는 것과는 다른 느낌이구나라는 것을 몸소 느낄 수 있던 기회였다고 생각한다.