프론트엔드 개발자라면 누구나 한 번쯤 겪어봤을 답답한 순간이 있습니다. 바로 백엔드 API 개발이 완료되기를 하염없이 기다리는 시간입니다. 디자인 시안은 완벽하게 나왔고, 컴포넌트 구조 설계도 끝났지만, 실제 데이터를 받아와 화면에 그려보는 핵심적인 작업을 진행할 수 없어 프로젝트 전체가 지연되는 경우입니다. 기획이 변경되거나 데이터베이스 스키마가 수정이라도 되면, 이 기다림의 시간은 기약 없이 길어지기도 합니다.
이러한 '의존성 지옥'에서 우리를 구출해 줄 강력한 도구가 바로 Mock API(가짜 API)입니다. Mock API는 실제 백엔드 서버가 구축되지 않았거나, 사용할 수 없는 상황에서 실제 API처럼 동작하는 가상의 API 엔드포인트를 제공하는 서비스입니다. 이를 통해 프론트엔드 개발자는 백엔드 개발 일정에 구애받지 않고 독립적으로 데이터 통신, UI 렌더링, 상태 관리 로직을 구현하고 테스트할 수 있습니다.
이번 글에서는 Mock API가 왜 현대 프론트엔드 개발의 필수 요소로 자리 잡았는지 알아보고, 가장 대표적이고 널리 사용되는 JSONPlaceholder를 중심으로 그 사용법을 A부터 Z까지 상세하게 파헤쳐 보겠습니다. 또한, JSONPlaceholder 외에도 특정 상황에서 유용하게 사용할 수 있는 다른 Mock API 서비스들을 함께 소개하여 여러분의 개발 생산성을 극대화할 수 있는 비법을 공유하고자 합니다.
Mock API, 왜 반드시 사용해야 할까?
단순히 '기다림의 시간을 줄여준다'는 것 외에 Mock API는 개발 워크플로우에 실질적인 여러 이점을 가져다줍니다.
- 백엔드 개발 의존성 완전 탈피: 가장 큰 장점입니다. 프론트엔드와 백엔드 팀은 API 명세(Specification)만 사전에 합의하면 각자의 파트를 동시에 개발할 수 있습니다. 이는 프로젝트 전체 기간을 획기적으로 단축시키는 '병렬 개발'을 가능하게 합니다.
- 신속한 프로토타이핑 및 UI/UX 검증: 디자인만 보고 구현하는 것을 넘어, 실제 데이터가 채워졌을 때의 화면을 미리 구현하고 테스트할 수 있습니다. 텍스트가 너무 길어질 때 UI가 깨지는지, 로딩 상태는 어떻게 보여줄지, 에러 발생 시 사용자에게 어떤 피드백을 줄지 등 다양한 엣지 케이스를 조기에 발견하고 개선할 수 있습니다.
- 안정적이고 예측 가능한 테스트 환경: 실제 개발 중인 백엔드 API는 불안정할 수 있습니다. 버그로 인해 서버가 다운되거나, 데이터가 수시로 변경되어 프론트엔드 테스트에 일관성을 해칠 수 있습니다. Mock API는 항상 약속된 데이터를 정해진 형태로 반환하므로, 오롯이 프론트엔드 로직의 문제점을 찾는 데에만 집중할 수 있는 안정적인 환경을 제공합니다.
- 비용 및 시간 절감: 실제 API를 호출하며 테스트하는 것은 네트워크 비용과 서버 리소스를 소모합니다. 특히 외부 유료 API를 사용하는 경우, 테스트를 위한 호출 하나하나가 모두 비용으로 직결될 수 있습니다. Mock API를 사용하면 이러한 비용 없이 무제한으로 테스트를 진행할 수 있습니다.
이제 Mock API의 필요성을 충분히 인지했다면, 가장 쉽고 강력한 도구인 JSONPlaceholder를 통해 실전에 돌입해 보겠습니다.
세상에서 가장 유명한 Mock API: JSONPlaceholder 완전 분석
JSONPlaceholder는 "Fake Online REST API for Testing and Prototyping"이라는 슬로건을 내걸고 있는, 명실상부 가장 대표적인 Mock API 서비스입니다. 별도의 회원가입이나 인증 절차 없이 즉시 사용할 수 있으며, RESTful API의 기본적인 구조와 HTTP 메서드를 연습하기에 최적화되어 있습니다.
1. JSONPlaceholder가 제공하는 핵심 리소스
JSONPlaceholder는 실제 블로그나 소셜 미디어 애플리케이션에서 흔히 볼 수 있는 데이터 모델을 기반으로 한 6가지의 기본 리소스(Resource)를 제공합니다. 각 리소스는 복수형 명사를 사용하여 RESTful 원칙을 잘 따르고 있습니다.
/posts: 게시물 데이터 (총 100개)/comments: 댓글 데이터 (총 500개)/albums: 앨범 데이터 (총 100개)/photos: 사진 데이터 (총 5000개)/todos: 할 일 목록 데이터 (총 200개)/users: 사용자 데이터 (총 10개)
이 리소스들은 서로 관계를 맺고 있어, 실제 애플리케이션과 유사한 복합적인 데이터 호출 시나리오를 테스트해볼 수 있습니다. 예를 들어, 특정 사용자가 작성한 모든 게시물을 가져오거나, 특정 게시물에 달린 모든 댓글을 조회하는 것이 가능합니다.
2. HTTP 메서드별 사용법 완벽 정복
RESTful API의 핵심은 '자원(Resource)'을 '행위(Verb)'로 다루는 것입니다. 여기서 행위에 해당하는 것이 바로 HTTP 메서드입니다. JSONPlaceholder는 주요 HTTP 메서드인 GET, POST, PUT, PATCH, DELETE를 모두 지원하며, 이를 통해 데이터 조회, 생성, 수정, 삭제(CRUD) 작업을 시뮬레이션할 수 있습니다.
A. GET: 데이터 조회하기 (Read)
GET은 서버로부터 데이터를 가져올 때 사용하는 가장 기본적인 메서드입니다. JSONPlaceholder를 활용한 다양한 GET 요청 시나리오를 살펴봅시다.
- 모든 리소스 목록 조회
가장 간단한 형태로, 특정 리소스의 모든 데이터를 배열 형태로 받아옵니다. 예를 들어 모든 게시물 목록을 가져오고 싶다면 /posts 엔드포인트로 GET 요청을 보내면 됩니다.
# curl을 이용한 요청
curl https://jsonplaceholder.typicode.com/posts
자바스크립트의 fetch API를 사용하면 다음과 같이 코드를 작성할 수 있습니다.
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(posts => {
console.log('전체 게시물 수:', posts.length); // 100
console.log('첫 번째 게시물:', posts[0]);
// {
// "userId": 1,
// "id": 1,
// "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
// "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
// }
})
.catch(error => console.error('Fetch 에러:', error));
- 특정 ID의 단일 리소스 조회
리소스 경로 뒤에 /{id}를 붙여 특정 ID를 가진 단 하나의 데이터만 정확히 가져올 수 있습니다. 예를 들어 ID가 10인 게시물을 조회해 봅시다.
# curl을 이용한 요청
curl https://jsonplaceholder.typicode.com/posts/10
fetch('https://jsonplaceholder.typicode.com/posts/10')
.then(response => response.json())
.then(post => console.log(post));
// {
// "userId": 1,
// "id": 10,
// "title": "optio molestias id quia eum",
// "body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
// }
- 중첩된 리소스 조회 (Nested Resources)
JSONPlaceholder의 큰 장점 중 하나는 리소스 간의 관계를 활용한 조회가 가능하다는 것입니다. 예를 들어, ID가 1인 게시물(post)에 달린 모든 댓글(comments)을 조회하고 싶다면 다음과 같이 요청할 수 있습니다.
# curl을 이용한 요청
curl https://jsonplaceholder.typicode.com/posts/1/comments
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then(response => response.json())
.then(comments => {
console.log('게시물 1의 댓글 목록:', comments);
// [
// { "postId": 1, "id": 1, ... },
// { "postId": 1, "id": 2, ... },
// ...
// ]
});
반대로 특정 사용자가 작성한 모든 게시물을 조회할 수도 있습니다. ID가 2인 사용자가 작성한 모든 할 일 목록(todos)을 가져와 봅시다.
# curl을 이용한 요청
curl "https://jsonplaceholder.typicode.com/users/2/todos"
- 쿼리 파라미터를 이용한 필터링
URL의 ? 뒤에 key=value 형식의 쿼리 파라미터를 추가하여 원하는 조건에 맞는 데이터만 필터링할 수 있습니다. 예를 들어, 모든 댓글 중에서 postId가 1인 댓글들만 필터링해서 가져오고 싶다면 다음과 같습니다. (위의 중첩 리소스 조회와 동일한 결과를 반환합니다.)
# curl을 이용한 요청
curl "https://jsonplaceholder.typicode.com/comments?postId=1"
// postId가 1인 댓글과 2인 댓글을 동시에 조회
const params = new URLSearchParams({
postId: [1, 2]
});
fetch(`https://jsonplaceholder.typicode.com/comments?${params.toString()}`)
.then(response => response.json())
.then(comments => console.log('postId가 1 또는 2인 댓글들:', comments));
이 필터링 기능은 /posts 리소스에 userId를 적용하는 등 다양한 조합으로 활용될 수 있어 매우 유용합니다.
B. POST: 새로운 데이터 생성하기 (Create)
POST 메서드는 서버에 새로운 리소스를 생성할 때 사용됩니다. 요청 본문(Request Body)에 생성할 데이터의 정보를 담아 전송하면, 서버는 이 데이터를 받아 새로운 리소스를 생성하고, 생성된 리소스의 정보(주로 새로운 ID가 할당된)를 응답으로 돌려줍니다.
중요: JSONPlaceholder는 '가짜' API이므로 실제로 데이터가 서버에 영구적으로 저장되지는 않습니다. 요청을 보낼 때마다 성공적으로 생성되었다는 응답(주로 ID 101 또는 501 등 기존 데이터의 다음 번호)을 시뮬레이션하여 반환할 뿐입니다.
새로운 게시물을 생성하는 예제를 살펴봅시다.
const newPost = {
title: '새로운 게시물 제목',
body: '이것은 테스트용으로 생성된 게시물 내용입니다.',
userId: 1
};
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify(newPost), // JavaScript 객체를 JSON 문자열로 변환
headers: {
'Content-type': 'application/json; charset=UTF-8', // 보내는 데이터의 타입을 명시
},
})
.then(response => response.json())
.then(json => console.log('서버로부터 받은 응답:', json));
// 서버로부터 받은 응답:
// {
// "title": "새로운 게시물 제목",
// "body": "이것은 테스트용으로 생성된 게시물 내용입니다.",
// "userId": 1,
// "id": 101 // 서버에서 새로 할당해 준 ID
// }
curl을 사용하면 다음과 같습니다.
curl -X POST -H "Content-Type: application/json" \
-d '{"title": "새로운 게시물 제목", "body": "이것은 테스트용 내용입니다.", "userId": 1}' \
https://jsonplaceholder.typicode.com/posts
C. PUT: 데이터 전체 수정하기 (Update)
PUT 메서드는 특정 리소스의 전체 데이터를 교체(replace)하는 방식으로 수정할 때 사용됩니다. 즉, 요청 본문에 보낸 데이터가 기존 데이터를 완전히 덮어쓰게 됩니다. 따라서 PUT 요청을 보낼 때는 해당 리소스의 모든 필드를 포함하여 보내는 것이 일반적입니다.
ID가 1인 게시물의 내용을 완전히 수정해 보겠습니다.
const updatedPost = {
id: 1, // 수정할 리소스의 ID를 명시
title: '수정된 타이틀입니다',
body: '내용도 완전히 새로 작성되었습니다.',
userId: 1
};
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify(updatedPost),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then(response => response.json())
.then(json => console.log('수정 후 받은 응답:', json));
// 수정 후 받은 응답:
// {
// "id": 1,
// "title": "수정된 타이틀입니다",
// "body": "내용도 완전히 새로 작성되었습니다.",
// "userId": 1
// }
D. PATCH: 데이터 부분 수정하기 (Update)
PATCH 메서드는 PUT과 마찬가지로 데이터를 수정하지만, 리소스의 일부 필드만을 수정한다는 점에서 차이가 있습니다. 전체 데이터를 보내지 않고, 변경하려는 필드만 요청 본문에 담아 보내면 됩니다. 이는 네트워크 효율성 면에서 PUT보다 유리합니다.
ID가 1인 게시물의 title만 수정해 보겠습니다.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PATCH',
body: JSON.stringify({
title: '타이틀만 부분적으로 수정했어요!', // body나 userId는 보내지 않음
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then(response => response.json())
.then(json => console.log('부분 수정 후 받은 응답:', json));
// 부분 수정 후 받은 응답:
// {
// "userId": 1,
// "id": 1,
// "title": "타이틀만 부분적으로 수정했어요!", // title만 변경됨
// "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" // 기존 body는 그대로 유지됨
// }
E. DELETE: 데이터 삭제하기 (Delete)
DELETE 메서드는 이름 그대로 특정 리소스를 삭제할 때 사용됩니다. 삭제하려는 리소스의 엔드포인트(/resource/{id})로 DELETE 요청을 보내면 됩니다. 성공적으로 삭제되면 서버는 보통 200 OK 상태 코드와 함께 비어있는 응답 본문을 반환합니다.
ID가 1인 게시물을 삭제하는 시뮬레이션입니다.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE',
})
.then(response => {
console.log('응답 상태 코드:', response.status); // 200
return response.json(); // 본문은 비어있음
})
.then(json => console.log('응답 본문:', json)); // 응답 본문: {}
마찬가지로, 이 삭제 작업은 영구적이지 않으며, 다시 해당 리소스로 GET 요청을 보내면 데이터가 그대로 존재하는 것을 확인할 수 있습니다. 중요한 것은 DELETE 요청을 보내고 성공적인 응답(200 상태 코드)을 받는 '과정'을 테스트할 수 있다는 점입니다.
JSONPlaceholder를 넘어, 더 강력한 Mock API 서비스들
JSONPlaceholder는 기본을 다지기에 훌륭하지만, 실제 개발 환경은 더 복잡한 요구사항을 가집니다. 직접 데이터 구조를 정의하거나, 에러 상황을 시뮬레이션하거나, 응답 지연을 테스트해야 할 때가 있습니다. 이럴 때 사용할 수 있는 다른 유용한 Mock API 서비스들을 소개합니다.
1. Reqres (Request-Response)
웹사이트: https://reqres.in/
Reqres는 '실제와 같은 응답(Real-like responses)'을 모토로 합니다. 사용자 관리(목록 조회, 생성, 수정)와 로그인(성공/실패) 시나리오 테스트에 특화되어 있습니다. 특히 응답 지연(Delayed Response) 기능을 제공하여, 네트워크가 느린 환경을 시뮬레이션하고 로딩 인디케이터나 스켈레톤 UI가 올바르게 동작하는지 테스트하는 데 매우 유용합니다.
# 3초 지연된 사용자 목록 응답을 요청
curl "https://reqres.in/api/users?delay=3"
2. MockAPI
웹사이트: https://mockapi.io/
MockAPI는 JSONPlaceholder나 Reqres보다 한 단계 더 나아가, 사용자가 직접 데이터 스키마(구조)를 정의하고 자신만의 Mock API 엔드포인트를 생성할 수 있게 해줍니다. GUI 기반의 직관적인 인터페이스를 통해 프로젝트에 필요한 데이터 모델(예: 'product', 'cart_item' 등)을 만들고, 각 필드의 타입(문자열, 숫자, 날짜 등)을 지정할 수 있습니다. Faker.js 라이브러리가 내장되어 있어 사실적인 가짜 데이터를 자동으로 채워주는 기능도 매우 강력합니다.
3. Beeceptor
웹사이트: https://beeceptor.com/
Beeceptor는 단순한 Mock API 서버를 넘어 API 요청/응답을 가로채고(intercept) 검사하는 강력한 디버깅 도구의 역할까지 수행합니다. 특정 엔드포인트를 생성해두면, 그곳으로 들어오는 모든 HTTP 요청을 실시간으로 확인하고, 사전에 정의한 규칙에 따라 동적으로 응답을 조작할 수 있습니다. 예를 들어, '요청 헤더에 특정 값이 포함되어 있으면 401 Unauthorized 에러를 반환하라'와 같은 복잡한 시나리오를 손쉽게 구현할 수 있어, 예외 처리 로직을 테스트하는 데 최적입니다.
4. Mocky.io
웹사이트: https://www.mocky.io/
Mocky는 가장 빠르고 간단하게 일회성 Mock 응답을 생성하는 데 특화된 서비스입니다. 웹사이트에서 원하는 HTTP 상태 코드, 응답 헤더, 응답 본문(JSON, XML, text 등)을 직접 입력하고 'Generate my HTTP Response' 버튼만 누르면 즉시 사용할 수 있는 고유한 URL이 생성됩니다. 복잡한 리소스 관리 없이 특정 에러 상황(예: 500 Internal Server Error, 403 Forbidden)에 대한 클라이언트의 동작을 빠르게 테스트하고 싶을 때 매우 유용합니다.
결론: Mock API로 스마트하게 개발 워크플로우 개선하기
프론트엔드 개발에서 백엔드를 기다리는 시대는 지났습니다. 이제 Mock API는 선택이 아닌 필수 도구로 자리 잡았습니다. 오늘 살펴본 JSONPlaceholder와 같은 서비스들을 활용하면, 우리는 더 이상 외부 요인에 의해 개발이 중단되는 일 없이 주도적으로 프로젝트를 이끌어 나갈 수 있습니다.
Mock API를 통해 데이터 로딩, 성공, 실패, 로딩 중 등 다양한 상태에 대한 UI를 완벽하게 구현하고, 복잡한 비동기 로직을 사전에 철저히 검증함으로써 코드의 안정성과 완성도를 크게 높일 수 있습니다. 이는 결국 더 빠른 개발 속도, 더 높은 품질의 제품, 그리고 개발자 자신의 스트레스 감소로 이어질 것입니다.
아직 Mock API 사용을 망설이고 있다면, 지금 바로 브라우저를 열고 JSONPlaceholder에 첫 번째 fetch 요청을 보내보세요. 여러분의 개발 경험이 한 차원 더 높아지는 것을 느끼실 수 있을 겁니다.
0 개의 댓글:
Post a Comment