Devlog

프론트엔드로 프로젝트를 진행하다 보면 백엔드 API가 완성되지 않아 Mock 데이터를 사용하는 것은 흔한 일입니다. 역시 이와 같은 상황에서 어려움을 겪었습니다.

기존에는 JSON 파일이나 하드 코딩된 데이터를 활용하여 Mock 데이터를 관리했습니다. 그러나 이 빙삭은 다음과 같은 문제가 있었습니다.

데이터 관리의 불편함

Mock 데이터가 변경될 때마다 JSON 파일을 수정해야 했고, 데이터 구조가 복잡해질수록 수정 작업이 번거로워졌습니다. 데이터 양이 많아질수록 파일 관리와 수정의 복잡성이 증가했습니다.

테스트 환경과 실제 환경의 불일치

하드코딩된 Mock 데이터는 실제 API 요청과는 다르게 동작했습니다. 이로 인해 개발 중에는 문제가 없더라도 실제 API와 연동할 때 예상치 못한 오류가 발생하곤 했습니다. 특히 응답 형식의 차이로 디버깅 시간이 증가하는 문제가 있었습니다.

이러한 문제를 해결하기 위해 여러 방법들을 사용해왔습니다.

Express로 Mock Server 구성

간단한 Express 서버를 만들어 Mock 데이터를 제공하도록 구성한 적이 있습니다. 이 방법은 빠르게 Mock API를 만들 수 있었지만, 다음과 같은 한계가 있었습니다.

Mock 서버를 따로 실행하고 관리해야 하는 번거로움
네트워크 요청의 동작이 실제 API와 일치하지 않아, 일부 상황에서 데이터 불일치 문제가 발생

Postman 등의 툴 활용 Postman으로 Mock API를 설정하고 데이터를 반환하도록 구성한 적도 있습니다. 이는 설정이 간편하다는 장점이 있었으나, 상태에 따른 동적 응답을 처리하는 데 제약이 있었습니다.

Mock 데이터를 생성할 때 가장 중요한 점은 실제 API 연동 시 발생할 수 있는 오류를 미리 방지하는 것입니다. 백엔드 개발 경험이 있는 입장에서, 공통 Response 객체를 기반으로 데이터를 구조화하는 것이 필수적이었습니다. 예를 들어, 다음과 같은 형식을 유지해야 했습니다.

{
  "success": true,
  "data": {
    "items": [
      {
        "id": 1,
        "name": "Item 1"
      },
      {
        "id": 1,
        "name": "Item 1"
      }
    ]
  },
  "error": null
}

이러한 다양한 시도에도 불구하고 여전히 JSON 파일 관리의 번거로움과 테스트 환경의 제약은 해결되지 않았습니다. 그래서 **MSW(Mock Service Worker)**를 도입하게 되었습니다.

MSW

MSW는 네트워크 요청을 가로채 Mock 데이터를 반환하거나 동적으로 처리할 수 있는 도구입니다. 프론트엔드 개발 시 백엔드 API가 완성되지 않은 상황에서도 실제 API 호출과 동일한 환경을 제공해주며, 개발과 테스트 모두에서 큰 장점을 느꼈습니다.

서비스 워커 기반 동작

MSW는 브라우저의 서비스 워커를 활용하여 네트워크 요청을 가로챕니다. 프론트엔드에서 HTTP 요청을 보낼 때 실제 네트워크로 전달되기 전에 서비스 워커가 요청을 가로채고, 미리 정의된 Mock 데이터를 반환하거나 동적 처리를 수행합니다.

요청 핸들링

MSW는 요청을 처리하기 위한 핸들러를 제공합니다. 핸들러를 통해 특정 요청을 지정하고, 이에 대한 응답을 정의할 수 있습니다.

import { rest } from "msw";
import { data } from "./data.json";

export const likeHandler = [
  rest.get("/cafes/likes", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(data));
  }),
];

/cafes/likes 엔드포인트에 대한 GET 요청이 발생하면, MSW가 Mock 데이터를 반환합니다.

그래서 MSW는 실제로 어땠는가?

개발 속도 향상

프로젝트 초기에는 백엔드 API가 완성되지 않은 상태였기 때문에 MSW를 통해 빠르게 Mock 데이터를 설정하고 UI 개발을 진행할 수 있었습니다. 이를 통해 프론트엔드와 백엔드가 병렬로 작업하면서도 통합 과정에서 큰 이슈 없이 작업을 마무리할 수 있었습니다.

유연한 데이터 관리

기존의 JSON 파일 관리 방식과 달리, 요청 조건에 따라 동적으로 데이터를 반환할 수 있어 Mock 데이터 관리가 훨씬 쉬워졌습니다. 예를 들어, 특정 필터링 조건이나 인증 토큰에 따라 다른 응답을 반환하도록 설정했습니다.

백엔드와의 원활한 통합

MSW의 Mock 데이터는 실제 API와 동일한 구조를 사용하도록 설계했기 때문에, 백엔드 API가 완성된 후에도 큰 수정 없이 통합 작업을 진행할 수 있었습니다. 이는 연동 과정에서 발생할 수 있는 구조 불일치 문제를 예방하는 데 크게 기여했습니다.

MSW를 도입을 추천하는가?

실제 API 구조를 반영

MSW는 네트워크 요청을 가로채 실제 API와 동일한 구조로 응답을 처리할 수 있습니다. 이를 통해 프론트엔드 개발 과정에서 백엔드의 구현 상태와 관계없이 API 연동과 유사한 환경을 미리 경험할 수 있습니다. Mock 데이터를 설계할 때도 실제 API의 응답 형식을 반영하므로, 추후 통합 과정에서 발생할 수 있는 오류를 효과적으로 방지할 수 있습니다.

협업의 가치를 늘린다

MSW는 프론트엔드와 백엔드의 작업 의존도를 낮춰줍니다. 프론트엔드는 MSW를 통해 독립적으로 개발을 진행할 수 있고, 백엔드는 API 설계와 구현에 집중할 수 있습니다. 이로 인해 팀 전체의 효율성이 증가하고 프로젝트 일정이 단축됩니다. 또한, MSW로 Mock 데이터를 설정하면 QA 및 테스트 환경에서도 일관된 데이터를 사용할 수 있어 협업이 더욱 원활해집니다.

MSW는 단순히 Mock 데이터를 제공하는 도구가 아니라, 실제 API 환경과 유사한 개발 및 테스트 환경을 제공하는 도구입니다. 기존 방식에서 느꼈던 번거로움과 제약을 효과적으로 해결해주었으며, 프론트엔드 개발 생산성과 코드 품질을 크게 향상시켰습니다. Mock 데이터 관리에 어려움을 겪고있다면 적극 추천합니다!

Mocking이 필요할 때

프론트엔드 모킹, MSW 도입 후기

MSW

그래서 MSW는 실제로 어땠는가?

MSW를 도입을 추천하는가?