웹 기반 문서 편집기 제작 프로젝트
BE 단위 테스트
단위 테스트 구현 예시
백엔드의 단위 테스트
• 독립적으로 테스트할 수 있는 함수/메서드들은 모두 테스트한다
• 몇 개의 모듈이 조합하여 결과를 만들어야 하는 경우가 많다
• 발생할 수 있는 요청 각각에 대한 테스트 케이스들을 마련하는 것이 합리적이다
• 대부분의 요청에 대해서는 데이터베이스 및 쿠키 등 상태를 가지는 객체가 결부되어 있다
• Mock 을 이용하여 테스트 대상을 분리하는 것이 필요하다
라이브러리 설치
dependencies
- cookie-parser
- jsonwebtoken
devDependencies
- jest
- ts-jest
- supertest
- @types/cookie-parser
- @types/jest
- @types/jsonwebtoken
- @types/supertest
테스트 절차의 재사용성 확보
Makefile 을 이용해서 테스트 단계의 재현성을 높임
• Dependency 활용 가능하다
• 이후 CI/CD 파이프라인 스크립트 구성에 활용한다
• build, package, deploy 등의 타겟을 추가하면서 변경을 한 곳에서 관리한다
FE 단위 테스트
사용자 인터페이스의 테스트
만족해야 하는 조건들
• HTML 요소들의 생성 (렌더링)
• "회원가입" 버튼의 클릭 🡪 onSubmit callback 의 호출
• input 요소들에 의한 올바른 인자의 전달
• "로그인" 링크의 클릭 🡪 /login 으로 이동
• "회원가입" 버튼의 클릭 (단, "비밀번호" 와 "비밀번호 확인" input에 입력된 내용의 불일치)
• onSubmit callback 호출 발생하지 않음
• alert 로 경고 메시지 발생
UI 테스트를 위한 Mocking
렌더링
• HTML 요소들을 DOM 형태로 출력 (response body 에 싣지 않고 테스트를 위한 DOM 구조 생성)
• src/utils/test/renderWithRouter.ts 파일에 renderWithRouter() 함수로 작성
브라우저 이벤트
• (예) window.alert() 등이 이용되면, 테스트 목적으로 이를 mocking 할 수 있는 기능이 필요
• src/setupTests.ts 파일에 DOM object 의 속성으로 선언
BE 의 컨테이너화
컨테이너의 구성 및 테스트
- 베이스 이미지 결정
- Dockerfile 을 이용하여 컨테이너 구성 설정, 컨테이너가 실행할 환경에 대하여 설정이 필요
- 테스트
1. Docker compose 를 이용하여 데이터베이스와 백엔드를 동일 네트워크 안에 실행
2. Postman 을 이용하여 독립 테스트
Dockerfile 의 구성
- 베이스 이미지 지정 ‒ node:18
- BE 응용을 설치하고 실행할 위치 선정 ‒ /var/app
- 컨테이너 빌드
1. ${PROJECT_ROOT}/backend/package*.json 을 이용하여 프로덕션 의존성 설치
2. RUN npm ci --omit=dev
3. Typescript 소스 빌드 결과를 복사 - 기본 환경변수 설정 🡨 컨테이너가 응용을 실행할 환경에 맞추는 것이 좋겠음
1. BE 가 요청 수신할 포트 (PORT)
2. Database: host, port, database, user, password
3. CORS_ALLOWED_ORIGIN
데이터베이스 초기화
- 테스트용 데이터베이스 (내용) 구성
1. 앞서 “데이터베이스 설계” 강의에서 소개한 초기화 파일들을 적용
2. DB_HOST 가 localhost 이기 때문에 mysql CLI 에서 "--protocol tcp" 옵션 필요 - 절차
1. docker compose up ‒d
2. mysql 클라이언트 이용하여 (계정: root, port: 3032) 초기 데이터베이스 셋업
3. mysql 클라이언트 이용하여 (계정: prgms, port: 3032) 데이터베이스 상태 확인
4. docker compose down
테스트를 위한 BE 실행
• docker compose up ‒d
• Healthcheck 완료하기를 대기
• Postman 을 이용한 테스트
• docker compose down
FE 의 컨테이너화
환경변수의 적용
- "REACTAPP" 으로 시작하는 셸 환경변수를 window._ENV 객체에 저장
- /var/app/build/env.js 파일로 생성
- Docker entrypoint 에서 셸 스크립트의 형태로 실행
테스트 절차
- docker compose up ‒d
- 테스트
- docker compose down
로컬 클러스터에 시험 배포
Frontend
- Backend URL
- http://localhost:30031
Backend
- Database host/port
- notes-db.db:3306
- Frontend URL
- http://localhost:30030
환경 구성 및 배포 방식 요약
| Production | Local Test | |
|---|---|---|
| DB 접근 방식 | DNS 이용 | k8s service discovery 이용 |
| JWT 쿠키 설정 | SSL 가정 sameSite: "lax" secure: false | SSL 없음 sameSite: "none" secure: true |
| 배포에 적용하는 방법 | Terraform IaC | kubectl + manifest |
BE 실행 환경 적용
- k8s 의 ConfigMap 을 이용
- namespace: prgms-notes (이하 모든 객체에 적용)
FE 의 실행 환경 설정
- REACT_APP_API_BASE_URL 을 지정
- 컨테이너의 환경변수로 전달
- 컨테이너가 실행할 때, docker-entrypoint.sh 의 실행에 의하여 /var/app/build/env.js 파일 생성
- React 응용이 실행할 때 window.ENV 객체에 REACT_APP 으로 시작하는 환경 변수를 저장
- ${PROJECT}/frontend/src/settings.ts 에 지정한 바에 따라 환경변수를 적용
