Postman으로 API서버 통신하기

🌐 Postman으로 API서버 통신하기

안녕하세요 TriplexLab입니다 :)

오늘은 Postman에 관해서 정리 해보겠습니다. 

보통 실무에서 프론트 개발자와, 백엔드 개발자와 협업해서 같이 서버스(웹사이트)를 만들어 갑니다.

보통은 백앤드 개발자는 서버(API 서버)를 만들고, 프론트 개발자는 그것을 받아서 화면에 그려주는 역할을 합니다.

하지만 실무에서 일하다보면 백앤드 개발자분이 API 서버를 다 만들어 줄 때까지 프론트 개발자는 마냥 기다릴 수는 없는 상황이 됩니다.

그런 상황일때 Postman에서 재공 하는 mock server(가짜 서버)를 이용하면 유용할 것 같습니다.

 

Postman 로그인 하시고 들어가면 첫화면이 보입니다. 

Postman 첫 화면

mock server 만들기

다음과 깉은 순서로 화면을 클릭하면

mock server 만들기

다음과 같은 화면이 나옵니다.
요청 받을 경로를 적어주시면 됩니다. 그리고 Next 버튼을 클릭해주세요
(저는 list라는 경로를 적었습니다. )

요청 받을 경로를 적기

Mock server name을 맘대로 작성해주시고,  Create Mock Server 버튼을 클릭해주세요.

Create Mock Server

그럼 왼쪽 상단에 본인이 만든 Mock server가 나온것을 확인 하실수 있습니다.

Mock server 성공적으로 생성함.

좌측 버튼과 경로 확인

{{url}} 라는 변수명인데 저것은 바로 아래 이미지처럼
오른쪽 상단에 있는 주소가 자동으로 만들어졌고(고유한 주소입니다.)
저 주소가 {{url}}라는 변수 명으로 들어간 것이다라고 이해하면 될것 같습니다. 

고유한 주소 생성

👉 Add example 만들기

위에서 가짜 서버를 만들었습니다.
이제 우리가 테스트를 위해 가지고 올수 있는 데이터를 직접 넣어보겠습니다.

다음과 같이 버튼을 클릭해주세요

Add example 만들기

본인이 이미로 데이터를 넣으세요.
잠시 생각하고, 데이터 구조를 작성하는것이 좋습니다.

이미로 데이터 넣기

가짜 서버 만들어서, 그안에 본인이 필요한 데이터를 이미로 넣는것까지 모두 세팅끝났습니다.

 

👉 Axios 이용해서 서버와 통신하기

위에서 만든 서버를 Axios를 이용해 서버와 통신을 해보겠습니다.

<div class="body">
	<h1>판매되는 상품들</h1>
	<div class="product-list"></div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
      (function () {
        const url = 'https://4f3a9750-f9ff-44ab-bd82-758701575843.mock.pstmn.io/list';
        axios({
          method: 'get',
          url: url,
          responseType: 'json',
        })
          .then(function (result) {
            const { products } = result.data; //응답 데이터가 들어갑니다.

            let productsTemplate = '';
            products.forEach((cur, idx) => {
              const productsTemplates = `
                <div class="product-card">
                  <div>
                    <img class="product-img" src="${cur.imagesUrl}" alt="" />
                  </div>
                  <div class="product-contents">
                    <span class="product-name">${cur.name}</span>
                    <span class="product-price">${cur.price}</span>
                    <div class="product-seller">
                      <img class="product-avatar" src="./images/icons/avatar.png" alt="" />
                      <span>${cur.seller}</span>
                    </div>
                  </div>
                </div>
                `;
              productsTemplate += productsTemplates;
            });

            document.querySelector('.product-list').innerHTML = productsTemplate;
          })
          .catch(function name(error) {
            console.log('에러 발생', error);
          });
      })();
</script>

나중에 백앤드 개발자가 서버프로그램을 다 완료했다면 API URL만 바꿔주면 됩니다. 

Postman의 mock server(가짜 서버)를 이용한 방법은 실무에서 유용한 TIP으로 사용 됩니다. 

이번 포스트는 개발자의품격님의 유튜브를 보고 참고한 포스트입니다.

감사합니다. 👨‍💻