Files
2nd/00_Raw/00_Processed/Continuous Integration-Continuous Deployment (CI-CD).md
T

3.2 KiB

Continuous Integration/Continuous Deployment (CI/CD)

📌 Brief Summary

CI/CD(지속적 통합/지속적 배포)는 소프트웨어 개발에서 코드의 병합, 테스트 및 배포 과정을 자동화하는 파이프라인입니다 [1]. 프론트엔드 시스템에서 CI/CD는 코드가 메인 브랜치에 병합되기 전에 린팅, 포맷팅, 타입 검사 및 테스트를 자동으로 실행하여 코드 품질과 안정성을 보장합니다 [2, 3]. 또한 시각적 회귀 테스트 도구를 CI 파이프라인에 통합하여 의도치 않은 UI 버그가 프로덕션에 도달하는 것을 사전에 방지할 수 있습니다 [4, 5].

📖 Core Content

  • 자동화된 거버넌스 및 빌드 오류 방지 현대적인 대규모 프론트엔드 시스템에서 CI/CD 파이프라인은 자동화된 거버넌스를 실행하는 핵심적인 역할을 합니다 [1]. 개발자가 코드를 커밋하기 전에 린팅, 포맷팅 및 타입 검사를 수행하여 고품질의 코드만 저장소에 들어가도록 보장합니다 [2]. 또한 로컬 환경(예: Windows, macOS)에서는 대소문자를 구분하지 않아 정상 동작하더라도, Linux 기반의 CI/CD 파이프라인에서는 파일 이름(PascalCase)과 임포트 구문(camelCase)의 대소문자 불일치로 인해 빌드 실패가 발생할 수 있으므로 이를 사전에 엄격히 검사합니다 [6].
  • Git 워크플로우와의 통합 안정적인 협업을 위해 모든 기능 브랜치(Feature branch)의 코드는 동료의 리뷰와 CI/CD 검사를 모두 통과한 후에만 메인 브랜치로 병합되어야 합니다 [3, 7]. 소규모 팀이 성장함에 따라 기존 워크플로우에 CI 검사를 추가하여 안정성을 높일 수 있으며 [8], 트렁크 기반 개발(Trunk-based development) 워크플로우를 채택하려면 강력한 CI 환경이 필수적으로 뒷받침되어야 합니다 [9]. 작업 방식을 GitHub Flow로 마이그레이션할 때는 CI/CD 설정을 업데이트하여 메인 브랜치에서 직접 배포(Deploy)가 이루어지도록 구성해야 합니다 [10].
  • 시각적 UI 테스트(Visual Testing) 파이프라인 연동 Storybook과 같은 환경에서 개발된 UI 컴포넌트는 Happo나 Chromatic과 같은 시각적 회귀 테스트 도구를 통해 CI에 통합될 수 있습니다 [4, 5, 11]. CI 파이프라인에 해당 도구들을 추가하면, 풀 리퀘스트(Pull Request)가 생성될 때마다 자동으로 스크린샷을 캡처하고 시각적 변경 사항을 비교하는 리뷰 링크를 제공합니다 [5, 12]. 이를 통해 코드 변경으로 인한 UI 깨짐이나 접근성 위반(Accessibility violations) 문제를 병합 전에 차단할 수 있습니다 [5, 13, 14].

🔗 Knowledge Connections


Last updated: 2026-04-26