하
이것도 쉽지않습니다.
아주 요긴하게 쓰는 msw 알고 씁시다
msw... 이것 뭐예요?
msw란 mock service worker의 약자로 service worker api를 사용해서 실제 요청을 가로채는 api mocking 라이브러임!
왜 써요?
프로젝트 시작하면 같이 시작하다보니 백엔드가 api를 만들때까지 프론트는 화면 먼저 그리다가 다 끝나면 백엔드에서 api 내려줄때까지 하염없이 기다려야함.. 그때 msw를 사용하면 시간 낭비를 덜한다! 임시로 만들어서 데이터 잘 왔다갔다 하는지 확인하고 api만 바꾸면 되니까 아주 좋음
설치 및 파일 추가
리액트로 할때는 괜찮았는데 next로 하려니 뭐가 이렇게 다 다른건지 엉엉운다
yarn add msw --dev
또는
npm install msw --save-dev
서비스 워커를 등록하기 위해서는 스크립트를 호스팅하고 제공해야한다
public 폴더 위치에 서비스워커를 등록해줘야함
npx msw init ./public --save
내 프로젝트 같은경우엔 src 폴더를 안만들었기때문에 최상위에서 mocks 폴더를 만들어주면된다.
mocks/handler.ts
또는
src/mocks/handler.ts
import { HttpResponse, http } from "msw";
export const handlers = [
//회원가입
http.post("/api/v1/members/register", async ({ request }) => {
const info = await request.json();
return HttpResponse.json(info, {
status: 200,
headers: {
"Content-Type": "application/json",
},
});
}),
//테ㅛ스트룔
http.get('/users', () => {
// Response resolver allows you to react to captured requests,
// respond with mock responses or passthrough requests entirely.
// For now, let’s just print a message to the console.
return HttpResponse.json({});
}),
];msw가 버전이 업데이트 되면서 사용법이 바뀌었는데 rest,req,ctx 이런걸 안쓰는것 같았다. 예전 문법 써도 사용은 되는듯하다
나는 제일 최신버전 꾸역꾸역 찾으면서 회원가입 로직 하나 만들어봤음
mocks/browser.ts
// /mocks/browser.js
import { setupWorker } from "msw/browser";
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);
mocks/server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);
그냥 리액트 같았으면 handler 하나만 만들어줘도 됐지만 넥스트에선 browser,server도 만들어줘야한다.
최상단에 index.ts
그냥 mocks 폴더안에 넣어도 될것같다..
export async function initMsw() {
if (typeof window === 'undefined') {
const { server } = await import('./mocks/server');
server.listen();
} else {
const { worker } = await import('./mocks/browser');
await worker.start();
}
}
그리고 컴포넌트 폴더안에 MSWComponent 컴포넌트를 만들어준다
'use client';
import { useEffect, useState } from 'react';
export const MSWComponent = ({ children }: { children: React.ReactNode }) => {
const [mswReady, setMswReady] = useState(false);
useEffect(() => {
const init = async () => {
const initMsw = await import('../index').then((res) => res.initMsw);
await initMsw();
setMswReady(true);
};
if (!mswReady) {
init();
}
}, [mswReady]);
return <>{children}</>;
};그리고 해당 컴포넌트를
app/layout.tsx에 감싸준다.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className={didot.variable}>
<body className={pretendard.className}>
<MSWComponent>
{children}
</MSWComponent>
</body>
</html>
);
}
이렇게 설정후 실행하게 되면 콘솔에
이렇게 찍히면성공~,,
참고블로그
Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기 | 올리브영 테크블로그
네트워크 Mocking을 위해 고민했던 삽질기
oliveyoung.tech
MSW로 API Mocking으로 개발환경을 높이고 Next.js RSC환경에서도 MSW 적용하기
MSW로 API Mocking을 하여 프론트엔드 개발 환경을 개선하고 Next.js의 App router의 RSC환경에서 MSW를 적용하는 방법을 알아봅니다.
www.handongryong.com
'Next JS' 카테고리의 다른 글
| next js 14 + tailwindCSS폰트적용하기 2 (1) | 2024.11.04 |
|---|---|
| Next JS 버전 14 로컬 폰트 적용하기 (2) | 2024.05.07 |
| 1일차 Next js (0) | 2024.02.27 |
댓글