Graphy | Frontend CI

CI(Continuous Integration)

코드 품질을 유지하고, 버그를 사전에 방지하기 위해 CI 과정에서 Prettier, Eslint, React Testing Library와 Jest를 적용하였습니다.

우선 Prettier는 코드 포맷팅 도구로서, 일관된 코드 스타일을 유지하는 데 도움이 됩니다.

Prettier를 사용해서 일관된 코드 스타일을 유지

그리고 Eslint는 JavaScript 코드를 분석해 문제점을 찾고 고치는 정적 코드 분석 도구입니다.

import 순서가 잘못되었다는 것을 알려주기도 했다.

Prettier와 Eslint를 CI에 포함시킴으로써, 코드 스타일과 문법적 오류에 대한 일관성을 유지하고, 팀원 간의 코드 스타일 차이로 인한 혼란을 줄였습니다. 이는 코드 리뷰의 집중도를 높이고, 잠재적인 코드 오류를 사전에 방지하며, 전반적인 코드 품질을 향상시켰습니다.

한편, React Testing Library와 Jest를 CI에 포함시킴으로써, 테스트를 자동화하고 테스트 커버리지를 유지하며, 각 기능이 의도대로 동작하는지 지속적으로 검증할 수 있었습니다. 이는 코드 변경에 따른 사이드 이펙트를 최소화하고, 소프트웨어의 안정성을 향상시키는 데 도움이 되었습니다.

테스트에 대한 자세한 내용은 이를 참고해주세요.

Graphy, 프로젝트를 기록하다 | Front-end Test

push나 merge pull request를 할때마다 frontend 테스트가 실행된다.

코드 설명

다음은 Github actions로 자동 테스트를 진행하기 위한 WorkFlows.yml 파일 코드를 설명하겠습니다.

frontend-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

frontend-test 작업을 정의하는 코드로 Backend-test와 병렬적으로 실행됩니다. Ubuntu 환경에서 실행하도록 설정하였습니다.

uses: actions/checkout@v3 : 현재 소스 코드를 체크아웃 합니다.

     - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

actions/setup-node작업을 통해 node 16을 설치하는 코드입니다.

    - name: Install packages
        working-directory: frontend
        run: npm ci

이는 package-lock.json 또는 npm-shrinkwrap.json 파일을 사용하여 정확히 프로젝트의 종속성을 설치합니다. 이 npm ci 명령어는 패키지 버전 충돌을 방지하고 재현 가능한 설치를 위해 사용됩니다. 일반적으로 CI/CD 파이프라인이나 배포 환경에서 사용됩니다.

working-directory: frontend : package-lock.json 파일이 graphy/frontend에 위치하기 때문에 설정했습니다.

    - name: Prettier
        working-directory: frontend
        run: npm run format

이는 Prettier의 규칙에 위배된 코드가 없는지 검사합니다. package.json의 script에 “format”: “prettier — check ./src”로 등록 해둔 명령을 실행하게 했습니다.

    - name: ESLint
         working-directory: frontend
         run: npm run lint

ESLint로 문법 오류가 없는지 검사합니다. package.json의 script에 “lint”: “eslint ./src”로 등록 해둔 명령을 실행하게 했습니다.

    - name: Frontend Test
        working-directory: frontend
        run: npm test

React Testing Library로 작성한 Unit 테스트코드를 Jest 환경에서 실행합니다. package.json의 script에 “test”: “jest — config jest.config.cjs”로 등록 해둔 명령을 실행합니다.

참고로 테스트 결과 저장을 위해 미리 프로젝트에 Jest-Junit을 설치하고 Jest 설정파일에 밑에 이를 추가했습니다.

reporters: [
'default',
['jest-junit', { outputDirectory: './', outputName: 'test-results.xml' }],
]

다음은 테스트 결과를 보기위한 설정입니다.

- name: Frontend Test Results
        uses: EnricoMi/publish-unit-test-result-action@v1
        if: ${{ always() }} # test가 실패해도 report를 남기기 위해 설정
        with:
          files: frontend/test-results.xml

Github Action CI 테스트 결과

CI 캐싱

npm ci로 종속성 패키지를 설치할때 Github Actions의 workflow는 매 실행마다 새로운 환경을 구축하기 때문에, 새롭게 종속성 패키지들을 가지고 와야합니다. 따라서 전체 빌드 시간이 증가합니다.

이를 개선하기 위해 Github Actions의 actions/cache를 사용해 frontend/node_modules를 캐싱하였습니다.

- name: Cache frontend packages
        uses: actions/cache@v3
        with:
          path: frontend/node_modules
          key: ${{ runner.os }}-frontend-${{ hashFiles('frontend/package-lock.json') }}
          restore-keys: ${{ runner.os }}-frontend-

• path: 캐시의 저장과 복원에 사용되는 runner 내 파일 경로
• key: 캐시를 저장, 복원에 사용되는 키
• restore-keys: 내가 설정한 key로 cache miss가 발생할 때 사용할 수 있는 후보군 키들

마지막으로 전체 코드를 올리면서 글을 마치도록 하겠습니다. 감사합니다.

name: CI

on:
  push:
    branches: ["feature"]
  pull_request:
    branches: ["feature"]

jobs:
  backend-test:
    //백엔드 테스트 코드
  frontend-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Cache frontend packages
        uses: actions/cache@v3
        with:
          path: frontend/node_modules
          key: ${{ runner.os }}-frontend-${{ hashFiles('frontend/package-lock.json') }}
          restore-keys: ${{ runner.os }}-frontend-

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install packages
        working-directory: frontend
        run: npm ci

      - name: Prettier
        working-directory: frontend
        run: npm run format

      - name: ESLint
        working-directory: frontend
        run: npm run lint

      - name: Frontend Test
        working-directory: frontend
        run: npm test

      - name: Frontend Test Results
        uses: EnricoMi/publish-unit-test-result-action@v1
        if: ${{ always() }}
        with:
          files: frontend/test-results.xml

Reference

https://dr0joon.notion.site/CI-1-6b0df03922074cc0a6cdba5ca29af56c

https://dr0joon.notion.site/CI-2-20732c1191a042feaa673189af0e48cb

ChatGPT