모의 서비스 워커(MSW)를 사용하여 개발 속도를 높이는 개발자 가이드-JS 튜토리얼-php.cn

The Developer’s Guide to Speeding Up Development with Mock Service Worker (MSW)

1장: 모의 서비스 워커(MSW) 소개

빠르게 변화하는 웹 개발 세계에서는 효율성과 속도가 매우 중요합니다. 마감일을 지키고, 기능을 제공하고, 애플리케이션의 품질을 보장하기 위해 작업할 때는 매 순간이 중요합니다. 개발자가 완전한 기능을 갖춘 백엔드에 의존하지 않고도 API 응답을 시뮬레이션할 수 있는 강력한 도구인 MSW(Mock Service Worker)가 활용되는 곳이 바로 여기입니다.

이 eBook에서는 MSW의 세계로 여행을 안내합니다. 이를 설정하고, 개발 워크플로에 통합하고, 잠재력을 최대한 활용하여 개발 프로세스 속도를 높이는 방법을 배우게 됩니다. 복잡한 웹 애플리케이션을 구축하든 사용자 인터페이스를 테스트하든 MSW는 개발자로서의 삶을 훨씬 쉽게 만들어줍니다.

2장: 모의 API의 필요성 이해

MSW에 대해 자세히 알아보기 전에 현대 웹 개발에서 모킹 API가 왜 필수적인지 이해하는 것이 중요합니다.

2.1 API 의존 개발의 과제

프런트엔드 애플리케이션을 개발할 때 API를 사용하여 데이터를 가져오고 작업을 수행하는 경우가 많습니다. 그러나 이러한 API는 언제든지 준비되어 있지 않을 수도 있습니다. 백엔드 개발 지연, 서버 가동 중지 시간, 네트워크 문제로 인해 속도가 느려질 수 있습니다. 실제 API 응답에 액세스하지 않으면 프런트엔드 코드를 효과적으로 테스트하기가 어렵습니다.

2.2 전통적인 모의 대 MSW

전통적으로 개발자는 로컬 서버 설정, 모의 데이터 파일 사용, 사용자 정의 모의 함수 생성 등 API를 모의하는 다양한 방법을 사용해 왔습니다. 이러한 방법은 효과가 있지만 번거롭고 지속적인 유지 관리가 필요하며 최신 애플리케이션에 필요한 유연성이 부족할 수 있습니다.

MSW가 빛을 발하는 곳입니다. 기존 방법과 달리 MSW는 브라우저나 Node.js 환경에서 직접 네트워크 요청을 가로채므로 최소한의 설정으로 API 동작을 시뮬레이션할 수 있습니다. 이는 모킹에 대한 유연하고 통합된 접근 방식을 제공하므로 백엔드와 별도로 프런트엔드 코드 작업을 더 쉽게 수행할 수 있습니다.

3장: 모의 서비스 작업자(MSW) 설정

이제 모킹 API의 중요성을 이해했으므로 프로젝트에서 MSW를 설정하는 과정을 살펴보겠습니다.

3.1 설치

먼저 MSW 패키지를 설치해야 합니다. 터미널을 열고 다음을 실행하세요.

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

로그인 후 복사

3.2 MSW 초기화

MSW가 설치되면 다음 단계는 프로젝트에서 MSW를 초기화하는 것입니다.

모의 디렉터리 만들기: 프로젝트에 mocks 디렉터리를 만드는 것부터 시작하세요. 이 디렉터리 내에서 요청 처리기를 정의합니다.

   mkdir src/mocks
   touch src/mocks/handlers.js

로그인 후 복사

요청 처리기 정의: handlers.js 파일에서 MSW가 다양한 네트워크 요청을 처리하는 방법을 정의합니다. 예를 들어 /api/user에 대한 GET 요청을 모의하는 방법은 다음과 같습니다.

   import { rest } from 'msw';

   export const handlers = [
     rest.get('/api/user', (req, res, ctx) => {
       return res(
         ctx.status(200),
         ctx.json({
           username: 'john_doe',
           email: 'john@example.com',
         })
       );
     }),
   ];

로그인 후 복사

이 핸들러는 요청을 가로채고 사용자 데이터가 포함된 모의 응답을 반환합니다.

서비스 워커 설정: 이제 네트워크 요청을 가로채고 모의 응답을 반환하는 서비스 워커를 설정하겠습니다.

src/mocks/browser.js에 다음을 추가하세요.

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

   export const worker = setupWorker(...handlers);

로그인 후 복사

3.3 MSW 시작

MSW를 시작하려면 이를 프로젝트의 진입점에 통합해야 합니다.

참가 파일 수정: index.js 또는 index.tsx를 열고 다음 코드를 추가하세요.

   if (process.env.NODE_ENV === 'development') {
     const { worker } = require('./mocks/browser');
     worker.start();
   }

로그인 후 복사

이렇게 하면 MSW가 개발 모드에서만 활성화되어 애플리케이션을 빌드하는 동안 API를 모의할 수 있습니다.

개발 서버 실행: 모든 설정이 완료되면 npm start 또는 Yarn start를 사용하여 개발 서버를 시작하세요. 이제 MSW는 API 요청을 가로채고 처리기에 정의된 모의 응답을 반환합니다.

4장: 효율적인 테스트를 위해 MSW 활용

MSW의 가장 강력한 기능 중 하나는 테스트 중에 다양한 API 시나리오를 시뮬레이션하는 기능입니다. 이를 통해 라이브 서버에 의존하지 않고도 광범위한 사용 사례를 포괄하는 포괄적인 테스트를 작성할 수 있습니다.

