1. 도입 배경
이전 팀 프로젝트에서 Spring + Docker + Redis 기반의 백엔드 환경 설치 과정에 오류가 생겨 제공 받지 못했다. API 구현 및 명세서는 아직 준비중이었고, 이상적인 개발 과정은 기획 및 MVP 모델수립 -> 백엔드 개발 -> 프론트엔드 개발이겠지만 여태까지 겪었던 현업 및 팀 프로젝트의 과정은 위 3가지의 과정을 병행해야 하는 경우가 많았다.
결국에 백엔드의 API를 제공받고 활용해야 하며 API에 대해 종속적이라면, 해당 부분이 완성되기 전까지는 프론트엔드에서 개발을 진행할 수 없고, 그 부분이 진행된 후에나 개발이 가능하다. 따라서, 마냥 기다리기에는 시간이 부족할 것으로 예상되어 MSW를 이용한 API Mocking하기로 했다.
이렇게 하면 지속적으로 기능 구현이 가능하고, 실제 API 연동 시에도 간편하게 코드를 교체할 수 있다. 또한, 주요 기능 중 회원가입을 먼저 구현하기로 했기 때문에 OAuth, 소셜 로그인 및 accessToken 등에 대해서 자유로워서 MSW를 적극 도입하기로 했다.
2. MSW의 진행 과정
MSW(Mock Service Worker)는 API Mocking 라이브러리로, 네트워크 요청을 가로채서 모의 응답(Mocked response)을 보내주는 역할을 한다. 따라서 별도의 Mock 서버를 구축하지 않아도 API를 네트워크 수준에서 Mocking 할 수 있다.
- 브라우저에서 요청을 보낸다
- Service Worker에서 요청을 받고 그 요청을 복제한다. 이후 MSW에게 전송한다.
- MSW는 요청과 일치하는 목업을 생성한다.
- MSW가 모킹한 응답을 다시 Service Worker에게 전송한다.
- Service Worker는 모킹된 응답을 브라우저에게 보내고 브라우저는 이 응답을 받는다.
3. 설치 과정
프론트엔드 개발 환경 : Vite + React + TypeScript
1. MSW 설치
npm install msw
패키지 설치가 끝나면 자동으로 public 폴더에 mockServiceWorker.js 파일이 생성된다.
2. MSW 사용
- src 폴더 안에 mocks라는 폴더를 만든다.
- handler 함수 생성
// src\mocks\handlers.ts
import { rest } from 'msw'
const mockData = ['test1', 'test2', 'test3']
const tempEmail = 'temp@gmail.com'
const emailAPI = {
sendVerificationEmail: `/auth/verification/send/${tempEmail}`,
}
export const handlers = [
rest.get('/test', (_req, res, ctx) => {
// 가짜 응답 데이터 생성 (원하는대로 수정 가능)
return res(ctx.status(200), ctx.json(mockData))
}),
rest.post('/auth/signup', (_req, res, ctx) => {
// 가짜 응답 데이터 생성 (원하는대로 수정 가능)
return res(ctx.status(201))
}),
rest.post(emailAPI.sendVerificationEmail, (_req, res, ctx) => {
const randomCode = Math.floor(Math.random() * 1000000) + 100000
randomCode.toString()
return res(
ctx.status(200),
ctx.json({
message: 'Verification email sent successfully',
email: tempEmail,
code: randomCode,
})
)
}),
]REST API 방식의 HTTP 메서드를 작성할 수 있다. 위 코드는 MSW를 사용하여 회원가입 기능 중 이메일 관련 API를 모킹하는 예시이다.
- service worker 생성
// src\mocks\browsers.ts
import { setupWorker } from 'msw'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)setupWorker() 함수는 브라우저에서 API mocking을 활성화할 수 있도록 클라이언트-작업자 간 통신을 준비한다.
- MSW 실행
마지막으로, MSW를 실행시키기 위한 코드를 추가한다. 환경 변수에 따라 MSW를 사용하기 위한 분기를 포함하여 현재 실행중인 환경이 dev 환경일때만 실행할 수 있도록 한다.
// src\main.tsx
if (process.env.NODE_ENV === "development") {
worker.start();
}브라우저 개발자 도구에서 [MSW] Mocking enabled. 라는 메세지가 보이면 MSW가 정상적으로 실행 중인 상태다.
4. 후기
MSW를 사용하면 API 요청 및 응답을 가로채고 모의 데이터로 대체할 수 있어서 테스트 및 개발이 훨씬 용이해졌다. 특히 백엔드 API가 아직 완전히 개발되지 않았을 때나 여러 상황을 시뮬레이션 하기에 적합했다. 또한, 백엔드 API의 구현 여부와 상관없이 프론트단을 독립적으로 개발할 수 있어서 좋았다.
하지만 실제 API와 모킹된 데이터 간의 차이가 발생할 수 있어서 특정 케이스를 놓치거나 예상치 못한 문제가 발생할 수 있는 점과, 환경 설정 및 초기 세팅이 쉽지 않았다는 느낌도 들었다. 이 점은 다음 협업 때 MSW를 사용한다면 개선할 수 있을 것 같다.
5. 참고자료
https://jaypedia.tistory.com/382
https://tech.kakao.com/2021/09/29/mocking-fe/
https://mswjs.io/docs/integrations/browser
https://mswjs.io/docs/api/setup-worker
