[주간회고] 2026.01.20

작업한 것

• TDD 연습
  • Money 문제 스텁 구현 반복하기
• in-c
  • 백엔드 스택 다시 변경(Spring → FastAPI)
    • 바이브코딩 데이터가 압도적으로 차이가 남
    • 자바의 구조화된 방식이 파악하긴 좋을 수 있으나, 코드 작성에는 오히려 어려울 수 있음
  • Playwright 연습

배운 것

• Playwright
  • 프론트 / 백 / 풀스택 프로젝트에 설치(like Storybook) 테스트를 관리하는 도구
    • 각 언어별 패키지 매니저에서 설치 가능
    • yarn은 yarn create playwright
  • 주요 기능
    • E2E
    • 유닛 테스트
    • API 테스트
    • 컴포넌트 테스트(E2E / Unit / API)
    • testgen: 이미 개발된 UI 화면을 테스트하면 사용 기록을 기반으로 테스트코드를 자동 작성 해주는 기능
  • playwright 프로젝트 구조
    • tests: 테스트 코드 보관소
    • test-results: 최근 테스트 결과 요약 + 리포트 화면 원천데이터
    • playwright-report: 사용자가 확인하기 편하게 구성된 리포트 화면
    • playwright.config.js
      • 테스트 설정 파일
      • 테스트 방식, 브라우저 설정, 공통 테스트 옵션, 결과보고 방식, CI/CD 연동 등
  • 사용 방법

    Local & CI
    테스트 실행:  yarn playwright test
    
    Local Only
    기본 테스트 생성: yarn init playwright
    테스트 리포트 열람: yarn playwright show-report
    테스트 코드 생성모드 실행: yarn playwright codegen

    • 로컬: 테스트 작성, 리포트 열람, 테스트 실행
    • CI: 깃 액션 또는 젠킨스에서 playwright.yml을 실행시켜 작성된 테스트들을 리스트업하여 실행 결과 확인

      name: Playwright Tests
      on:
        push:
          branches: [ main, master ]
        pull_request:
          branches: [ main, master ]
      jobs:
        test:
          timeout-minutes: 60
          runs-on: ubuntu-latest
          steps:
          - uses: actions/checkout@v4
          - uses: actions/setup-node@v4
            with:
              node-version: lts/*
          - name: Install dependencies
            run: npm install -g yarn && yarn
          - name: Install Playwright Browsers
            run: yarn playwright install --with-deps
          - name: Run Playwright tests
            run: yarn playwright test
          - uses: actions/upload-artifact@v4
            if: ${{ !cancelled() }}
            with:
              name: playwright-report
              path: playwright-report/
              retention-days: 30
      

이슈

자꾸 뺑뺑이 돌고 있음. 뭐라도 좋으니 슬슬 앞으로 나아가자.

다음 작업

• TDD Money문제 완전 구현해보기
• Playwright 활용하여 로그인 기능 구현하여 튜토리얼 해보기

마무리

다시 탐험할 용기와 여유를 확보하자