프로젝트를 진행하다가 프론트엔드쪽에서는 컴포넌트가 완성이 됐지만 백엔드에서는 아직 api가 나오지 않아 react msw 기반의 임의에 mock api를 사용해 먼저 api interlocking을 진행하고 있다.
📌 MSW ?
백엔드 없이도 네트워크 요청을 모방하여 테스트하고 개발할 수 있게 해주는 도구다. MSW는 서비스 워커 API를 사용하여 실제 네트워크 요청을 가로채고, 미리 정의된 응답을 반환함으로써, 개발 중이거나 테스트 환경에서 백엔드 서버 없이도 API 호출을 모방할 수 있게 해준다. 이를 통해, API 의존성 없이 프론트엔드 개발과 테스트를 진행할 수 있으며, 네트워크 상태나 오류 처리 등을 쉽게 시뮬레이션 할 수 있다.
📌MSW 설치 방법
npm install msw --save-dev
# 또는
yarn add msw --dev
📌MSW 사용법
1. 서비스 워커 설정: 프로젝트의 public 디렉토리에 서비스 워커 파일을 초기화한다.
npx msw init public/
2. 요청 핸들러 정의 : API 요청을 가로채고 모방할 응답을 정의합니다. 요청 핸들러는 보통 src/mocks/handlers.js와 같은 파일에 정의한다.
이전 버전
// src/mocks/handlers.js
import { rest } from 'msw'
export const handlers = [
rest.get('/user', (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
username: 'admin',
email: 'admin@example.com'
})
)
}),
]
최신 버전
// src/mocks/handlers.js
import { http, HttpResponse } from "msw";
export const handlers = [
http.get("https://api.example.com/plants", ({ request }) => {
const query = new URL(request.url).searchParams;
const level = query.get("level");
const type = query.get("type");
const place = query.get("place");
const price = query.get("price");
const plants = [
{
id: 0,
name: "몬스테라",
level: "Beginner",
type: "foliage",
place: "all",
price: "1_won",
},
{
id: 1,
name: "커피나무",
level: "Beginner",
type: "tree",
place: "all",
price: "all",
},
{
id: 2,
name: "파키라",
level: "Beginner",
type: "foliage",
place: "all",
price: "all",
}
];
return HttpResponse.json({
plants: filteredPlants,
});
}),
];
‼️ 업데이트 버전은
rest -> http
ctx -> HttpResponse
로 바뀌었다.
3. 서비스 워커와 핸들러 연동: 개발 모드에서 서비스 워커를 활성화하고, 위에서 정의한 요청 핸들러를 등록한다.
import { setupWorker } from "msw/browser";
import { handlers } from "./handler";
// 이 worker는 브라우저 환경에서 사용됩니다.
export const worker = setupWorker(...handlers);
4. 마지막으로 애플리케이션의 진입점(예: src/index.js)에서 이를 활성화한다.
async function enableMocking() {
// 배포할때는 === 로 바꾸기
if (process.env.NODE_ENV !== "development") {
return;
}
const { worker } = await import("./mocks/browser");
return worker.start();
}
enableMocking().then(() => {
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
});
개발 환경에서 /user 경로로 GET 요청을 하면, MSW가 이를 가로채고 미리 정의된 응답을 반환한다. 이를 통해 실제 백엔드 서버 없이도 API 호출을 테스트하고 개발할 수 있다.
MSW는 단순한 모킹을 넘어, 네트워크 실패 상황, 지연 응답 등 다양한 네트워크 시나리오를 시뮬레이션할 수 있어, 더 견고한 프론트엔드 애플리케이션 개발에 도움을 준다.
참고 자료
'Frontend > React' 카테고리의 다른 글
React - 비동기 통신 SWR (0) | 2024.09.08 |
---|---|
React - .env 환경 변수 사용하기 (0) | 2024.05.09 |
react - Hooks(useState, useEffect, useContext) (0) | 2024.02.15 |
react - recoil이란? (0) | 2023.12.31 |
react - redux 이용해서 계산기 만들기 (2) | 2023.12.29 |
프로젝트를 진행하다가 프론트엔드쪽에서는 컴포넌트가 완성이 됐지만 백엔드에서는 아직 api가 나오지 않아 react msw 기반의 임의에 mock api를 사용해 먼저 api interlocking을 진행하고 있다.
📌 MSW ?
백엔드 없이도 네트워크 요청을 모방하여 테스트하고 개발할 수 있게 해주는 도구다. MSW는 서비스 워커 API를 사용하여 실제 네트워크 요청을 가로채고, 미리 정의된 응답을 반환함으로써, 개발 중이거나 테스트 환경에서 백엔드 서버 없이도 API 호출을 모방할 수 있게 해준다. 이를 통해, API 의존성 없이 프론트엔드 개발과 테스트를 진행할 수 있으며, 네트워크 상태나 오류 처리 등을 쉽게 시뮬레이션 할 수 있다.
📌MSW 설치 방법
npm install msw --save-dev
# 또는
yarn add msw --dev
📌MSW 사용법
1. 서비스 워커 설정: 프로젝트의 public 디렉토리에 서비스 워커 파일을 초기화한다.
npx msw init public/
2. 요청 핸들러 정의 : API 요청을 가로채고 모방할 응답을 정의합니다. 요청 핸들러는 보통 src/mocks/handlers.js와 같은 파일에 정의한다.
이전 버전
// src/mocks/handlers.js
import { rest } from 'msw'
export const handlers = [
rest.get('/user', (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
username: 'admin',
email: 'admin@example.com'
})
)
}),
]
최신 버전
// src/mocks/handlers.js
import { http, HttpResponse } from "msw";
export const handlers = [
http.get("https://api.example.com/plants", ({ request }) => {
const query = new URL(request.url).searchParams;
const level = query.get("level");
const type = query.get("type");
const place = query.get("place");
const price = query.get("price");
const plants = [
{
id: 0,
name: "몬스테라",
level: "Beginner",
type: "foliage",
place: "all",
price: "1_won",
},
{
id: 1,
name: "커피나무",
level: "Beginner",
type: "tree",
place: "all",
price: "all",
},
{
id: 2,
name: "파키라",
level: "Beginner",
type: "foliage",
place: "all",
price: "all",
}
];
return HttpResponse.json({
plants: filteredPlants,
});
}),
];
‼️ 업데이트 버전은
rest -> http
ctx -> HttpResponse
로 바뀌었다.
3. 서비스 워커와 핸들러 연동: 개발 모드에서 서비스 워커를 활성화하고, 위에서 정의한 요청 핸들러를 등록한다.
import { setupWorker } from "msw/browser";
import { handlers } from "./handler";
// 이 worker는 브라우저 환경에서 사용됩니다.
export const worker = setupWorker(...handlers);
4. 마지막으로 애플리케이션의 진입점(예: src/index.js)에서 이를 활성화한다.
async function enableMocking() {
// 배포할때는 === 로 바꾸기
if (process.env.NODE_ENV !== "development") {
return;
}
const { worker } = await import("./mocks/browser");
return worker.start();
}
enableMocking().then(() => {
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
});
개발 환경에서 /user 경로로 GET 요청을 하면, MSW가 이를 가로채고 미리 정의된 응답을 반환한다. 이를 통해 실제 백엔드 서버 없이도 API 호출을 테스트하고 개발할 수 있다.
MSW는 단순한 모킹을 넘어, 네트워크 실패 상황, 지연 응답 등 다양한 네트워크 시나리오를 시뮬레이션할 수 있어, 더 견고한 프론트엔드 애플리케이션 개발에 도움을 준다.
참고 자료
'Frontend > React' 카테고리의 다른 글
React - 비동기 통신 SWR (0) | 2024.09.08 |
---|---|
React - .env 환경 변수 사용하기 (0) | 2024.05.09 |
react - Hooks(useState, useEffect, useContext) (0) | 2024.02.15 |
react - recoil이란? (0) | 2023.12.31 |
react - redux 이용해서 계산기 만들기 (2) | 2023.12.29 |