더미 데이터 Mock JSON 생성 공식과 API 테스팅 가짜 객체 설계

직접 해보기 →

웹 서비스 개발 초기 단계에서 백엔드 API 서버의 데이터베이스 모델 설계와 API 컨트롤러 엔드포인트 구현이 미처 완료되지 않은 상태라면 프론트엔드 개발자는 기능을 검증하고 UI 레이아웃을 렌더링하는 데 난항을 겪게 됩니다.

이때 API 명세서에 기재된 JSON 구조와 일치하는 정교한 **더미 데이터(Mock Data)**가 필수적으로 요구됩니다. 본 글에서는 무작위 더미 JSON 데이터를 체계적으로 생산하는 자바스크립트 모형 공식과 API 설계 규칙을 해설합니다.

---

1. 더미 데이터 생성의 템플릿 루프 공식

정형화된 가짜 데이터셋(Mock JSON)을 동적으로 자동 생성하는 전산학적 생성 모형 식은 다음과 같습니다:

[ \text{Mock Dataset} = \left{ f_{\text{template}}(i) ;\middle|; i \in [1, N] \right} ]

여기서 $N$은 생성하고자 하는 타겟 레코드(Record) 총개수이고, $f_{\text{template}}(i)$는 인덱스 $i$를 기반으로 무작위 데이터 필드를 바인딩하여 단일 객체를 리턴하는 매핑 함수입니다.

데이터 항목별 무작위 주입 수식:

• 고유식별자 (UUID / Sequence ID): 순차적인 정수 값 $i$ 또는 표준 RFC4122 규격을 따르는 36자리의 UUID 고유 텍스트 키를 자동 매핑합니다.
• 무작위 이름 및 텍스트 선택: 준비된 가상의 데이터 말뭉치 배열($A$)의 크기($|A|$) 범위 내에서 의사난수(Pseudorandom Number)를 추출하여 인덱스로 지정 매핑합니다: [ \text{Selected Name} = A[\lfloor \text{random}() \times |A| \rfloor] ]
• 가상 날짜 범위 난수 매핑: 시작 날짜 타임스탬프($D_{\text{start}}$)와 끝 날짜($D_{\text{end}}$) 사이의 밀리초 차이 구간에서 무작위 가중치를 더해 날짜 객체를 생성합니다: [ D_{\text{random}} = D_{\text{start}} + \text{random}() \times (D_{\text{end}} - D_{\text{start}}) ]

---

2. 가짜 데이터(Mock JSON)를 활용한 API 테스팅 규칙

가짜 데이터를 웹 UI에 올바르게 연동하려면 실제 원격 서버 통신 환경과 유사한 레이턴시(Network Latency) 및 네트워크 응답 기전을 모사해야 합니다.

• 네트워크 지연 모사 기전: 현지 개발 환경에서는 로컬 데이터 로딩 속도가 0ms에 수렴하여 로딩 스피너(Spinner) 같은 UI 컴포넌트의 노출 여부를 디버깅하기가 어렵습니다. 자바스크립트의 Promise와 setTimeout을 조합해 임의의 500ms~1000ms 수준의 지연을 의도적으로 적용하여 테스트합니다:

  // 실제 API 통신처럼 동작하는 가짜 데이터 페칭 프로미스
  function fetchMockUsers() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(mockUserDatabase);
      }, 800); // 0.8초의 네트워크 레이턴시 인위적 부여
    });
  }
  

[!NOTE] 매번 더미 데이터를 만들기 위해 코드 상에 복잡한 Faker 라이브러리를 임포트하고 긴 데이터 생성용 일회성 함수들을 타이핑하여 번들 크기를 키울 필요 없이, 더미 데이터 생성기 도구를 활용하면 필요한 데이터 수량과 스키마 포맷을 선택하는 것만으로 클릭 한 번에 정교한 Mock JSON 소스 코드를 생성해 복사할 수 있습니다.

---

3. 무결한 API 모사를 위한 더미 데이터 유의점

1. 에지 케이스(Edge Case) 강제 반영: 이름이 유독 긴 사용자명(예: 외국인 이름), 전화번호 형식이 비어 있는 null 상태, 혹은 값이 아예 없는 빈 배열 상태 등 다채로운 비정상 예외 레코드를 가짜 데이터셋에 고의적으로 5~10% 수준 섞어주어야 프론트엔드 UI 렌더링 시 레이아웃 깨짐(Truncation)이나 자바스크립트 참조 에러(Cannot read property of undefined)를 사전에 완벽히 테스트하고 잡을 수 있습니다.
2. 관계 데이터(Referential Integrity) 보존: 게시글 데이터와 작성자 데이터를 함께 생성할 때는 게시글 객체의 authorId 값이 작성자 객체의 id 목록 중 하나와 수학적으로 확실히 일치하도록 관계 참조 정합성을 맞추어 더미를 설계해야 뷰 바인딩 오류가 발생하지 않습니다.