프론트엔드 개발 과정의 현실
대부분의 개발 과정은 백엔드와 프론트엔드 동시에 이루어질 것이다. 이때 프론트엔드가 백엔드의 API를 사용해야 하는 것처럼 백엔드 개발에 종속적인 부분이 있다면, 해당 부분이 개발되기 전까지는 프론트엔드의 개발 진행이 더디게 된다. 😥
API Mocking하기 (feat. MSW)
- MSW는 API Mocking 라이브러리이다.
- 네트워크 요청을 가로채서 모의 응답(
Mocked response)을 보내준다. - Mock 서버를 구축하지 않아도 실제 API를 사용하는 것처럼 네트워크 수준에서 Mocking할 수 있다. 🙌
MSW 사용하기
설치
$ npm install msw --save-dev
# or
$ yarn add msw --dev설정
// cmd창에서 다음 명령어 입력
$ npx msw init <PUBLIC_DIR> --save// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);
// src/index.js
if (process.env.NODE_ENV === 'development') {
const { worker } = require('./mocks/browser')
worker.start()
}REST API mocking하기
Mocking할 API를 핸들링한 핸들러를 만들면 된다.
// src/mocks/handlers.js
// Example
const handlers = [
rest.get('/api/products', (req, res, ctx) => {
const errorCode = req.url.searchParams.get('error-code');
if (errorCode){
return res(
ctx.status(errorCode)
);
}
return res (
ctx.status(200), // 응답 상태
ctx.delay(4000), // 응답 시간
ctx.json({ // json data
"items" : [
{ "name" : "product-1" },
{ "name" : "product-2" },
]
})
);
}
];
export default handlers;동작 확인 : 핸들러가 어떻게 동작하는지는 콘솔을 통해 확인할 수 있다!
🐽 모아모아 프로젝트에 MSW 적용하면서 느낀점 🐽
모아모아 프로젝트 준비 단계에서 백엔드와 동시에 효율적으로 개발할 수 있는 방법에 대해 고민했다. 백엔드의 API를 사용해야 하는데 아직 개발되지 않은 상황이라면 프론트엔드의 개발 진행은 더디게 된다. 그렇다고 아무것도 안하기에는 비효율적인 것 같아 앞선 상황에서 어떻게 대처해야 할지 방법을 탐색했다. 먼저, Mock 서버를 활용하는 방법이 있는데, Mock 서버를 만들기에는 그에 대한 지식과 시간이 부족했다. 그래서 다른 방법을 찾다가 아래 글을 찾게 되었다. 아래 글과MSW공식문서를 읽어보니 딱 프론트엔드 팀이 원했던 API Mocking 방법이었다. 낮은 진입장벽으로 빠른 적용이 가능하고, 간단한 설정으로 네트워크 수준에서 실제 API를 사용하는 것처럼 Mocking이 가능하다. 👍
근데 걱정했던 것과 달리 백엔드 분들이 프론트엔드 개발 진행 속도에 맞게 API 개발을 해주어서 MSW를 많이 활용하지 않았다. 하지만 이번 기회에 MSW를 활용하여 쉽게 API Mocking하는 방법에 대해 배워서 좋고, 다른 프로젝트에서도 적용할 수 있는 좋은 기술을 알게 되었다. 😁
👉 참고 : Mocking으로 생산성까지 챙기는 FE 개발
