[Web] Postman Mock Server 사용법

Postman - Mock Server 사용법

Mock 데이터를 받아와서 프론트엔드 통신 테스트 할 때 사용

 

1. Create workspace

서버를 만들어줄 workspace를 만든다.

Black workspace -> Next

 

2. workspace 이름 지정 후 접근 권한 설정 -> Create

일단 나만 쓸 거라서 Only me로 했다.

 

 

3. 사이드바에 Mock Server 등록

왼쪽 맨 아래 버튼 누르기 ->  Mock servers 토글 켜기

 

 

4. Mock Server 만들기

Mock servers 클릭 -> Create mock server 

 

 

Request URL에 데이터를 받아올 주소 입력 -> Next

 

 

Mock Server 이름 지정 후 Create Mock Server

 

 

5. request - example 생성

Collections에 아까 만든 Mock Server 확인 -> 오른쪽 점 세 개 클릭 -> Add request

 

 

요청에 해당하는 이름으로 수정 -> 요청 오른쪽 점 세 개 클릭 ->  Add example

1: 이름 수정, 2: example 생성

 

GET, POST 선택 후 데이터를 받아올 URL 적기

 

위의 Body - 요청할 때 같이 보내는 데이터

• raw 선택 후 오른쪽에 JSON 선택
• Body에 요청할 때 같이 보내는 데이터 입력

 

아래 Body - 응답으로 오는 데이터

• Pretty - JSON 선택
• 응답으로 받을 데이터 입력

 

 

6. axios로 해당 URL에서 데이터 요청

위의 Body에서 입력한 데이터를 URL 뒤에 넣어준다.

const getProductList = async () => {
  await axios.get('https://8ef7abb4-a56b-4eb1-a6f8-ea0868b3e6fc.mock.pstmn.io/login',
    {
      "id": "test",
      "password": "qwer1234"
    })
    .then((response) => {
      console.log(response.data);
      return response.data;
    })
    .catch((error) => {
      console.error('Error fetching data:', error);
    });
}
getProductList();

 

응답으로 받을 데이터가 잘 가져와졌다.