백엔드 기다리기 그만 — 30초 만에 API 목업
Source: Dev.to
모든 프론트엔드 개발자는 이런 느낌을 한 번쯤은 겪어봤을 것입니다: 백엔드가 아직 준비되지 않았고, Figma 파일은 있는데 마감일이 다가오며 호출할 API가 없습니다. 보통 다음과 같은 우회 방법을 사용합니다:
- 컴포넌트에 JSON을 하드코딩한다.
- 로컬에
json-server를 띄운다. - 그냥 기다린다.
세 가지 모두 각각 다른 방식으로 고통스럽습니다.
기존 목(mock) 도구들의 실제 문제점
현재 존재하는 도구들은 두 가지 진영으로 나뉩니다.
너무 무겁다.
MSW는 강력하지만 설치, 설정, 서비스 워커 구성이 필요합니다. Mockoon은 좋지만 데스크톱 앱이라 목이 내 컴퓨터에만 존재해 다른 사람이 사용할 수 없습니다. MirageJS는 프론트엔드 안에서 API 레이어를 다시 구축하도록 강요합니다.
너무 단순하다.
대부분의 온라인 목 서비스는 정적 JSON 엔드포인트만 제공하고 오류 시뮬레이션, 지연 제어, 느리거나 깨진 API를 테스트할 수 있는 기능이 없습니다.
두 진영 모두 실제 문제를 해결하지 못합니다: 팀 전체가 1분 이내에 설정 없이 호출할 수 있는 작동하는 API URL을 제공하는 것.
프론트엔드 개발자가 실제로 필요로 하는 것
- 디자이너가 화면을 전달한다.
- 프론트엔드 개발자는 이를 구현해야 한다.
- 백엔드 엔드포인트는 아직 존재하지 않는다.
- 프론트엔드 개발자는 막힌다.
그들을 풀어주는 것은 완벽하게 설계된 목 시스템이 아니라 지금 바로 올바른 형태의 데이터를 반환하고, 설정 없이 팀원과 공유할 수 있는 URL입니다.
아무도 채우지 못한 격차
내 프로젝트들을 만들면서 계속 부딪힌 벽은 다음과 같습니다:
- 설치가 필요 없다.
- 설정 파일이 없다.
- 내 노트북에만 존재하는 목이 아니다.
또한 현실적인 시나리오를 테스트해야 했습니다:
- 3초 응답 시간 시뮬레이션.
- 간헐적인 실패 시뮬레이션(예: 3번 중 1번 실패).
대부분의 목 도구는 고정된 500 오류만 반환할 수 있고, 확률적 실패를 지원하지 않습니다. 이런 기능을 간단히 제공하는 도구를 찾지 못해 mockserver.in을 만들었습니다.
작동 방식
목을 만드는 세 가지 방법
- Plain English – “이름, 가격, 이미지 URL을 가진 5개의 제품 리스트를 반환한다”와 같이 입력하면 서비스가 JSON을 생성하고 즉시 사용 가능한 URL을 제공합니다.
- JSON editor – 직접 응답 본문을 붙여넣고 상태 코드를 설정하면 끝납니다.
- Form – 구조화된 입력을 선호한다면 폼에 필드를 채웁니다.
모든 목은 즉시 공유 가능한 URL을 얻으며, 계정이 필요 없습니다.
추가로 적용할 수 있는 기능들
- 고정 또는 랜덤 지연
- 특정 HTTP 상태 코드
- 간헐적 실패 비율(예: “요청의 20 % 실패”)
- 타임아웃 시뮬레이션
프론트엔드는 실제 URL을 호출하고, 모바일 팀도 동일한 URL을 호출합니다. 로컬에서 뭔가를 실행할 필요가 없습니다.
대상 사용자
- 백엔드 엔드포인트가 없어 막힌 프론트엔드 개발자
- 개발 중에 안정적인 URL이 필요한 모바일 개발자
- 백엔드와 프론트엔드가 병행 작업하는 팀
- 백엔드에 손대지 않고 로딩 상태, 오류 처리, 재시도 로직을 테스트하고 싶은 모든 사람
사용해 보기
mockserver.in – 20개의 목을 무료로 제공, 신용카드 필요 없고 설정도 필요 없습니다. 엔드포인트를 설명하면 30초 안에 URL을 받아볼 수 있습니다.