[frontend] MSW 알아보기!

1.MSW란 무엇이며 왜 필요한가

• 서비스 워커를 사용합니다 (네트워크 호출을 가로채는 API 모킹 라이브러리)
• Mock 서버 구축하지 않아도 API를 네트워크 수준에서 Mocking가능합니다.
• 테스트 환경을 예측 가능하고 격리된 상태로 유지하여 테스트의 일관성을 보장합니다.
• 프론트엔드와 백엔드가 서로 의존적인 경우에 유용하게 사용할 수 있습니다.

[기존의 API 테스트 방법과의 비교]

 

기존방법:

• 실제 API 호출 후 테스트 진행
  • 외부 서버의 응답 속도에 따라 테스트 결과가 일관되지 않을 수 있습니다.
  • 외부 API의 상태에 따라 테스트가 실패할 가능성이 있어, 개발자들이 테스트 결과를 예측하기 어려운 경우가 많습니다.

⇒ 문제해결 by MSW

• MSW는 클라이언트와 테스트용 서버 사이의 중개 역할을 하여, 외부 의존성을 제거합니다. 이를 통해 테스트 환경을 안정적이고 예측 가능하게 만들 수 있습니다.

---

 

2.동작원리

 

1. 브라우저에서 요청을 보냅니다.

: 개발 중인 웹 애플리케이션에서 네트워크 요청(예: Fetch API를 사용한 HTTP 요청)이 발생합니다.

 

2. 서비스 워커가 요청을 가로챕니다.

: 서비스 워커는 브라우저 환경에서 백그라운드에서 실행되며, 네트워크 요청을 가로챕니다. 

 

3. 서비스 워커는 요청을 클론합니다.

: MSW에서는 설정한 핸들러로 요청을 전달하기 전에, 요청 객체를 클론합니다. 클론된 요청은 핸들러에서 지정한 대로 적절히 처리될 수 있습니다.

 

4. MSW로 요청을 보냅니다.

: MSW에서는 설정한 핸들러로 요청을 전달하기 전에, 요청 객체를 클론합니다.

  클론된 요청은 핸들러에서 지정한 대로 적절히 처리될 수 있습니다.

 

5. 모킹한값(응답)을 다시 서비스워커로 보냅니다.

 :MSW는 가짜 응답을 생성하여 서비스 워커에 반환합니다.

해당 응답은 클라이언트의 요청과 일치하도록 설정된 상태코드, 응답 본문(JSON 형식 등), 헤더 등을 포함합니다.

 

6. 서비스워커는 전달 받은 응답을 브라우저로 보냅니다.

:서비스 워커는 MSW로부터 받은 가짜 응답을 브라우저로 전달하여 원래 요청이 보내졌을 때와 동일한 방식으로 응답을 처리합니다.

 

7.결론

MSW는 브라우저 환경에서 동작하는 서비스 워커를 활용하여 네트워크 요청을 가로채고, 개발자가 정의한 가짜 데이터로 응답을 조작하는 방식으로 동작합니다.

 

[주의할점!]

-서비스워커는 브라우저 환경이 아닌곳에서는 동작하지 않습니다!

 

---

3.설치 및 세팅

1. msw 설치하기

npm install msw --save-dev
yarn add msw --dev

 

2.모의 API 정의

2.1 src/mocks 폴더 생성합니다.

:src 폴더 안에 mocks 폴더를 만들기 [폴더구조]

 

 

 해당 모의 API 핸들러 파일을 담는 곳입니다.

mkdir src/mocks

 

2.2 handlers.js 파일 생성합니다.

src/mocks 폴더 안에 handlers.js 파일을 만들기

이 파일에서 API 요청을 핸들링하는 함수들을 정의할 것입니다.

 

3.API 선택

보통 REST API를 사용합니다.

 

4.요청 핸들러 작성  [src/mocks/handlers.js 파일 작성]

-rest 객체를 사용하여 각 HTTP 메서드(GET, POST, PUT, DELETE 등)에 대한 요청을 처리하는 함수를 정의하는 과정을 의미합니다.

 

-HTTP 메서드와 경로 설정

: rest.get, rest.post, rest.put, rest.delete 등의 메서드를 사용하여 요청을 처리할 경로와 메서드를 설정합니다.

 

-요청 처리 함수 작성

: 각 요청 핸들러 함수 내에서는 실제 요청이 발생했을 때 실행될 코드를 작성합니다.

이 함수는 req, res, ctx 세 가지 매개변수를 받게 됩니다.

• req: 요청 객체로, 요청에 대한 정보를 포함 (예: req.params, req.body 등).
• res: 응답 객체로 모킹된 response, 클라이언트에게 반환할 응답을 설정
• ctx: 응답을 설정하는 데 사용되는 컨텍스트 객체로, ctx.status, ctx.json 등의 메서드를 포함

[간단한 할 일 목록 예제]

