MSW Next.js에서 사용하기

JJY·2025년 4월 12일

MSW React frontend next.js typescript 프론트엔드

MSW

목록 보기

4/4

프로젝트 중 Next에서 MSW 사용한 방법도 올려놓으면 좋을 것 같아서 글을 쓰기로 결정!!

🌟 Express 기반의 서버에서 MSW 실행하기

Vite에서 MSW를 실행했을 때는 Service Worker 방식을 사용해서 브라우저(클라이언트)에서 실행하였다.
Next에서는 Express를 사용해 Node.js 서버에서 실행할 것이다.
Next.js에서도 클라이언트에서 실행이 가능하긴 하지만 SSR페이지에서의 `호출은 브라우저에서 API를 가로챌 수 없고 jest 사용해보기 위해서 서버에서 실행하는 방식으로 MSW를 사용하였다.

✅ 브라우저 (Service Worker 방식)

클라이언트 측 요청을 Service Worker가 가로채서 가짜 응답
setupWorker().start()

✅ 서버 (Node.js 방식: setupServer)

서버 코드에서 발생하는 API 요청을 Node.js 환경에서 가로채고 응답
setupServer().listen()

🌟 폴더 생성 & 파일 생성

MSW Vite+TypeScript에 적용하기

전에 Service Worker 방식이랑 폴더, handlers.ts, broswer.ts 동일하게 만들어주면 된다!!

🌟 src/mocks/http.ts 생성 (Node.js에서 실행할 핸들러)

Node.js 환경에서 실행할 핸들러를 정의한 파일 생성하고 터미널에서 실행시키면 내가 지정한 port에 MSW가 켜진다.

// http.ts

import { createMiddleware } from "@mswjs/http-middleware"; // MSW의 HTTP middleware를 사용
import express from "express"; // Express 서버 설정
import cors from "cors"; // CORS 설정
// handler 가져오기 ( 3개 작성해서 3개 가져옴 )
import { handlers } from "./handlers";
import { productHandlers } from "./productHandlers";
import { categoryHandlers } from "./categoryHandlers";

const app = express(); // Express 애플리케이션 생성
const port = 8080; // 서버 포트 설정

app.use(
  cors({
    origin: "http://localhost:3000", // React 앱에서 오는 요청을 허용 - 사용하는 port번호 입력
    optionsSuccessStatus: 200, // Pre-flight 요청에 대한 성공 상태 설정
    credentials: true, // 쿠키 전송을 허용
  })
);
app.use(express.json()); // Express 서버에서 JSON 요청 바디를 처리할 수 있게 함
app.use(createMiddleware(...handlers, ...productHandlers, ...categoryHandlers)); // MSW 미들웨어를 Express 서버에 적용
app.listen(port, () => console.log(`Mock server is running on port: ${port}`)); // 8080 서버에서 실행시킴. 성공하면 console 출력