GitHub Actions를 이용해 프로젝트의 CI 파이프라인을 구축한 과정을 정리해보고자 합니다. develop 및 feature/* 브랜치에서 코드 변경이 발생할 때마다 자동으로 테스트, 빌드, 코드 스타일 검사를 수행하도록 설정했습니다.

1. CI 파일 생성
   • .github/workflows/ci.yml 파일을 생성하여 CI 파이프라인의 동작을 정의했습니다.
   • pull_request와 push 이벤트를 대상으로 하여, 코드 변경 시 자동으로 검사가 이루어지도록 설정했습니다.
2. Frontend와 Backend 분리
   • frontend와 backend를 각각 별도 단계로 구성했습니다.
   • 각 단계는 다음과 같은 작업을 포함하도록 설계했습니다:
     • 코드 체크아웃
     • Node.js 버전 설정 및 종속성 설치
     • ESLint를 통한 코드 스타일 검사
     • Prettier를 통한 포맷 체크
     • 최종 빌드

name: CI

on:
  pull_request:
    branches:
      - develop
      - feature/*
  push:
    branches:
      - develop
      - feature/*

jobs:
  frontend:
    name: Frontend CI
    runs-on: ubuntu-latest
    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v3

      - name: Node.js 설정
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'yarn'

      - name: 의존성 설치
        run: yarn install
        working-directory: packages/frontend

      - name: Lint 검사
        run: yarn lint
        working-directory: packages/frontend

      - name: Prettier 체크
        run: yarn format
        working-directory: packages/frontend

      - name: 빌드
        run: yarn build
        working-directory: packages/frontend

  backend:
    name: Backend CI
    runs-on: ubuntu-latest
    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v3

      - name: Node.js 설정
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'yarn'

      - name: 의존성 설치
        run: yarn install
        working-directory: packages/backend

      - name: Lint 검사
        run: yarn lint
        working-directory: packages/backend

      - name: Prettier 체크
        run: yarn format
        working-directory: packages/backend

      - name: 빌드
        run: yarn build
        working-directory: packages/backend

이 초기 구성으로, 코드 변경 시 자동으로 검사와 빌드가 실행되는 기반이 마련되었습니다. 하지만 이후 ESLint, Prettier, Vite와 Rollup 관련 설정 문제로 여러 차례 에러가 발생했습니다.

no-unused-vars 관련 린트 설정

• CI 실행 시 사용되지 않는 변수에 대해 @typescript-eslint/no-unused-vars 오류가 발생
• 그러나 일부 상황에서는 특정 변수의 미사용이 의도적이므로, 이를 경고로 처리하거나 무시하고 싶었습니다.

    '@typescript-eslint/no-unused-vars': 'off',

• ESLint 설정이 정상적으로 적용되었고, CI 파이프라인에서 린트 단계가 성공적으로 실행되었습니다.
• 프로젝트에서 사용하지 않는 변수를 허용하거나 경고로 처리할 수 있도록 설정을 유연하게 조정했습니다.

Prettier 관련 설정