• mock 디렉터리 아래, 리소스 단위로 디렉토리를 만들고 index.js 파일 생성
• 파일에는 아래와 같이, 요청 경로에 대한 mock 데이터 및 응답 코드 등을 설정

function getRooms(mock) {
    mock.onGet('/rooms')
        .reply(200, {
            rooms: [{ id: 1, text: 'hello world' }, { id: 2, text: 'hi' }]
        });
}

function createRooms(mock) {
    mock.onPost('/rooms')
        .reply(201, {
            id: 23, text: 'good'
        });
}

export default {
    getRooms, createRooms
};

// or

function init(mock) {
    mock.onGet('/rooms')
        .reply(200, {
            rooms: [{ id: 1, text: 'hello world' }, { id: 2, text: 'hi' }]
        })
        .onPost('/rooms')
        .reply(201, {
            id: 23, text: 'good'
        });
}

export default { init };

• 이후, mock 디렉터리 바로 아래에 있는 index.js 파일에 방금 선언한 모듈 추가

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Room from './room'; // 1. 위 '/room' 경로에 있는 index.js 파일의 모듈 임포트

function init() {
    if (process.env.NODE_ENV === 'development') {
        const functions = Object.values({ ...Room }); // 2. 함수 추가
        const mock = new MockAdapter(axios);
        functions.forEach((func) => func(mock));
    }
} 

export default init; 

• 만약 chat 모듈을 추가했다면, 아래와 같이 추가

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Room from './room';
import Chat from './chat'; 

function init() {
    if (process.env.NODE_ENV === 'development') {
        const functions = Object.values({ ...Room, ...Chat });
        const mock = new MockAdapter(axios);
        functions.forEach((func) => func(mock));
    }
}

export default init; 

• 자세한 mock 설정은 아래 링크 참고

axios-mock-adapter

Client => Server
Client <= Server

Client /rooms => Client-Mock [{id:1 , message: "eresr"}]
Client /rooms <= Client-Mock [{id:1 , message: "eresr"}]