Postman Mock Server & API

아직 동작하지 않는 API에서 데이터를 받는 테스트를 해야할 때 Postman은 유용한 도구다. 백엔드와 본격적인 연동을 할 수 없는 상황에서 가상의 서버를 만들어 데이터를 받는 것이다. 이 가상의 서버를 Mock Server라고 한다.

 

Mock Server & API 만들기

Postman에서 원하는 워크스페이스에 접속한 후 Collections에서 + 버튼을 눌러 새 Collection을 만든다.

 

Collection을 만든 후에는 Add a request를 클릭해 새 request를 생성해 준다.

 

그리고 Add example로 Example을 추가해 주면 API 준비가 끝난다.

 

Mock Servers 탭에서 새 Mock Server를 만들어 준다.

 

생성 페이지에서 Select an existing collection을 선택하고, 아까 만들어 둔 Collection(New Collection)을 선택한다.

 

이제 Mock Server의 이름을 정한 후 Create Mock Server 버튼을 눌러 서버 생성을 완료한다.

 

그럼 이제 Mock Server가 완성됐다! 서버의 URL을 복사해 아까 만든 request의 내용을 채워보자.

 

사용할 HTTP 메서드를 지정하고(예시에서는 GET) URL을 작성한다. URL은 방금 생성한 Mock Server 주소에 원하는 API 주소(예시에서는 /test)를 더해주면 된다. 헤더 입력이 필요하면 헤더도 입력해 준다(예시에서는 안함).

 

Body 내용을 입력해 준다.

 

그리고 example 위의 request에 같은 URL을 입력한 후 Send 버튼을 눌러 request를 보내보면 위 이미지와 같이 하단에 Body가 잘 전달되어 나타난다. 원하는 결과를 얻었다면 API 준비는 끝난 것이다.

 

React 테스트

axios를 이용해 Mock Server에 GET request를 보내 결과를 확인해보자.

const [testData, setTestData] = useState([]);
  const fetchTestData = async () => {
    const response = await axios.get("https://(Mock Server 주소)/test");
    setTestData(response.data);
  };
  useEffect(() => {
    fetchTestData();
  }, []);
  console.log(testData);

위와 같이 테스트 데이터를 콘솔에 출력하는 코드를 작성하고 실행하면

Postman에서 입력했던 데이터가 잘 전달된 것을 확인할 수 있다.