4.1 테스트를 위한 MSW 설정

테스트에서 MSW를 사용하려면 테스트 환경에서 실행되도록 구성해야 합니다. Jest로 설정하는 방법은 다음과 같습니다.

Create a Test Server: In src/mocks/server.js, set up a test server:

   import { setupServer } from 'msw/node';
   import { handlers } from './handlers';

   export const server = setupServer(...handlers);

로그인 후 복사

Configure Jest: Create a setupTests.js file in your project root (if you don’t have one already) and add the following code:

   import { server } from './src/mocks/server';

   beforeAll(() => server.listen());
   afterEach(() => server.resetHandlers());
   afterAll(() => server.close());

로그인 후 복사

This configures MSW to start the mock server before your tests run, reset the handlers after each test, and close the server when the tests are done.

4.2 Writing Tests with MSW

With MSW set up, you can write tests that simulate various API responses. For example, let’s test a component that fetches and displays user data:

import { render, screen, waitFor } from '@testing-library/react';
import UserProfile from './UserProfile';

test('displays user data', async () => {
  render(<UserProfile />);

  expect(await screen.findByText('john_doe')).toBeInTheDocument();
  expect(screen.getByText('john@example.com')).toBeInTheDocument();
});

로그인 후 복사

In this test, MSW intercepts the network request made by the UserProfile component and returns the mock user data defined in your handler.

Chapter 5: Advanced Features of MSW

MSW isn’t just for simple mocking—it offers advanced features that allow you to fine-tune how your application interacts with APIs.

5.1 Conditional Request Handlers

MSW allows you to conditionally modify responses based on request parameters, headers, or even the request body. This is useful for simulating different scenarios, such as authentication errors or validation failures.

rest.post('/api/login', (req, res, ctx) => {
  const { username } = req.body;

  if (username === 'invalid_user') {
    return res(
      ctx.status(403),
      ctx.json({ error: 'Invalid username or password' })
    );
  }

  return res(
    ctx.status(200),
    ctx.json({ token: 'fake-jwt-token' })
  );
});

로그인 후 복사

In this example, if the username is invalid_user, the response will simulate a login failure.

5.2 Simulating Delays and Errors

To test how your application handles slow or failed requests, MSW allows you to introduce delays or return error responses.

rest.get('/api/data', (req, res, ctx) => {
  return res(
    ctx.status(500),
    ctx.delay(1000),  // Introduce a 1-second delay
    ctx.json({ error: 'Internal Server Error' })
  );
});

로그인 후 복사

This handler simulates a slow network and an internal server error, allowing you to ensure your application responds appropriately.

Chapter 6: Integrating MSW into Your Development Workflow

MSW can be seamlessly integrated into various parts of your development workflow, from development to testing and even continuous integration.

6.1 Using MSW with Storybook

Storybook is a popular tool for building and testing UI components in isolation. By integrating MSW with Storybook, you can mock APIs directly within your stories, allowing you to develop and test components without relying on real backend data.

Set Up MSW in Storybook: In your Storybook configuration file (.storybook/preview.js), start the MSW worker:

   import { worker } from '../src/mocks/browser';

   worker.start();

로그인 후 복사

Mock API Calls in Stories: Now, when you load your components in Storybook, MSW will intercept any network requests and return the mock responses, just as it does in your main application.

6.2 Leveraging MSW in CI/CD Pipelines

By integrating MSW into your continuous integration and deployment (CI/CD) pipelines, you can ensure consistent testing environments, regardless of the availability or state of your backend services.

Include MSW in Test Scripts:
In your CI/CD configuration (e.g., in a GitHub Actions workflow or Jenkins pipeline), ensure that MSW is started before your tests run. This guarantees that all network requests during the tests are properly mocked.
Simulate Various Environments:
Use MSW to simulate different API environments (e.g., staging, production

) by adjusting your request handlers based on environment variables. This allows you to test your application under various conditions without needing access to those environments.

Chapter 7: Best Practices and Common Pitfalls

As with any tool, there are best practices to follow and common pitfalls to avoid when using MSW.

7.1 Keep Handlers Organized

As your application grows, the number of request handlers can become unwieldy. Keep your handlers organized by grouping them into different files based on feature or module.

// src/mocks/handlers/user.js
export const userHandlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ username: 'john_doe' }));
  }),
];

// src/mocks/handlers/index.js
import { userHandlers } from './user';

export const handlers = [...userHandlers];

로그인 후 복사

7.2 Avoid Over-Mocking

While it’s tempting to mock every API request, be mindful not to overdo it. Excessive mocking can lead to tests that don’t accurately reflect real-world conditions. Strike a balance between mocking for efficiency and ensuring your application is tested against actual APIs when necessary.

7.3 Regularly Update Mock Data

Keep your mock data up-to-date with the real API responses. This ensures that your tests and development environment remain accurate and relevant as the backend evolves.

8장: 결론

MSW(Mock Service Worker)는 현대 웹 개발자에게 귀중한 도구입니다. 이를 통해 최소한의 노력으로 API를 모의할 수 있어 개발 프로세스 속도를 높이고 일관된 테스트 환경을 보장할 수 있습니다. MSW를 워크플로에 통합하면 애플리케이션을 보다 효율적으로 구축 및 테스트하여 백엔드 서비스에 대한 의존도를 줄이고 전반적인 생산성을 향상시킬 수 있습니다.

복잡한 웹 애플리케이션을 작업하든 간단한 구성 요소를 작업하든 MSW는 고품질 소프트웨어를 적시에 제공하는 데 필요한 유연성과 성능을 제공합니다. 즐거운 코딩하세요!