Mock 데이터 생성
랜덤 JSON · 템플릿 플레이스홀더 · 일괄 생성
Mock 생성
준비됨
ABOUT
Mock 데이터 생성 소개
플레이스홀더가 있는 JSON 템플릿 정의, 원클릭으로 여러 랜덤 테스트 데이터 생성.
프론트엔드는 백엔드 진행에 막히면 안 됩니다. Mock 생성기는 템플릿으로 구조가 올바른 JSON을 일괄 생성, 실 API 준비 전 리스트·폼·차트 컴포넌트 개발·시각 검수 가능.
DEEP DIVE
Mock 데이터 생성 자세히 알아보기
프론트엔드는 백엔드 API 미준비로 자주 블로킹. Mock 생성기는 JSON 템플릿·플레이스홀더로 랜덤하지만 구조적으로 올바른 테스트 JSON 일괄 생성. JSONSort Mock은 로컬 생성, 문자열·숫자·불리언·배열 길이 등 랜덤 규칙 지원.
플레이스홀더는 JSON 임의 계층에 중첩 가능, 한 번 정의로 N개 레코드 배열 생성, Mock Server·컴포넌트 props 데이터 소스로 바로 사용.
플레이스홀더 구문은 JSON 문자열 값 내에서 동작, 필드명 의미에 따라 랜덤 전략(name → 인명, email → 이메일 형식 등). 고정 필드는 플레이스홀더 없이 각 레코드에 반복, status·type 등 enum 상수에 적합.
FEATURES
핵심 기능
템플릿 플레이스홀더
JSON 템플릿에 플레이스홀더 구문, 랜덤 값 생성.
일괄 생성
수량 지정, 여러 Mock 레코드 배열 한 번에 생성.
타입 랜덤
문자열, 정수, 부동소수점, 불리언, UUID, 날짜 등 랜덤 타입.
구조 유지
생성 데이터는 템플릿 JSON 구조를 엄격히 따름.
즉시 미리보기
템플릿·수량 변경 즉시 재생성.
로컬 생성
Mock 데이터는 서버 경유 없음, 프로토타입 단계 안심 사용.
일괄 건수
N건 한 번에 생성, 페이지네이션 total 데이터량 시뮬레이션.
구조 제약
출력은 템플릿 JSON Schema 형태 엄격 준수, 여분 키 없음.
HOW TO USE
사용 방법
-
1
JSON 템플릿 작성 또는 붙여넣기
-
2
생성 수량 설정
-
3
Mock 데이터 배열 복사
-
4
예시 데이터 버튼으로 입출력 형식 빠르게 파악
-
5
결과를 클립보드에 복사하거나 다른 JSONSort 도구와 연계
WORKFLOW
일반적인 워크플로
데이터 가져오기부터 결과 내보내기까지의 전체 흐름. 팀에서 Mock 데이터 생성 사용법 통일.
템플릿 정의
JSON 객체 작성, 문자열 값을 {{field}} 플레이스홀더로 변경.
수량 설정
생성 건수 지정, 배열 출력 미리보기.
템플릿 미세 조정
UI 요구에 맞게 필드·플레이스홀더 타입 조정.
fixtures 내보내기
src/mocks/ 또는 MSW handler에 복사.
USE CASES
적용 시나리오
프론트엔드 개발
UI 개발 단계 리스트·상세 페이지 Mock 데이터 생성.
테스트 엔지니어
경계 테스트 데이터: 빈 배열, 초장 문자열, 특수 문자.
제품 데모
Demo 환경 realistic 가짜 데이터 채움, 빈 페이지 방지.
백엔드 개발
API 문서 예시 데이터 일괄 생성, Swagger 설명에 삽입.
UI 개발
Storybook stories에 20건 리스트 Mock 데이터.
부하 테스트
대량 JSON 생성, 프론트엔드 가상 스크롤·메모리 성능 테스트.
TIPS
사용 팁
- 「코드 생성」으로 실 API 샘플에서 구조 획득 후 필드를 플레이스홀더로 Mock 템플릿.
- 리스트 Mock은 10~20건 일괄 생성, 페이지네이션·스크롤 테스트.
- 플레이스홀더 이름으로 타입 암시: {{name}}, {{age}}, {{email}} 등.
- 생성 후 포맷터로 구조 확인, Mock Server 가져오기.
- JSON 포맷터 연동: Mock 출력 → 포맷 → fixtures 디렉터리 복사.
- Mock에 실 사용자 PII 사용 금지, 로컬 개발이라도.
- 템플릿은 코드 생성 도구에서 먼저, 값을 {{placeholder}}로 변경.
- id 필드는 {{uuid}}로 리스트 key 충돌 방지.
- 경계 테스트: 0건·1건·1000건 각각 UI 검증.
- Mock 데이터에 fake_ 접두사, 실 데이터와 혼동 방지.
LOCAL VS ONLINE
로컬 vs 온라인 도구
JSONSort는 순수 프론트엔드 아키텍처를 고수합니다. 아래 비교가 개발 데이터 처리에 로컬 도구가 적합한 이유를 보여줍니다.
TROUBLESHOOTING
흔한 오해 및 문제 해결
실제 사용에서 자주 발생하는 문제와 권장 대처법. 시행착오 시간을 줄입니다.
플레이스홀더 미치환
권장:문자열 값 내 {{name}}만. 비문자열은 치환 안 됨.
타입 불일치
권장:숫자 필드에 플레이스홀더는 템플릿에서 문자열로 쓰고 후처리, 또는 고정 숫자.
배열 구조 불일치
권장:템플릿은 단일 구조, 생성기가 배열로 래핑.
PII 컴플라이언스
권장:Mock이라도 실명·휴대폰 번호를 템플릿에 쓰지 마세요.
FAQ
자주 묻는 질문
플레이스홀더 구문은?
문자열 값에 {{fieldName}} 형태, 생성기가 랜덤 값으로 치환.
특정 필드를 고정할 수 있나요?
플레이스홀더 없는 필드 값은 각 레코드에 그대로 유지.
생성 수량 상한?
브라우저 메모리에 따름, 보통 수백 건 무리 없음.
랜덤 seed 고정?
페이지 새로고침마다 재랜덤. 고정 seed는 생성 결과 저장.
중첩 배열 Mock 가능?
가능. 중첩 객체 내에도 플레이스홀더 문자열 사용.
데이터가 서버에 업로드되나?
아니요. JSONSort 모든 도구는 브라우저 로컬에서 동작하며 입력 내용은 백엔드 서버로 전송되지 않습니다.
가입이나 설치가 필요한가?
필요 없습니다. 페이지를 열면 바로 사용 가능, 계정·클라이언트 다운로드 불필요, PWA 오프라인 캐시 지원.
얼마나 큰 파일을 지원하나?
브라우저 메모리에 따라 다르지만 보통 수 MB급 데이터를 원활히 처리합니다. 초대형 파일은 먼저 분할하거나 병합·정리 도구를 사용하세요.