오늘도 어김없이 Zenn을 눈팅하다가 도움이 됐던 글을 번역해봤습니다.
어떤 프론트엔드의 고민
프로젝트 종료 날짜는 정해져 바로 착수하지 않으면 안된다.
하.지.만. API가 아직 나오지 않았다...
얼른 하고 싶은데 후우....
프론트엔드가 백엔드의 업무를 기다리지 않고, 애자일하게 개발할 수 있도록 도와주는 툴인 msw.js 를 소개하겠습니다.
msw ?
msw는 mock service worker의 줄임말로, 간단하게 목업 API를 만들 수 있는 라이브러리입니다.
비슷한 라이브러리로는 JSON Server도 있지만 msw에는 아래와 같은 장점이 있습니다.
- 단순히 JSON을 전달하는 게 아닌, 로직도 작성할 수가 있다.
- Express처럼 Mock API를 깔끔하게 작성할 수 있습니다.
- REST API뿐만 아니라 GraphQL도 가능합니다.
아래같은 케이스에 적용하면 된다고 생각합니다.
- 빠르게 진행해야하지만, API가 나오지 않은 경우
- 데이터 형태는 갖추어져 있어서, 데모를 만들어 사양을 굳히고 싶은 경우
- 테스트에 사용할 목업 데이터가 필요한 경우
msw 사용법
우선 msw 패지키를 추가하고 셋팅합니다.
$ yarn add -D msw
$ npx msw init public/ --save다음으로는 베이스가 되는 파일을 작성합니다.
// worker.ts
const handlers = [
rest.get('/api', (req, res, ctx) => res(
ctx.status(200),
ctx.json({message: "hello, world!"})
))
]；
export const worker = setupWorker(...handlers);// index.ts
import { worker } from '../mock/worker';
if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_USE_MOCK_SERVER === 'true') {
void worker.start();
}기본적인 사용법은 이게 전부입니다.
/api GET 요청을 하게 되면 {message: "hello, world!"} 결과가 뜨는 것을 확인할 수 있습니다.
이것뿐이라면 JSON 파일을 만들어도 괜찮잖아!라고 할 수도 있기 때문에, 로직을 조금 넣도록 해보겠습니다.
예 : 유저 정보 단체 취득
예로서, 단체 유저 정보를 취득하는 Mock API를 구현하겠습니다.
//mockData.users.ts
export const mockUsers = [
{
id: 1,
name: '日本 太郎',
},
{
id: 2,
name: 'Pablo Diego José Francisco de Paula Juan Nepomuceno María de los Remedios Cipriano de la Santísima Trinidad Ruiz y Picasso',
},
];//mockApi/getUser.ts
import {
ResponseResolver,
RestContext,
RestRequest,
MockedResponse,
DefaultRequestBody,
} from 'msw';
import { mockUsers } from './mockData/users';
export const getUser: ResponseResolver<
RestRequest<DefaultRequestBody, { userId: string }>,
RestContext,
> = (req, res, ctx) => {
const user = mockUsers.find((mockUser) => mockUser.id === parseInt(req.params.userId, 10));
return res(
ctx.json({
user,
}),
);
};//worker.ts
import { getUser } from './mockApi/getUser';
export const handlers = [rest.get('/:userId', getUser)];손쉽게 구현해봤습니다.
axios를 사용한다면,
const fetchUserWithAxios = async () => {
const res: AxiosResponse<{id: number, name: string}> = await axios.get(`https://localhost:3000/${userId}`)
return res.data;
};이런 식으로 데이터를 부르면 OK데쓰.
실제 API를 부르고 있는거 처럼 구현가능하기 때문에, API가 마무리되면 엔드포인트를 변경하는걸로 작업이 끝나게 됩니다.
아래처럼 환경변수를 설정하고, 모킹과 실제 API를 간단히 분기처리해놓으면 좋을지도 모릅니다.
// .env
REACT_APP_USE_MOCK_SERVER = 'false'
REACT_APP_MOCK_API_ENDPOINT= 'https://localhost:3000'
REACT_APP_API_ENDPOINT = 'http://actual-api-endpoint'export const endpoint =
process.env.REACT_APP_USE_MOCK_SERVER === 'true'
? process.env.REACT_APP_MOCK_API_ENDPOINT
: process.env.REACT_APP_API_ENDPOINT;마무리하면서
어땠나요?
msw 는 목업 API를 만들 수 있고, 애자일한 개발에는 적합한 라이브러리입니다.
이번에는 생략했지만, Storybook 과 조합하여 사용하는것도 편리합니다.
디자인 완성까지 기다릴 필요 없어지고, 프론트엔드가 업무의 의존 관계에서 벗어날 수 있을지도 모릅니다.
마지막까지 따라와주셔서 감사합니다!
ref : https://zenn.dev/t_keshi/articles/ok-ihave-mockapi
원제목은 まだAPIが出来ていない？私は一向にかまわんッッ 인데요. 이건 바키라는 만화에 나오는 대사입니다!
저도 검색하면서 알게 됐어요. 일본에서는 꽤 밈으로 자주 쓰이나 봅니다~
msw에 대해 더 궁금증이 생겨서 검색해보니까 카카오 테크 블로그에 더 자세하게 작성한 글이 있더라구요! 한번 봐보시는 것을 추천드립니다.
댓글