환경 설정 및 요청 인터셉션

Mock.js는 프론트엔드 개발 과정에서 백엔드 API에 의존하지 않고 가상의 데이터를 생성하여 AJAX 요청을 가로채는(intercept) 데 유용한 라이브러리입니다. URL 매칭은 크게 전체 경로 매칭과 정규표현식 매칭 두 가지 방식으로 수행할 수 있습니다.

전체 URL 매칭 및 함수형 응답

요청 옵션을 분석하여 동적으로 응답을 생성해야 할 경우, 콜백 함수를 사용하여 처리할 수 있습니다.

import Mock from 'mockjs';
import { API_BASE_URL } from './config';

const mockUserAuth = (requestOptions) => {
  const { body } = requestOptions;
  const credentials = JSON.parse(body);
  
  return {
    status: 200,
    payload: { 
      token: 'mock_jwt_token_xyz_987', 
      userId: 42,
      role: credentials.rememberMe ? 'admin' : 'user'
    }
  };
};

Mock.mock(`${API_BASE_URL}/api/v1/auth/login`, 'post', mockUserAuth);

개발 환경에서만 Mock 데이터를 활성화하려면 엔트리 파일에서 조건부로 로드합니다.

if (process.env.NODE_ENV === 'development') {
  require('./mock/setup');
}

정규표현식 매칭 및 객체 직접 반환

정규표현식을 사용하면 도메인이나 불필요한 전체 경로를 생략하고 핵심 엔드포인트만 매칭할 수 있으며, 단순한 구조는 객체를 직접 반환할 수 있습니다.

Mock.mock(/\/api\/v1\/auth\/login/, {
  status: 200,
  payload: { 
    token: 'mock_jwt_token_xyz_987', 
    userId: 42 
  }
});

데이터 템플릿 문법 (Data Template Definition)

Mock.js의 핵심은 속성명|생성규칙: 속성값 형식의 데이터 템플릿 정의 방식(DTD)입니다. 이를 통해 다양한 타입의 데이터를 규칙에 따라 동적으로 생성할 수 있습니다.

문자열 (String)

// 문자열 반복 (min-max 범위)
Mock.mock({
  "uiDivider|5-15": "─"
});

// 문자열 반복 (고정 횟수)
Mock.mock({
  "listBullet|3": "• "
});

숫자 (Number)

// 자동 증가 (초기값 지정)
Mock.mock({
  "sequenceId|+1": 10000
});

// 범위 내 랜덤 정수
Mock.mock({
  "inventoryCount|10-500": 0
});

// 소수점 자리수 지정 (정수부.소수부)
Mock.mock({
  "productPrice|100-999.1-2": 0 // 100~999 사이, 소수점 1~2자리
});

불리언 (Boolean)

// 1/2 확률로 true/false 반환
Mock.mock({
  "isVerified|1": true
});

객체 (Object)

// 객체 속성 중 랜덤으로 2개 선택
Mock.mock({
  "userRole|2": {
    "admin": "관리자",
    "editor": "편집자",
    "viewer": "뷰어",
    "guest": "게스트"
  }
});

// 객체 속성 중 1~3개 랜덤 선택
Mock.mock({
  "featureFlags|1-3": {
    "darkMode": true,
    "betaAccess": true,
    "notifications": false,
    "analytics": false
  }
});

배열 (Array)

|1은 배열 요소 중 랜덤으로 하나를 선택하고, |+1은 순서대로 요소를 선택합니다.

Mock.mock({
  "activityLogs|2-5": [
    {
      "actionType|+1": ["CREATE", "UPDATE", "DELETE", "READ"],
      "targetId": "@id"
    }
  ]
});

함수 및 정규표현식 (Function & RegExp)

Mock.mock({
  baseCurrency: 'USD',
  // 함수를 통한 동적 값 계산
  exchangeRate: function() {
    return (Math.random() * 1500).toFixed(2);
  },
  // 정규표현식을 통한 특정 패턴 문자열 생성
  trackingNumber: /[A-Z]{3}-[0-9]{4}-[a-z]{2}/
});

전역 설정 및 네트워크 지연 시뮬레이션

실제 API 호출과 유사한 환경을 조성하기 위해 Mock.setup을 사용하여 네트워크 지연 시간을 시뮬레이션할 수 있습니다.

// 1초에서 3초 사이의 랜덤한 지연 시간 적용
Mock.setup({
  timeout: '1000-3000'
});

내장 데이터 플레이스홀더 (Random 유틸리티)

@ 기호를 사용하거나 Mock.Random API를 직접 호출하여 다양한 형태의 가상의 데이터를 손쉽게 생성할 수 있습니다.

기본 타입 (Basic)

Mock.mock({
  hasPromotion: '@boolean',
  userAge: '@integer(18, 65)',
  exactRating: '@float(0, 5, 1, 1)',
  randomSymbol: '@character("symbol")',
  secureToken: '@string("lower", 16, 32)',
  vowelString: '@string("aeiou", 6)'
});

// Mock.Random 직접 호출 예시
const randomNatural = Mock.Random.natural(50, 100);
const customRange = Mock.Random.range(0, 100, 5);

날짜 및 시간 (Date)

Mock.mock({
  createdAt: '@datetime("yyyy-MM-dd HH:mm:ss")',
  birthDate: '@date("yy/MM/dd")',
  customFormat: '@date("yyyy년 MM월 dd일")'
});

이미지 및 색상 (Image & Color)

Mock.mock({
  // 플레이스홀더 이미지 URL 생성 (크기, 배경색, 전경색, 포맷, 텍스트 지정)
  thumbnailUrl: '@image("300x200", "#2C3E50", "#ECF0F1", "png", "Thumb")',
  
  // Base64 인코딩된 Data URI 이미지 생성
  avatarDataUri: '@dataImage("120x120", "User Avatar")',
  
  // 랜덤 HEX 색상 코드 생성
  themeColor: '@color',
  rgbaColor: '@rgba'
});

텍스트 및 문장 (Text)

Mock.mock({
  // 랜덤 문단 생성 (1~3개 문단)
  longDescription: '@paragraph(1, 3)',
  
  // 랜덤 문장 생성 (5~10개 단어)
  shortBio: '@sentence(5, 10)',
  
  // 랜덤 단어 생성
  searchTags: '@word(3, 8)',
  
  // 랜덤 한글/중국어/일본어 등 로케일 텍스트 (확장 기능 사용 시)
  title: '@ctitle(5, 10)' 
});