[81일차]웹 기반 문서 편집기 제작 프로젝트 - 단위 테스트

백엔드(BE) 단위 테스트

단위 테스트는 개별 함수나 메서드를 독립적으로 검증하는 과정이다. 모듈 간 의존성이 존재하는 경우 Mock(가짜 객체)을 사용하여 테스트 대상을 분리해야 한다.

테스트 재현성 확보

• Makefile을 사용하여 테스트 실행 절차를 자동화한다.
• 주의사항: Makefile은 들여쓰기에 반드시 Tab을 사용해야 하며, Space 사용 시 문법 에러가 발생하므로 편집기 설정을 확인해야 한다.

테스트 범위

1. 요구사항 명세서에 정의된 모든 API에 대한 정상 동작 검증.
2. 잘못된 URL 요청 및 권한 없는(Unauthorized) 접근에 대한 예외 처리 검증.

---

프런트엔드(FE) 단위 테스트

프런트엔드 테스트는 사용자 인터페이스(UI)와 사용자 경험(UX)을 포함하므로 백엔드와는 다른 접근 방식이 필요하다.

주요 테스트 항목

• UI 렌더링 상태
• 내부 콜백 함수 동작
• 페이지 이동(Navigation) 로직 검증

사용 라이브러리

• CRA(Create React App) 환경에 기본 포함된 도구 활용:
  • @testing-library/react
  • @testing-library/jest-dom
  • @testing-library/user-event

CI 환경 설정

• npm test 명령어 앞에 CI=true 옵션을 부여하면 Watch 모드가 비활성화되어 지속적 통합(CI) 서버에서 일회성 테스트를 수행하기에 적합하다.

---

백엔드 컨테이너화 (Docker)

도커는 애플리케이션 실행에 필요한 환경을 이미지로 빌드하여 어디서든 동일하게 실행할 수 있게 한다.

Dockerfile 구성 분석

• Base Image: node:18을 기반으로 실행 환경을 구축한다.
• 의존성 설치: npm ci --omit=dev를 통해 불필요한 개발용 라이브러리를 제외하고 프로덕션용 패키지만 설치한다.
• 환경 변수: PORT, CORS_ALLOWED_ORIGIN 등을 설정하여 보안 및 네트워크를 제어한다.
• 상태 확인(Healthcheck): curl을 통해 컨테이너의 서비스가 정상적으로 응답하는지 주기적으로 확인한다.

Docker Compose 설정

• DB 서비스: MariaDB 이미지를 사용하며, 호스트의 ./db 디렉토리를 컨테이너와 연결(Volume)하여 데이터를 보존한다.
• 네트워크: notes라는 이름의 논리적 네트워크를 생성하여 서비스 간 통신을 격리하고 보안을 강화한다.

---

프런트엔드 컨테이너화

리액트와 같은 SPA(Single Page Application)는 빌드된 결과물을 정적 서버(serve 등)를 통해 배포해야 한다.

런타임 환경 변수 주입 (docker-entrypoint.sh)

리액트는 빌드 시점에 환경 변수가 고정되는 특성이 있다. 이를 해결하기 위해 컨테이너 실행 시점에 환경 변수를 window._ENV 객체로 추출하여 env.js 파일을 생성하는 쉘 스크립트를 사용한다.

1. REACT_APP_으로 시작하는 환경 변수를 스캔한다.
2. build/env.js 파일에 해당 변수들을 작성한다.
3. serve 명령어로 정적 파일 서버를 실행한다.

Docker Compose 설정

• 백엔드 API 주소(REACT_APP_API_BASE_URL)를 환경 변수로 설정하여 프런트엔드 컨테이너가 백엔드와 통신할 수 있도록 연결한다.

---

로컬 클러스터 시험 배포 (Kubernetes)

컨테이너화된 앱을 실제 클러스터 환경에서 운영하기 위한 설정 단계이다.

ConfigMap 활용

• 서비스의 설정 정보(BE 접속 주소, 포트 등)를 이미지와 분리하여 관리한다.
• 이는 동일한 이미지를 설정만 바꿔서 개발/검증/운영 환경에 배포할 수 있게 한다.

절차

• docker-compose로 로컬에서 검증을 마친 후, 생성된 이미지를 쿠버네티스 객체(Deployment, Service, ConfigMap)로 변환하여 배포를 진행한다.