프로그래머스 데브코스 97일차 with. TS 웹 풀스택

눌지 2024. 8. 20. 14:24

📚요약

지난 시간에 이어 프로젝트를 테스트하는 방법과 컨테이너화를 진행해 보겠습니다.

📖웹 기반 문서 편집기 제작 프로젝트

📄BE 단위 테스트

독립적으로 테스트할 수 있는 함수/메서드 모두 테스트하는 것을 단위 테스트라고 합니다. 테스트를 진행하다 보면 모듈을 조합해 결과를 만들어야 하는 경우도 있습니다. 이에 대한 테스트는 Mock을 이용해 테스트 대상을 분리해야 합니다.

📑테스트 절차 재사용성 확보

Makefile을 이용해 테스트 단계의 재현성을 높여야 합니다.

🍯tip! Makefile 같이 일부 설정 파일의 경우 tab만을 허용하는 경우가 있습니다. 이때 편집기의 설정과 종류에 따라서 tab을 space로 설정하는 경우가 있습니다. 이는 에러를 발생시키는 원인이 될 수 있기 때문에 항상 확인이 필요합니다.

BE의 단위 테스트는 요구사항명세서에 있는 API 전체에 대해 필요하고, 올바르지 않은 URL, 인가되지 않는 접근에 대해서도 테스트가 필요합니다.

📄FE 단위 테스트

FE는 BE와 다르게 UI가 포함되어 있기 때문에 BE와 테스트 방식이 조금 다릅니다. UI의 렌더링을 확인하는 부분과 내부에서 동작하는 callback과 화면 이동에 관련된 테스트가 필요합니다.

📑테스트에 필요한 라이브러리

@testing-library/jest-dom
@testing-library/react
@testing-library/user-event

해당 라이브러리들은 CRA를 통해 이미 설치되어 있습니다.

🍯tip! npm test를 이용할 때 명령어 앞에 CI=true를 사용하면 색상이 적용이 안 되고, watch 모드가 적용되지 않는다.

📄BE 컨테이너화

📑Dockerfile의 구성

베이스 이미지 node:18
/var/app
package*.json을 이용한 의존성 설치. RUN npm ci --omit=dev.
기본 환경변수 설정 : PORT, Database, CORS_ALLOWED_ORIGIN

FROM node:18
WORKDIR /var/app

COPY package.json package-lock.json ./
RUN npm ci --omit=dev

COPY ./build/ ./build/

ENV PORT=3031
	CORS_ALLOWED_ORIGIN=localhost:3000

EXPOSE 3031
HEALTHCHECK CMD curl --fail http://localhost:3031/healthcheck || exit 1
ENTRYPOINT ["node","."]

△Dockerfile

📑docker compose 설정

version: "3.8"

services:
	db:
    	image: mariadb:11.2.2
        environment:
        	MARIADB_ROOT_PASSWORD: root
        ports:
        	- 3031: 3306
        networks:
        	- notes
        volumes:
        	- ./db:/var/lib/mysql
 
 networks:
 	notes:{}

△docker-compose.yaml

😥아직 도커에 대한 이해가 부족해서 바로바로 이해할 수 없다ㅠㅠ

📄FE 컨테이너화

📑Dockerfile

FROM node:18
WORKDIR /var/app

RUN npm install -g serve

COPY build/ ./build

EXPOSE 3000

COPY docker-entrypoint.sh /usr/local/bin/
RUN chmod u+x /usr/local/bin/docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoin.sh"]

△Dockerfile

#!/bin/bash
set -e

# REACT_APP_으로 시작하는 환경변수 window._ENV 객체에 저장
echo -n "" > ./build/env.js
echo "window._ENV={" >> ./build/env.js
for key in $(compgen -v | grep ^REACT_APP_); do
	echo "$key:'${!key}'," >> ./build/env.js
done
echo "}" >> ./build/env.js

# 앱 서버 시작
exec serve -s build

△docker-entrypoint.sh

📑docker compose 설정

version: "3.8"

services:
    frontend:
        image: ...
        environment:
            REACT_APP_API_BASE_URL: http://localhost:3031
        ports:
            - 3000: 3000
        networks:
            - notes
 
 networks:
 	notes:{}

△docker-compose.yaml

FE와 BE 상관없이 docker compose는 같은 절차입니다.

docker compose up -d
테스트
docker compose down

📄로컬 클러스터에 시험 배포

📑BE 실행 환경 설정

k8s의 ConfigMap을 활용해 보겠습니다.

📑FE 실행 환경 설정

❔▪❓

Q. 강의를 들으면서 이해가 되지 않는 부분이 생겼지만 현재 팀플도 하고 강의도 하고 스터디도 하려고 하니까 절대적인 시간이 부족해졌다. 어떻게 해야 할지 모르겠다.

A. 우선 지난 도커를 이용한 CI/CD 강의를 다시 들을 필요가 있다 보니까 실제 실습보다 강의를 집중해서 들으며 새로운 지식을 습득하는 것을 우선으로 해야 할 것 같다.

다음 시간에 계속...

출처 & 참고

이시윤 강사님의 강의

docker compose, official, 2024.08.20