팀 프로젝트를 진행하면서 본격적으로 서버와 API 를 연동하기 전에 내가 쓴 코드가 API 연동 시 오류가 없는 지 테스트해 보고 싶어서, postman의 Mock server를 이용해 봤다.

Mock server를 이용하면서 배우고, 겪은 오류들에 대해 정리해 보려고 한다.

포스트맨은 개발자들이 API를 디자인하고 빌드하고 테스트하고 반복하기 위한 API 플랫폼이다.

Mock Server란 실제 서버처럼 요청을 받고 응답을 주는 가짜 서버이다.

1. postman 의 Mock server 만들기

1) workspace 생성

workspace 버튼을 눌러서 내가 Mock server와 해당 Mock server에서 이용한 API를 관리한 workspace를 생성한다.

2) Mock server 생성

Mock server 아이콘을 눌러서 운영할 Mock server를 생성한다.

collection은 API 문서들의 모음이고 {{url}}은 해당 Mock server의 주소를 의미한다.

3) API Request 생성

Mock server를 생성하면, Mock server 의 이름과 같은 collection 에 담겨지고 해당 collection에서 Mock server 생성 당시 적은 request 들이 담겨진다.

Mock server에서 실행된 API 들을 만들기 위해서는 우선 postman의 collection과 request에 대해 알아야 한다.

(이거를 제대로 알지 못하고 무턱대고 API 만들다가 오류가 왜 일어났는지 한참을 헤멨었다.....😢)

A. collection

collection은 example로 이루어진 requset들로 구성된다.

example은 하나의 요청에 대해 이루어 질 수 있는 request와 그에 대한 response의 샘플이라고 생각하면 된다.

위의 사진을 예로 설명하면, cherish_mock_server라는 collection에는 request method가 post인 login request가 있고 요청 성공 시에 대한 example인 succes 와 실패 시의 example인 fail 이 있다.

login request를 보낼 때, request는 등록된 example에 따라 response를 보여주고, request에 맞는 example이 없으면 response는 404 에러 메세지를 보여준다.

request는 해당 collection의 메뉴를 눌러서 추가할 수 있다.

B. request -example

example 생성

"Add example" 버튼을 누르면 새로운 example을 추가할 수 있다.

example 구조

example은 request method, request path 를 설정하는 부분, request의 params, headers와 body를 설정하는 부분 그리고 response의 body와 headers를 설정하는 부분으로 이루어져 있다.

{{url}}은 해당 Colllection을 연동 시킨 Mock server의 주소이기 때문에 Path는 '{{url}}/내가 원하는 path'형식으로 지정해주면 된다.

save 버튼은 작성한 example를 request의 샘플로 등록시키는 버튼이다.
해당 example 대로 API를 실행시키고자 한다면 꼭 save를 통해 exapmle을 등록시켜주어야한다.

Try 버튼을 누르면 example을 등록 시킨 request가 해당 example 대로 requset를 보내도록 시도해 결과가 example에 작성한대로 결과가 나오는 지 확인 할 수 있다.

4) Cookie (쿠키)

서버에게 쿠키를 받고 싶다면 어떻게 해야할까?
postman은 쿠키를 생성할 수 있는 기능을 제공하고 있어서 response에 cookie를 보낼 수 있다.

A. Cookie 생성

cookie 가 필요한 request 으로 가면, 파란색의 Cookies라는 버튼을 찾을 수 있다.

해당 버튼을 눌러서 Cookie 관리 모달에서 쿠키를 보낼 도메인 이름을 작성한 후 Add domain 버튼을 누르면 해당 도메인에 대한 쿠키들을 관리할 수 있는 영역이 생기고, 그 영역의 Add Coookie 버튼을 눌러서 내가 원하는 쿠키를 만들면 된다.

B. resonpse에 쿠키 보내기

쿠키를 보낼 request의 example로 가보자.

a. Set-Cookie

그 example의 response headers에 key가 'Set-Cookie'를 추가하고, value에 1)에서 생성한 Cookie 값을 넣어주면 된다.

b. Access-Controll-All-Contents , Access-Control-Allow-Origin

서버에서 쿠키를 받기위해서는 클라이언트는 요청에 cretentials 옵션을 추가해 주어야하한다.

feth 사용 시 cretentials: "include"

fetch("https://example.com", {
  credentials: "include",
});

axios 사용 시 withCredentials = true;

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

