[Vue.js] Mock 서버 준비하기_ch.6

목차

• Postman 설치
• Mock 서버 생성
• API 반환 데이터 설정

 

 

 

 

Postman의 Mock 서버를 생성하여 서버 환경이 준비되어 있지 않더라도 효율적으로 프론트엔드 개발을 진행하기 위한 방법 중 하나인 Mock(가짜) 서버를 사용하는 방법에 대해 알아보자. 

일반적으로 Postman은 개발된 API가 제대로 동작하는지 테스트 용도로 많이 사용되는데, 그런 용도 외에도 매우 많은 기능을 제공한다. 그런 유용한 기능 하나가 바로 Mock 서버이다. 

 

 

Postman 설치

https://www.postman.com/download 

https://www.postman.com/download

 

 

Mock 서버 생성

Create New 메뉴를 클릭하여 팝업이 나타나면 Mock Server를 클릭한다.

Create a new API가 활성화 되고, Request URL에 'test'라고 입력하여 path를 설정한다. Next 버튼이 활성화되면 클릭한다. 

Mock 서버의 이름을 입력한다. Create Mock Server를 클릭하면 Mock 서버가 생성된다. 

Send a request to mock server URL이 나중에 Vue 컴포넌트에서 호출하게 될 서버 URL이다. 

 

 

API 반환 데이터 설정

Body 부분을 원하는 데이터 포맷으로 작성해서 저장하면 하나의 테스트 API가 완성된다.

JSON 포맷을 선택하고 아래와 같이 입력한 다음 Save 버튼을 클릭하여 저장해 보자.

Mock 서버 API에 샘플 데이터 추가

Run 버튼을 클릭한다.

Run 버튼을 클릭하면 팝업 창에서 선택한 Mock 서버에 대한 Collection Runner가 보이게 된다.

Mock 서버 실행

Run Mock Server 01 을 클릭하면 아래와 같이 Mock 서버가 실행된다. 이제 앞으로 구현할 Vue 컴포넌트에서 Mock 서버의 API를 호출할 수 있다.

Mock 서버 실행 상태 확인

Mock 서버에 추가한 각 API에 대한 호출 url은 하단의 Console 창을 클릭하면 확인할 수 있다.

Mock 서버 API 호출 url 확인

 

 

 

 

다음 장에서는 이제 본격적으로 Vue 컴포넌트에서 호출해서 사용해 보겠다. 

 

 

 

 

 

 

 

※ 출처 고승원, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭, p128-137.