[RFC] msw Mock Server 구축 및 Ky 인터페이스 정의

[useonglee]

RFC 내용 / 업데이트 일자: 2023. 1. 15 (am 12:15)

• msw를 활용하여 Mock Server를 구축했습니다.
• 서버 api를 쉽게 요청할 수 있도록 ky 인터페이스를 개선했습니다.
• 테스트 환경에서도 api를 테스트할 수 있도록 mockApi를 만들어봤습니다.

[msw]

서버 개발자로부터 mock data만 전달받았을 경우에도 평소 개발하던대로 작업하실 수 있습니다.

1. .env.local 파일에 아래와 같이 작성합니다.

NEXT_PUBLIC_MSW_MOCK=enabled
NEXT_PUBLIC_API_URL=https://api.im-linker.com

2. dev:mock 명령어를 통해 node server를 실행시킵니다.

yarn dev:mock

3. mock server에 api를 만들어줍니다. 예시 파일

// src/__server__/mocks/feed.ts
export const feedHandlers = [
  http.get(`${PREFIX_URL}/v1/my`, () => {
    return HttpResponse.json({ result: my }, { status: 200 });
  })
];

const my = {
  // .. data
}

// src/__server__/handlers.ts
export const handlers = [...feedHandlers];

4. 컴포넌트단에서 실제 api에 요청하는 것처럼 개발할 수 있습니다.

// server component
import { ky } from '@linker/ky';

export default async function FeedPage() {
  const data = await getMy();

  return (
    <div></div>
  );
}

const getMy = () => {
  const response = ky.get<My>('/v1/my');

  return response;
};

// client component
'use client'

import { ky } from '@linker/ky';
import { use } from 'react';

export default function Feed() {
  const data = use(getMy());

  return <div></div>;
}

const getMy = () => {
  const response = ky.get<My>('/v1/my');

  return response;
};

5. 서버 api가 배포되어도 수정할 필요없이 env 파일과 실행 명령어만 바꿔주면 됩니다.

// .env.local
# NEXT_PUBLIC_MSW_MOCK=enabled

// 실행 명령어
yarn dev:mock (x)
yarn dev (o)

6. 만약 api 테스트 코드가 필요하다면 다음과 같이 작성하실 수 있습니다.

describe('mockApi 호출 테스트', () => {
  beforeAll(() => {
    mockApi.get('/api/v1/my', my);
  });

  test('mockApi 호출 테스트', async () => {
    // .. 테스트 코드 작성
  });
});

[ky]

ky를 통해 rest api 요청을 쉽게 할 수 있습니다.

import { ky } from '@linker/ky';

const getMy = () => {
  const response = ky.get<My>('/v1/my');

  return response;
};

관련 PR:

#31