서버는 credentials 에 대한 요청을 처리하기 위해서 Access-Control-Allow-* 헤더 값들 설정해야한다. 그 중에서 Access-Control-Allow-Credentials 항목을 true로 Access-Control-Allow-Origin의 값이 반드시 설정해야 한다.

• Cookie를 클라이언트에게 주기 위한 response headers 설정 예시
  

🚨 개발 환경에서의 CORS 오류

위와 같이 request와 response를 설정하고 개발 환경에서 request 요청 에 대해 CORS 오류가 떴다????

그건 npm start, yarn run dev등으로 실행하는 개발 환경에서는 도메인은 설정할 수 없는데, 특정 도메인을 Origin으로 설정해 특정 도메인에 대한 요청을 받은 서버에 요청하면 CORS 오류가 뜬다.

그러면 어떻게 해야할까? 개발환경에서 CORS 오류를 해결하는 방법으로
추천하는 것은 Proxy 서버를 이용하는 것이다.

CRA로 만드는 React 프로젝트의 경우는 package.json 파일에서, Vite로 만드는 React 프로젝트는 vite.config.js 에서 Proxy서버를 설정할 수 있고 Proxy 서버를 위해 많이 사용하는 http-middle-ware모듈을 사용할 수 있다.

• 🖱️ React 개발 환경에서 Proxy 서버를 통한 CORS 오류 해결에 대한 추천 글
  React 개발 서버 CORS 해결하기 with Proxy

2. Mock server와 API 연동하기

Mock server 를 다 만들었다면 Mock server와 API 연동을 하는 것은 아주 쉽다. fetch를 이용하든, axios를 이용하든 path에 해당 요청에 맞는 Collection의 request에서 지정한 path를 넣어주면 된다.

만약에 response 별로 다른 구현이 필요하다면, 어떻게 해야할까?
나는 response 별로 다른 exapmle을 만들고 (path과 response의 body의 message만 변경해주면 된다.) 클라이언트의 request의 path를 수정하는 방법을 택했다.

프로젝트에서 진행한 간편가입 페이지의 이메일 인증을 예시로 들면,
이메일 인증 요청을 보냈을 때 서버는 다음과 같은 response를 보낸다.

response case

• case1 인증 요청 성공 (response.status :200)
• case2 인증 요청 실패 ( reseponse.status : 400)
  • case2-1 이미 가입 된 이메일 인 경우
  • case 2-2 과도한 이메일 인증 시도로 이메일 인증이 5분간 금지된 경우
  • case2-3 5 분간 금지 이후에도 과도한 이메일 인증을 시도한 경우 하루 간 동일한 이메일로 인증 금지

나는 각각의 response case 별로 requset example을 만들고, 각 example의 path에 각 상황에 맞추어 path를 추가로 넣어주었다.

• 이메일 인증에 대한 postman의 request와 example들
  

case	example	path
case1	success	{{url}}/email
case2-1	error_duplicat	{{url}}/email/duplicate
case2-2	error_pause	{{url}}/email/pause
case2-3	error_over	{{url}}/email/over

그러고 클라이언트에서 요청 시 path를 수정해서 각각의 상황에 맞추어 구현이 제대로 이루어지는지 테스트를 진행했다.

저렇게 response의 경우 대로 example을 만들어 놓으면 나중에 테스트를 또 진행해야할 경우 아주 편하다. 👍

3. 마무리

Mock server를 처음으로 사용해 보면서 postman에 대해 잘 정리된 글과 영상들을 찾아 봤지만, request 와 example이 어떤 관계인지, example에서 request는 어디서 작성하고 response는 어디서 작성하는 지에 대한 설명들은 생략되어 있어서 직접 시도해 보면서 그것들을 깨닫느라고 애를 먹었고 서버로 쿠키를 받아오기 위한 request에서 CORS 오류가 났을때 origin을 제대로 설정했음에도 오류가 나는 원인을 정확하게 몰라서 애를 먹었었다.
(로컬 환경도 origin으로 설정되는 줄 알았어 ...😞 )

postman의 Mock server는 이 글에서 작성한 것외에도 API를 자동으로 테스트 해주는 등의 postman은 다양한 기능을 제공한다.
백엔드 개발자의 경우 API를 테스트하기 위해서 postman을 많이 사용하는 것 같았다.
프론트 엔드의 경우에는 이 글에 있는 정도면 서버와 API를 연동하기 전 테스트를 위한 도구로 충분히 사용할 수 있지 않을까 생각한다.