프론트엔드에서 서버 API mocking

프론트엔드에서 서버 API mocking

백엔드의 서비스를 모방하는 기술로, 실제 서버를 사용하지 않고 API 호출 프로세스를 모방한다.

API mocking을 하는 이유

1. 백엔드와의 병렬적 협업과 의존성 해소
2. 비동기 작업에 대한 정확한 재현
   • API Mocking을 활용해 다양한 케이스(로딩, 성공, 실패 등)를 재현하고 대응
3. 테스트 환경의 일관성
   - API 호출은 네트워크나 서버 등 외부 요인에 의존적이므로 테스트의 신뢰성이 떨어진다.
   
   

여러 가지 API Mocking 도구

1. JSON Server

// GET 함수 작성
const fetch = async () => {
	const response = await axios.get("http://localhost:4000/users");
};

fetch();

// POST 요청 함수 작성
const handleAddUser = async () => {
	const newUser: User = {
		id: Date.now(),
		name: `User${Date.now()}`,
	};

	await axios.post("http://localhost:4000/users", newUser);
	setUsers((prev) => [ ...prev, newUser]);
}

장점

• 쉽고 빠르게 API Mocking이 가능
• RESTful API 형식으로 실제 서버와 유사하게 동작한다.
• 응답을 브라우저 화면에서 확인 가능
• 외부 요인에 독립적으로 개발 및 테스트 가능
  
  

2. Jest

// Get 요청 함수
export const getUsers = async (): Promise<User[]> => {
	const response = await axios.get<User[]>(
	"https://jsonplaceholder.typicode.com/users"
	);
	const data = response.data;

	return data;
}

// 테스트를 위한 Jest 코드를 작성
import axios from "axios";
import { getUsers } from "../src/user";

// axios 모킹
jest.mock("axios");

// 서버의 응답 데이터를 정의
const mockedUsers = [
	{
		id: 1,
		name: "Leanne Graham",
		username: "Leanne", 
	},
	{
		id: 2,
		name: "Ervin Howell",
		username: "Ervin", 
	},
];

test("should fetch users", async () => {
	// 모킹된 axios.get()의 반환 값을 지정
	const mockedResponse = { data: mockedUsers };
	axios.get.mockResolvedValue(mockedResponse);

	// get 요청 및 테스트
	const users = await getUsers();
	return expect(users).toBe(mockedUsers);
});

장점

• 실제 네트워크 요청을 하지 않아 빠르다.
• 다양한 시나리오로 테스트 가능
• 외부 요인에 독립적으로 개발 및 테스트 가능

단점

• 응답을 브라우저 화면에서 볼 수 없다.
• 실제 네트워크 요청이 보장되지 않는다.
  
  

3. MSW (Mock Service Worker)

• Service Worker 기반의 테스트 도구
• node, 브라우저 환경 모두에서 사용 가능
• 실제 네트워크 요청을 가로채서 응답을 Mocking
  

MSW 요청 플로우

// Get 요청 handler 작성
export const handlers = [
	rest.get("https://jsonplaceholder.typicode.com/users", (req, res, ctx) => {
		return res(ctx.delay(3000), ctx.status(200), ctx.json(user));
	});
];

// 응답 모킹 데이터 작성
export const mockedUser: User[] = [
  {
    id: 1,
    name: "모킹된 Leanne Graham",
    username: "Leanne", 
  },
  {
    id: 2,
    name: "모킹된 Ervin Howell",
    username: "Ervin", 
  },
];

// Post 요청 handler 작성 
rest.post(
  "https://jsonplaceholder.typicode.com/users",
  async (req, res, ctx) => {
    const newMockedUser = await req.json<User>();
    mockedUser.push(newMockedUser);

    return res(ctx.status(201));
  }
),

장점

• 동일한 API 요청 주소로 Mocking하여 실제 API와 교체가 쉽다.
• 응답을 브라우저 화면에서 확인 가능
• 별도의 환경 없이 네트워크 요청에 대한 모의 가능
• 외부 요인에 독립적으로 개발 및 테스트
  

단점

• CRUD 로직을 직접 작성해야 하는 번거로움
  
  

4. mockoon

• eletron 기반 크로스 플랫폼 데스크톱 어플리케이션으로, 다양한 클라이언트 개발자가 사용 가능하다.
• CLIS / CORS / TLS 등 다양한 기능 지원
• 템플릿 언어를 사용하여 모킹
• 별다른 코드 작성 없이 API 모킹이 가능 → 개발에 조금 더 집중할 수 있다.
  

---

💡 OAS(Open API Specification) 란?
웹 서비스를 설명, 생성, 소비 및 시각화하기 위한 machine-readable한 인터페이스 정의 언어에 대한 사양

OAS의 특징

• 사실상 API 설계 인터페이스 표준이라고 할 수 있다.
• 사람과 기계가 둘 다 읽을 수 있다.
• 특정 언어에 종속적이지 않고, 독립적이다.

---

• Mockoon에서는 OAS를 사용 가능하다.
• Swagger를 이용해 Mock API를 생성 가능하다.
• json 파일을 다운로드 후, mockoon에서 불러오기 하면 기본적인 API 엔드포인트가 완성된다.

• Templating
  • mockoon은 더미 데이터를 만들어주는 라이브러리 faker.js와 handler가 built-in 된다.
  • 다수의 더미 데이터를 템플릿을 사용해 간단하게 만들 수 있다.
  • 예시) TodoList 20개 만들기
    

{
	"todoList": [
	{{# repeat (queryParam 'total' '20') }}
		{
			"id": {{ faker 'datatype.number' }},
			"isDone": {{ faker 'datatype.boolean' }},  
			"title": {{ faker 'address.city' }}
		}, 
	{{/ repeat }}
	]
}

• Proxy mode
  • 부분적으로 실제(개발) 서버의 API를 사용하고 싶을 때
    (= 개발 서버 도입 이후, 아직 개발이 안 된 API와 개발이 완료된 API가 공존할 때)
  • mocking은 mocking 하지 않은 요청에 대해 등록된 target url에 대해 proxy처럼 동작한다.
  • 점진적으로 mock API를 개발서버 API로 갈아 끼워넣을 수 있다.
    
    
  • 실제 이용 사례
    • 현재 기존에 계획한 기능은 구현이 완료된 상황
    • 실제 고객의 피드백을 받고, 요청받은 기능을 추가해야하는 상태
    • 담당한 회원탈퇴 기능을 구현하는데 api가 필요한 상황