프론트엔드 모킹 환경에 감칠맛 더하기

Video preview

01. 우리에게 API 모킹 환경이 필요한 이유.

이상적인 개발 일정

: 기획/스펙 검토 → API 서버 개발 → FE 개발 → QA

API 모킹 없이 실제 API를 통해 개발하는게 가장 이상적이다. 그러나 언제나 이상적이지 않다.

: 기획/스펙 검토 → API 서버 개발 / 프론트엔드 개발 / 개발 & 테스트 → QA

API 모킹이 없으면 API가 필요한 부분 화면 개발에 어려움을 겪게 된다.

API 모킹이 있다면 전체 플로우를 개발이 가능해진다. 개발이 지연되는 블로킹 간극을 최소화 시키는 것이 가장 크다.

프론트엔드에서의 API 모킹 환경

서버 의존성 감소 → 개발 지속성 보장

API 스펙 사전 검증 → 문제점 조기 발견 가능

독립적인 테스트 → 다양한 상황의 테스트 범위 확보

팀에서 경험한 모킹 환경의 필요성

코어 {웹 프론트 개발} 팀 - “기능 조직”

여러 도메인의 최종 종착지.

테스트 환경에서의 API 모킹

높은 테스트 커버리지 요구

다양한 테스트 기법 도입

API 호출 케이스 증가

⇒ 팀 표준 개발 환경 구성

02. API 모킹 환경 되돌아보기

개선 전 API 모킹 환경

Axios Mock Adapter

Axios에 종속된 의존성

Axios를 사용하지 않는 외부 라이브러리 모킹 불가능

네트워크 요청 발생되지 않아 브라우저에서 추적이 불가능함

개선한 API 모킹 환경

Mock Service Worker(MSW)

직관적이고 단순한 인터페이스


export const handlere = [
	rest.get('/example1', (req,res, ctx) => {
		return res(ctx.json({message: "예시 API 응답"}));
	}),
	rest.get('/example2', (req,res, ctx) => {
		return res(ctx.delay(5000), ctx.json({message: "예시 API 응답"}));
	}),
]

export const worker = setupWorker(...handlers);

프레임워크와 라이브러리 의존성 없음

A/B 테스트, 기능 플래그, 로그 전송과 같은 사내 라이브러리도 API 모킹 가능

브라우저 네트워크 스택 통과

MSW가 모든 것을 해결해주진 않았습니다.

Browser - ? - MSW

우리에게 모킹이 필요한 이유?

외부 상태 의존 없는 독립적인 테스트 환경 구축

API 스펙 협의만으로 시작 가능한 모킹 API를 통한 병렬 개발

MSW에서의 API 모킹 제어

모킹 동작을 변경하기 위해서는 필연적으로 코드 레벨 제어가 필요


const exampleHandlers = [
	rest.get('/example/shop/:id', (_req, res, ctx) => {
		return res(
			ctx.json({
				id: 1115,
				status: 'CLOSED',
				name: '후라이드취약점없이잘하는집'
			}),
		)
	}
]

갈수록 늘어나는 Mock Data 관리 부담감 증가

⇒ 모킹 제어 영역의 코드 변경이 많은 일을 생산하게 됨.

03. API 모킹 환경에 감칠맛 더하기.

MSG라는 사내 라이브러리를 만들어서 브라우저와 MSW 사이에서 모킹을 제어하고자 함.

MSG가 무엇을 해결하나요?

: API 단위로 Mock Data를 1:n 맵핑할 수 있는, 프리셋 기능

notion image

손쉽게 제어가 가능하다.

코드 변경 없이 모킹 환경 제어

Mock Data 관리 부담 완화