항해 플러스 프론트엔드 코스란?
1~4년 차 주니어 프론트엔드 개발자들이 모여 매주 토요일마다 오프라인 모임, 코드 리뷰를 진행하고
평일에 한 번씩 멘토링을 진행하면서 주니어 개발자들이 성장할 수 있는 환경을 제공해 주는 코스입니다.
프론트엔드 개발자도 CI/CD를 배워야 할까?
이번 항해 플러스 6주 차에선 github actions을 구축해 보면서 CI/CD 개념을 배웠습니다.
사실 CI/CD를 배우기 전에 저는 이러한 이유로 CI/CD를 배우고 구축하는 경험을 중요하게 여기지 않았습니다.
- 우리 회사엔 인프라팀이 존재하여 CI/CD를 미리 구축해 줘요.
- 이미 기존 프로젝트에 CI/CD를 적용되어 있어요.
하지만 코치님께서는 이렇게 말씀해 주셨습니다.
우리는 결국 시니어 개발자가 된다.
소규모 스타트업 기업에서 내가 팀장이 되어 배포 시스템을 구축하게 될 것이다.
이 말을 듣고 저는 생각이 바뀌게 되었습니다.
지금 내가 담당하지 않는다고 해서 배우지 않아도 되는 게 아니라, 아직 해당 업무에 책임이 없을 뿐
언젠가 시니어가 되면 책임이 따르게 되는 것입니다.
프론트엔드 개발자도 CI/CD를 배워야 할까? → YES
CI/CD를 어떻게 구축해야 할까?
CI/CD는 현대 소프트웨어 개발 프로세스를 효율적으로 만들기 위한 핵심 방법론입니다.
단순히 배포를 자동화시키는 것뿐만 아니라 소프트웨어 품질을 지속적으로 향상하기 위한 전략적 접근법이죠.
예를 들어 테스트 코드를 작성하여 코드의 결함을 잡아내려 했지만,
실패하는 테스트 코드까지 production 코드에 올라가면 해당 소프트웨어는 안정적이라고 볼 수 있을까요?
이렇게 안정적인 서비스를 만들기 위해서는 CI/CD를 구축해야 합니다.
멘토님께서는 CI/CD 목적에 대해 이렇게 언급하셨습니다.
CI/CD는 단순한 기술적 도구가 아니라 개발 문화의 일부입니다.
지속적인 개선, 빠른 피드백, 협업 등의 가치를 중요하게 여기는 문화가 자리 잡아야 CI/CD가 제대로 기능할 수 있죠.이는 때로 조직의 변화를 필요로 하기도 합니다.
그러니 저희는 CI/CD를 구축할 때 린트 → 빌드 → 성공 시 배포 끝 !!! 이게 아니라
자주 발생하는 버그는 어떻게 잡을 수 있을지 어떻게 빠르게 코드 리뷰 단계를 마무리할 수 있을지 고민하며
”우리의 환경과 서비스에 맞게” 구축해야 합니다.
CI/CD를 어떻게 구축해야 할까? → 반복되는 업무를 줄이도록 우리의 환경과 서비스에 맞게
Github Action을 사용하는 이유
코치님께서는 이러한 질문을 많이 받으셨다고 합니다.
- 왜 Github Action으로 과제를 진행하나요?
- 이거 현업에서 많이 사용하나요?
이러한 질문에는 하나같이 이렇게 답변해 주셨습니다.
하나를 배우면 유사한 것들은 어렵지 않아요.
위에서 CI/CD를 왜 배워야 하는지 다루었는데, 배우기 위해선 특정 스택을 정해야 합니다.
그 스택이 Github Action이고, Github Action을 다룰 줄 알면 다른 스택인 Jenkins, CircleCI, Google Cloud Build… 을 어렵지 않게 다룰 수 있기 때문입니다. 그러니 CI/CD를 왜 배워야 하는지 와닿으면 Github Action을 현업에서 많이 쓰는지 안 쓰는지는 학습할 때 중요하지 않습니다.
중요한 것은 하나를 배우면 유사한 것들은 어렵지 않기 때문이죠.
추가로 Github Action은 저장소 내에서 yml을 구성하여 script를 작성하면 되기 때문에, 과제 제출과 채점하기 편리하여 이러한 접근성 때문에 해당 기술로 과제를 진행한다고 말씀해 주셨습니다.
Github Action을 사용한 이유 → Github와의 접근성, CI/CD를 직접 다루기 위해, 하나를 배우면 유사한 것들은 어렵지 않음
과제를 하면서 배운 내용 정리
기본 과제는 Github Action으로 CI를 구축하는 것이고, 심화 과제는 AWS 인프라를 통해 CI/CD 파이프라인을 구축하는 것입니다.
이번 글에서는 기본 과제 중점으로 다루겠습니다.
Github action yml 기본 구조
on: action trigger
on: 은 action이 언제 실행될지 정의합니다.
-
PR이 생성, reopen, PR에 push 하였을 때 (
pull_request):- opened: pr이 오픈되었을 떄
- reopened: pr이 close 되었다가 다시 open 되었을 때
- synchronize: pr이 생성되고 커밋하였을 떄
on: pull_request: types: [opened, reopened, synchronize] -
Issue가 올라왔을 때 (
issues):on: issues: types: [opened, edited, deleted] -
특정 브랜치에 Push 될 때 (
push):on: push: branches: [main, develop] -
Release가 생성될 때 (
release):on: release: types: [created] -
특정 파일이 변경될 때 (
push와paths조합):on: push: paths: - '**.js' - 'docs/**' -
다른 워크플로우에 의해 호출될 때 (
workflow_call):on: workflow_call:
jobs
jobs는 특정 runner에서 실행되는 일련의 step 입니다.
jobs:
job_name:
runs-on: 실행환경
steps:
- name: Step1
run: ~~
- name: Step2
run: ~~기본적으로 병렬적으로 실행되고, needs를 사용하여 순차적으로 실행하게 할 수도 있습니다.
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Build
run: npm run build
test:
needs: build # build가 실행된 후에 test 실행
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Test
run: npm testconditional step
step에 if 조건을 걸어 특정 조건일때 step을 실행시킬 수 있습니다.
- 이전 step이 성공하였을 때
if: success()
- name: Lint
run: |
pnpm -F assignment-6 lint > eslint_report.txt
- name: Report Lint Success
if: success()- 이전 step이 실패하였을 때
if: failure()
- name: Report Lint Failure
if: failure()- 이전 step 성공 여부 상관없이 항상 실행
if: always()
- name: Report Lint
if: always()코드 리뷰 단계 자동화
위에서 CI/CD는 배포만 자동화하는 것이 아니라 개발 문화를 개선하며 프로세스를 만들어가는 과정이라고 언급하였습니다. 과제에서는 “코드리뷰 단계에서 이런 것까지도 자동화할 수 있구나..”라고 생각이 될 만큼 다양한 job을 구축하게 됩니다.
- build
- lint: lint 에러 발생 시 리포트를 생성하여 깃허브 코멘트 생성
- test: test 에러 발생 시 실패 안내 코멘트 생성, 성공 시 커버리지 측정 후 코멘트 생성
- lighthouse: lighthouse로 서비스 성능을 측정하여 코멘트 생성
- assign_reviewer: 팀원 한 명을 무작위로 reviewer로 지정
자세한 과제 내용은 아래 링크를 참고해 주시면 될 것 같습니다~
https://github.com/yoosion030/front_2nd/pull/5
마무리 & 한 줄 후기
이렇게 항해 플러스 프론트엔드 6주 차에 배운 CI/CD, Github Action 내용을 다루어 보았습니다.
나에게 도움이 될지 의문이 되었던 챕터였지만, 처음 배운 내용이 많고 실제 저희 회사 action을 분석하는 경험을 할 수 있었습니다. 아직 내가 담당하지 않는 분야여서 멀리하기보다는 여러 분야에 기여할 수 있는 그런 개발자에 한층 가까워진 것 같아서 뿌듯합니다 :)
7주 차에선 테스트 코드에 대해서 배웠는데요, 다음주에 7주 차 후기로 돌아오겠습니다.
긴글 읽어주셔서 감사합니다.
⭐️ 항해 플러스 프론트엔드 코스 3기 모집
제가 현재 참여하고 있는 항해 플러스 프론트엔드 코스가 3기를 모집하고 있다고 하여 공유드립니다!
8월 8일까지 신청하시면 얼리버드 혜택으로 약 50% 할인을 받으실 수 있습니다.
또한 추천인 제도로 [추천인] 코드에 “HHPGS0894”를 입력하시면 20만 원 추가 할인 혜택이 있으니
관심 있으신 분들은 항해 플러스 공식 홈페이지에서 신청하시면 됩니다 :)
저의 1주 차부터 6주 차까지 후기 글을 보시고 항해 플러스 프론트엔드 코스 관련해서 궁금한 사항이 있으시다면 링크드인 메시지 또는 이메일 yoosioff@gmail.com으로 편하게 연락주세요.
긴 글 읽어주셔서 감사합니다!