:GET과 POST 메서드를 사용하여 간단한 할 일 목록을 모의 API로 관리하는 코드 예제입니다.

// src/mocks/handlers.js
import { rest } from 'msw';

// 모의 데이터 (간단한 할 일 목록)
let todos = [
  { id: 1, text: 'Buy groceries', completed: false },
  { id: 2, text: 'Pay bills', completed: true },
];

// 요청 핸들러 배열
export const handlers = [
  // GET /todos 요청 처리
  rest.get('/todos', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json(todos)
    );
  }),

  // POST /todos 요청 처리
  rest.post('/todos', (req, res, ctx) => {
    const { text } = req.body;
    const newTodo = {
      id: todos.length + 1,
      text,
      completed: false,
    };
    todos.push(newTodo);
    return res(
      ctx.status(201),
      ctx.json(newTodo)
    );
  }),
];

 

• rest.get('/todos', ...): GET 메서드로 /todos 경로에 요청이 들어왔을 때 실행되는 핸들러 함수
• ctx.status(200)으로 상태 코드를 설정하고, ctx.json(todos)로 할 일 목록 데이터를 JSON 형식으로 클라이언트에게 반환
• rest.post('/todos', ...): POST 메서드로 /todos 경로에 요청이 들어왔을 때 실행되는 핸들러 함수
• req.body에서 새로운 할 일의 내용을 가져와 새로운 할 일을 배열에 추가한 후, ctx.status(201)로 생성 성공 상태 코드를 설정하고, ctx.json(newTodo)로 새로 추가된 할 일을 클라이언트에게 반환

5 응답 리졸버 작성

rest.post와 rest.get 함수는 각각 요청을 처리하는 함수를 받게 됩니다.

req, res, ctx 매개변수를 사용하여 조건에 맞는 응답을 작성해야합니다.

 

MSW를 사용하여 모의 API를 설정한 후⇒ 브라우저에서 확인할 수 있습니다.

6번 과정에서는 MSW를 브라우저에서 확인하는 방법을 살펴보겠습니다.

 

---

4.브라우저 통합

6. 작업자 스크립트 생성

MSW 라이브러리 CLI를 사용하여 작업자(worker) 스크립트를 생성합니다.

스크립트는 모의 API를 제공하기 위해 사용합니다.

 

npx msw init public --save
# 또는
yarn msw init public --save

 

 

7. [src/mocks/browser.js 파일 작성]

MSW에서 제공하는 setupWorker 함수를 사용하여 서비스 워커를 설정하고 등록합니다.

import { setupWorker } from 'msw';
import { handlers } from './handlers.js';

export const worker = setupWorker(...handlers);
 //handlers 배열을 인자로 받아 서비스 워커에 등록
 //setupWorker 함수를 호출하여 서비스 워커를 초기화하고, 정의한 모든 핸들러를 서비스 워커에 등록

 

8.조건부 모의 활성화: [특정 조건이나 환경에서만 MSW의 모의 요청을 활성화하는 기능]

서비스 워커를 등록하고 활성화함, 워커를 시작합니다.

import { worker } from './mocks/browser.js';
//worker는 MSW에서 제공하는 setupWorker로 설정된 모의 API 핸들러를 가져오는 역할

// 사용자 정보를 가져와서 화면에 표시하는 함수
//2./...API 요청을 처리하는 fetchUserFromAPI 함수
function fetchUserFromAPI() {
  return fetch('/api/user')
    .then((res) => res.json())
    .then((data) => {
      const userInfoDiv = document.getElementById('user-info');
      userInfoDiv.innerHTML = `<p>Username: ${data.username}</p><p>User ID: ${data.id}</p>`;
    })
    .catch((error) => {
      console.error('Error fetching user:', error);
    });
}

// 1.서비스 워커 시작 후 fetchUser 함수 호출
window.addEventListener('load', () => {
  worker.start().then(() => {
    fetchUserFromAPI(); // MSW가 준비된 후에 API를 호출
  });
});

 

window.addEventListener('load', ...) 이벤트 핸들러 내에서 worker.start()를 호출하여 MSW를 시작

 

MSW가 준비된 후에 fetchUserFromAPI() 함수를 호출합니다.

⇒ MSW가 API 요청을 가로채고 모의 응답을 제공할 수 있게됩니다.

 

9.파일이 설치 되었는지 확인

브라우저에서 애플리케이션으로 이동하여 개발자 도구에서 콘솔을 열고,

통합이 성공적이면 [MSW] Mocking enabled. 메시지가 뜨게됩니다.

 

---

참고 문서

 

https://oliveyoung.tech/2024-01-23/msw-frontend/https://oliveyoung.tech/2024-01-23/msw-frontend/

Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기 | 올리브영 테크블로그

 

https://www.daleseo.com/mock-service-worker/

MSW로 백엔드 API 모킹하기

 

https://mswjs.io/docs/getting-started

Getting started