실무에서의 React TDD 적용 시 고려사항 - React로 시작하는 TDD 14편

Considerations for Applying React TDD in Practice - TDD with React Part 14

• 초기 비용
  테스트 환경을 세팅하고, Mock 데이터를 만들고, 테스트 코드를 짜는 시간은 분명 비용입니다.
• 장기 효과
  하지만 프로젝트가 커질수록 효과가 나타납니다. 버그를 잡는 시간, QA 시간, 리팩토링에 대한 두려움이 획기적으로 줄어듭니다.

• 반드시 해야 할 것
  • 핵심 비즈니스 로직 (장바구니 계산, 결제 금액 등)
  • 복잡한 공통 컴포넌트 (Dropdown, Modal 등)
  • 자주 변경되거나 버그가 잦은 부분
• 넘어가도 되는 것
  • 단순한 UI 렌더링 (색상이 빨간색인지 등)
  • 상수 파일이나 단순 설정 파일
  • React
    나 서드파티 라이브러리 자체의 기능

name: Run Tests
 
on:
  push:
#    branches: [ main ] # main 브랜치에 푸시될 때만 동작하도록 변경
    branches: [ "**" ] # 모든 브랜치에 대해 동작하도록 변경
  pull_request:
    branches: [ main ]
 
jobs:
  test:
    runs-on: ubuntu-latest
 
    steps:
      # 1. 코드를 내려받습니다.
      - uses: actions/checkout@v4
 
      # 2. Node.js를 설치합니다.
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
 
      # 3. 의존성 패키지를 설치합니다.
      - name: Install dependencies
        run: npm ci
 
      # 4. 테스트를 실행합니다. (이 단계가 실패하면 Merge가 막힙니다)
      - name: Run tests
        run: npm test

"머물렀던 자리를 왔을 때보다 더 깨끗하게 치우고 떠나라."

• 오늘 내가 수정해야 할 컴포넌트가 Login.tsx라면,
  딱 그 파일에 대한 테스트만
  작성합니다.
• 버그가 발생했다면, 그 버그를 재현하는 테스트 케이스 하나를 추가하고 고칩니다.

git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout part14

• 비용과 투자
  초반에는 느리지만, 유지보수 단계에서 확실한 보상을 받습니다.
• 자동화(CI)
  GitHub Actions 등을 통해 테스트 실행을 강제하여 실수를 방지합니다.
• 점진적 적용
  레거시 코드는 한 번에 해결하려 하지 말고, 내가 건드리는 부분부터 조금씩 커버해 나갑니다.

다음 시간에는 대망의 마지막

15편. React TDD 정리

를 통해, 앞으로의 학습 방향을 제시하며 시리즈를 마무리하겠습니다.

• GitHub Actions Documentation↗
  GitHub에서 제공하는 CI/CD 도구인 Actions의 공식 문서입니다.
• Testing Legacy Code↗
  마이클 페더스의 명저 '레거시 코드 활용 전략'의 핵심 내용을 요약한 글입니다.