[GitHub 100일 챌린지] Day 95 - 테스트 작성

100일 챌린지 Day 95 - 최종 프로젝트의 핵심 기능이 계속 동작하도록 테스트와 수동 검증 절차를 작성합니다.

배울 내용

1. 테스트할 기능을 우선순위로 나누기
2. 자동 테스트와 수동 체크리스트를 함께 작성하기
3. GitHub Actions에서 테스트를 실행할 준비하기

---

1. 무엇을 테스트할까?

테스트는 모든 코드를 완벽하게 덮는 일이 아닙니다. 먼저 깨지면 사용자가 바로 불편해지는 핵심 흐름부터 잡습니다.

Day 93-94에서 프로젝트 목록과 필터를 만들었다면 우선순위는 아래처럼 정할 수 있습니다.

우선순위	테스트 대상	이유
P0	프로젝트 목록이 표시된다	페이지의 핵심 기능
P0	필터 선택 시 목록이 바뀐다	사용자 상호작용
P1	빈 결과 메시지가 나온다	예외 상태
P1	링크가 올바른 URL로 연결된다	포트폴리오 신뢰도
P2	카드 스타일이 모바일에서 깨지지 않는다	시각적 품질

---

2. 테스트 케이스 작성하기

먼저 자연어로 테스트 케이스를 씁니다.

## 프로젝트 목록 테스트

- Given 프로젝트 데이터가 3개 이상 있을 때
- When 포트폴리오 페이지를 열면
- Then 프로젝트 카드가 3개 이상 보여야 한다

## 필터 테스트

- Given React와 Python 프로젝트가 있을 때
- When React 필터를 클릭하면
- Then React 프로젝트만 보여야 한다

코드보다 먼저 문장으로 적으면 무엇을 검증해야 하는지 명확해집니다.

---

3. 자동 테스트 예시

프레임워크마다 문법은 다르지만, 테스트의 생각법은 같습니다. 아래는 JavaScript 테스트 예시입니다.

import { filterProjects } from './projectFilter';

const projects = [
  { title: 'Blog', stack: ['React', 'Next.js'] },
  { title: 'API', stack: ['Python', 'FastAPI'] },
  { title: 'Dashboard', stack: ['React', 'Metabase'] }
];

test('선택한 기술 스택의 프로젝트만 반환한다', () => {
  const result = filterProjects(projects, 'React');

  expect(result).toHaveLength(2);
  expect(result.every(project => project.stack.includes('React'))).toBe(true);
});

test('필터가 없으면 전체 프로젝트를 반환한다', () => {
  const result = filterProjects(projects, null);

  expect(result).toHaveLength(3);
});

UI 전체를 테스트하기 어렵다면 먼저 순수 함수부터 테스트하세요. 데이터 필터링, 정렬, 유효성 검사는 자동 테스트로 잡기 좋습니다.

---

4. 수동 검증 체크리스트

자동 테스트가 있어도 최종 프로젝트에서는 사람이 직접 보는 검증이 필요합니다.

## 수동 검증

- [ ] 데스크톱에서 프로젝트 카드가 3개 이상 보인다
- [ ] 모바일 폭에서 카드가 한 줄로 자연스럽게 쌓인다
- [ ] 각 GitHub 링크가 새 탭으로 열린다
- [ ] 필터를 여러 번 바꿔도 목록이 정상 갱신된다
- [ ] 빈 결과 상태 문구가 어색하지 않다

이 체크리스트를 PR 본문에 넣으면 리뷰어가 같은 기준으로 확인할 수 있습니다.

---

5. GitHub Actions 준비하기

테스트 명령이 있다면 GitHub Actions에서 자동으로 실행되게 만듭니다.

name: Test

on:
  pull_request:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm test

프로젝트가 Node.js가 아니라면 언어에 맞는 setup action을 사용하면 됩니다. 핵심은 PR마다 같은 명령을 반복 실행하게 만드는 것입니다.

---

정리

완료 체크:

• 핵심 기능의 테스트 우선순위를 정했다
• 자연어 테스트 케이스를 작성했다
• 최소 1개 이상의 자동 테스트를 추가했다
• PR 본문에 수동 검증 체크리스트를 넣었다
• GitHub Actions 테스트 실행 흐름을 준비했다

핵심 요약:

테스트는 핵심 사용자 흐름부터 시작하고, 자동 테스트와 수동 체크리스트를 함께 운영한다.

다음: Day 96 - 리뷰와 리팩토링 →

---

← Day 94 | 전체 커리큘럼 | Day 96 →