04. Jest, GitHub Actions 적용하기

2024. 10. 21. 19:21·스터디/사이드 프로젝트
목차
  1. 🌿 Eslint 설정
  2. 🌿 Prettier 설정
  3. 🌿 Jest 설정
  4. 🌿 GitHub Actions 설정

지난주에 포트폴리오 작업하던 게 모두 끝났다. 그래서 기존에 하던 사이드프로젝트를 진행하려고 하니 tailwind css부터 적용해야 할 것이 너무 많아서 다시 할까 조금 고민 중인데..

일단 할 수 있는 만큼 고쳐서 진행해 보는 것으로.. :)


🌿 Eslint 설정

설치하기
npm i --save-dev eslint eslint-config-next @typescript-eslint/eslint-plugin @typescript-eslint/parser
초기화 및 설정 파일 생성(.eslintrc.json)
npx eslint --init
패키지 설치하기
npm i --save-dev eslint eslint-config-next @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

🌿 Prettier 설정

설치하기
npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

 

실행 시 코드 품질을 확인한다.

npm run lint

 

위 설정들을 적용하면 포맷 형식이 안 맞아서 오류가 많이 발생한다. 우선 일괄 변경으로 처리하였다.

npx prettier --write .

 


🌿 Jest 설정

설치하기
npm install --save-dev jest @types/jest ts-jest ts-node
패키지 설치하기
npm install --save-dev jest @types/jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom
프로젝트 루트에 jest.config.ts 추가
import type { Config } from "jest";

const config: Config = {
  preset: "ts-jest",
  testEnvironment: "node",
  testMatch: ["**/__tests__/**/*.(test|spec).ts", "**/?(*.)+(spec|test).ts"],
};

export default config;
package.json 수정
"scripts": {
  "test": "jest",
  "test:watch": "jest --watch"
}
__test__/[xxx].test.ts 파일 생성

정상적으로 테스트를 수행하는지 확인

npm test

🌿 GitHub Actions 설정

  • Repository로 이동 후 Settings
  • Pages > GitHub Actions 선택 > 하단에 Next.js 생기고 > Configure 클릭

VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID 설정

VERCEL_TOKEN
  • Vercel 대시보드 > 프로필 > Account Settings > Tokens 새로 추가
VERCEL_ORG_ID, VERCEL_PROJECT_ID

vercel 설치, 로그인, 배포를 차례대로 진행하면 .vercel/project.json 파일이 생성됩니다.

npm i -g vercel
vercel login
vercel
  • orgId = VERCEL_ORG_ID
  • projectId = VERCEL_PROJECT_ID
Repository 이동 후 Settings > Secrets and variables > Actions에 등록

Workflow 생성

  • Actions > New workflow > set up a workflow yourself → 에서 생성
  • /.github/workflows 하위에 .yml 파일을 생성

린트 확인, 빌드 테스트, Vercel 배포 이렇게 3가지를 각 파일로 생성했다.

lint.yml
name: Lint Check

on: pull_request

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

				# Install Package
      - name: Install dependencies
        run: npm install

				# Run ESLint
      - name: Run Lint
        run: npm run lint
test.yml
name: Build and Test

on: pull_request

jobs:
  build-test:
    runs-on: ubuntu-latest
    needs: lint  # Lint 작업이 성공해야 실행
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Run Tests
        run: npm test
deploy.yml
name: Vercel Deployment

on:
  push:
    branches:
      - master
  pull_request:
    types:
      - opened
      - synchronize
      - reopened

jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    env:
      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

 

push 후 배포되는 것을 확인할 수 있다.

 

 

 

 

'스터디 > 사이드 프로젝트' 카테고리의 다른 글

01. 포트폴리오 사이트 1차 완료  (2) 2024.10.18
00. 포트폴리오 사이트의 시작  (3) 2024.10.15
03. Supabase 연동  (0) 2024.10.11
02. Vercel로 배포하기  (0) 2024.10.07
01. Zustand로 상태관리 하기  (1) 2024.10.06
  1. 🌿 Eslint 설정
  2. 🌿 Prettier 설정
  3. 🌿 Jest 설정
  4. 🌿 GitHub Actions 설정
'스터디/사이드 프로젝트' 카테고리의 다른 글
  • 01. 포트폴리오 사이트 1차 완료
  • 00. 포트폴리오 사이트의 시작
  • 03. Supabase 연동
  • 02. Vercel로 배포하기
개발자 화진
개발자 화진
https://github.com/HwajinLee3114
  • 개발자 화진
    lhjin.log
    개발자 화진
  • 전체
    오늘
    어제
    • 분류 전체보기 (31)
      • 개발 (10)
        • FE (9)
        • BE (0)
      • Algorithm (0)
      • 기술면접 (4)
      • 스터디 (14)
        • 사이드 프로젝트 (7)
        • Udemy) NextJS 15 & React (3)
        • Udemy) TypeScript with Reac.. (1)
      • ETC (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 인기 글

  • 태그

    vercel
    프론트엔드
    pnpm
    ThemeProvider
    인프런
    udemy
    유데미 러닝크루
    멀티레포
    코딩앙마
    모노레포
    프론트엔드 아키텍처
    아키텍처
    multirepo
    Typescript
    supabase
    유데미
    NextJS
    Next.js
    유데미 코리아
    오블완
    티스토리챌린지
    fe
    React
    lazy loading
    사이드프로젝트
    Frontend
    유데미 스터디
    자바스크립트
    javascript
    Zustand
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
개발자 화진
04. Jest, GitHub Actions 적용하기

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.