카카오웹툰, 복잡한 GitHub Actions 셸 스크립트를 JavaScript 액션으로 리팩터링

카카오웹툰 프론트엔드 팀은 서비스 확장에 따라 복잡해진 GitHub Actions의 Composite action을 JavaScript action으로 리팩터링했다. 기존 셸 스크립트는 5개의 환경(env)과 4개의 지역(region)에 따른 다중 조건문으로 인해 가독성이 떨어지고 유지보수가 어려웠다.

Map 구조를 활용한 조건문 단순화

복잡한 중첩 if-else 조건문을 Map 객체로 전환하여 코드를 단순화했다. ENV_REGION_MAP과 같은 객체 구조를 사용하면 ENV_REGION_MAP[env][region] 형태로 필요한 값을 직접 참조할 수 있어, 조건문 깊이가 깊어지는 문제를 해결하고 가독성을 높였다.

JavaScript action 구현 및 의존성 관리

@actions/core 패키지를 사용해 입력값을 받고 출력값을 설정하는 로직을 구현했다. JavaScript action 실행 시 발생하는 Cannot find module 에러를 해결하기 위해, node_modules를 저장소에 커밋하지 않고 actions/setup-node와 actions/cache를 활용해 워크플로우 실행 시 의존성을 설치하고 캐싱하도록 구성했다. 이를 통해 저장소 용량 부담을 줄이면서 실행 성능을 유지했다.

이벤트 정보 접근 및 도구 개선

@actions/github 패키지를 활용하면 워크플로우 트리거 시 리포지토리 정보, 실패 위치, 트리거 사용자 등 이벤트 컨텍스트에 접근할 수 있다. 또한, VS Code용 GitHub Actions 확장 프로그램이 공개 베타로 출시되어 브라우저 없이도 워크플로우 실행 상태를 확인할 수 있게 되었다.