# [[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
- **Related Topics:** [[Git Workflow]], [[Trunk-Based Development]], [[Automated Governance]], [[Visual Regression Testing]]
- **Projects/Contexts:** [[Scalable Frontend Systems]], [[Storybook Component Testing]]
- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다. (소스 내에서 CI/CD의 역할이나 접근 방식에 대한 상충되는 주장은 발견되지 않았습니다.)

---
*Last updated: 2026-04-26*