1-2. [PROJECT] POSTMAN

 

Postman 개요

 

웹 개발에서 사용하는 대표적인 클라이언트는 브라우저입니다.
브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용합니다.
브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보냅니다.
테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 합니다.

매번 코드를 작성할 수는 있습니다.
그러나 테스트를 위해 매번 코드를 작성하는 것은 상당히 번거로운 작업입니다.
매번 코드를 작성하는 것 대신에, HTTP 요청을 테스트할 수 있는 다양한 API 테스트 도구들이 있습니다.
이러한 API 테스트 도구는 클라이언트 입장에서 서버 API를 테스트하거나, API를 만드는 과정에서 매우 유용합니다.

페어와 함께 Postman을 사용하는 방법을 학습하고 API에 작성된 메서드, url로 실습해 봅니다.

---

1. Postman 사용하는 방법

페어와 함께 Postman을 설치하고 Postman을 사용하는 방법을 학습합니다.

HTTP API 테스트 도구 (CLI)

• curl (대부분의 리눅스 환경에 내장되어 있습니다.)
• wuzz

HTTP API 테스트 도구 (GUI)

• Postman
• Insomnia

이번 콘텐츠에서는 가장 사용하기 쉬운 Postman을 소개합니다.

Postman 시작하기

1. 가입 및 설치

Postman에 회원가입을 한 후, 프로그램을 설치합니다.

2. 환경 설정

• Postman을 설치하면 다음과 같은 환경을 마주하게 됩니다. Workspaces에서 My Workspace를 클릭한 후 +를 눌러 테스팅을 시작합니다. 기존에 사용한 적이 있거나, 3번째 이미지로 시작된다면 바로 테스트를 시작하세요.

[그림] POSTMAN 실행화면 1

[그림] POSTMAN 실행화면 2

[그림] POSTMAN 실행화면 3

3. 테스팅 시작

• Postman을 활용하여 HTTP 요청을 합니다.

Postman 사용하기

먼저, 이미 만들어져 있는 API 서버가 주어지는 경우를 생각해 보겠습니다. HTTP로 소통하기 위해서는 API 서버의 endpoint가 URL로 주어져야 합니다. 예를 들어, 다음과 같은 API 문서가 있다고 가정하겠습니다.

GET 요청하기

URL

https://cozshopping.codestates-seb.link/api/v3/products

메시지 조회

Request

1
GET /api/v3/products

[요청] 상품 정보를 요청 합니다.

추가적인 파라미터를 사용할 수 있습니다.

https://cozshopping.codestates-seb.link/#/V3/get_api_v3_products

 

Postman 화면 보기

다음 그림을 보고 포스트맨의 화면 구성을 확인합니다.

[그림] 포스트맨 화면 구성

1. 새로운 탭 오픈
   • 요청/응답을 여러 개 확인할 수 있습니다.
2. HTTP 메서드 선택
   • GET, POST, DELETE 등과 같은 메서드 중 하나를 선택합니다.
     • API 문서상 GET 메서드를 사용하므로, GET으로 선택합니다.
3. URL 입력 창
   • URL과 Endpoint를 입력합니다.
     • API 문서에 따르면, https://cozshopping.codestates-seb.link/api/v3/products와 같이 입력하면 됩니다.
4. HTTP 요청 버튼
   • 요청을 보냅니다.
5. HTTP 요청 시 설정할 수 있는 각종 옵션
   • 추가적인 파라미터나, 요청 본문(body)을 추가할 수 있습니다.
6. HTTP 응답 화면
   • 요청을 보낸 후 응답을 확인하세요.
7. 본문의 형식 선택 (1)
   • JSON 형식으로 보낼 때에는, raw를 선택합니다.
8. 본문의 형식 선택 (2)
   • 보낼 형식에 맞게 정확한 타입을 선택합니다.
     • JSON 형식으로 보낼 때에는, JSON을 선택합니다.
     • 앞서 1번 및 2번 과정은 HTTP 요청 헤더에 다음과 같이 작성하는 것과 동일합니다.

     1
     Content-Type: application/json

     [헤더] HTTP 요청 헤더에 전송할 데이터 타입을 입력합니다.

모든 요청 본문 입력이 완료되었다면, 요청을 보냅니다. URL과 Endpoint, 그리고 HTTP 메서드를 정확하게 입력했는지 한 번 더 확인하세요!

응답 살펴보기

한 번에 응답을 확인할 수 있다면 좋겠지만, 그렇지 않을 수도 있습니다. 다음과 같은 상황이 발생할 수 있습니다.

상황 1. 요청이 끝나지 않아요!

일반적으로 서버가 요청에 대한 응답을 하지 않는 경우, 요청이 끝나지 않습니다. 이것은 서버의 문제입니다. 만약 여러분이 서버를 만드는 중이라면, 응답 처리를 했는지 확인해 보세요!

상황 2. 기대했던 응답이 오지 않아요!

결과에 아무것도 나오지 않거나, 기대했던 값이 나오지 않았나요? HTTP 응답 코드를 확인해 보세요.

[그림] POSTMAN에서 응답의 상태코드를 확인할 수 있습니다.

위 그림의 우측 상단에 HTTP 응답 코드가 표시됩니다. 400 Bad Request라고 되어 있다면, 잘못된 요청을 한 경우일 것입니다.

어떤 결과가 나왔다면, 문제 해결의 실마리를 찾을 수 있습니다.

 

---

퀴즈)Q. Postman에서는 HTTP 메서드 중 GET 메서드만 사용할 수 있다.

A. X

Postman에서 GET, POST, PUT, PATCH, DELETE 등 다양한 메서드를 사용할 수 있습니다.

---

2. Postman으로 날씨 받아오기

개념학습

Postman with Open API

• Open Weather Map의 API Docs를 보고 Open API를 사용하여 서울(혹은 거주 지역)의 날씨를 요청하고, 응답을 확인합니다.

1. 접속

• 먼저 https://openweathermap.org/ 에 접속합니다.

2. 로그인

• 로그인합니다.
• 아이디가 없다면, 회원가입 후 로그인합니다.

3. 인증

• 회원가입 후 메일 주소로 인증 메일을 받고, 인증 절차를 진행합니다.

4. API 발급

• 로그인 후에 다음과 같이 API Keys 탭을 누르시면 기본 Default API 키가 발급된 것을 확인할 수 있습니다.

[그림] Open Weather Map의 API Key 예시

위 그림에서 확인할 수 있는 API Key는 OpenWeather에서 기본으로 제공합니다.

추가로 키를 발급하고 싶다면 Create key에 새로 발급할 API Key 이름을 추가해 Generate를 누르면 됩니다.

5. 원하는 API 탐색

• 상단 내비게이션 바의 API를 클릭하면, 사용할 수 있는 API 리스트를 확인할 수 있습니다.

[그림] 내비게이션 바에서 API 탭을 선택합니다.

Current Weather Data 카드에 있는 API Doc을 눌러 문서를 확인할 수 있습니다.

[그림] API doc 버튼을 눌러 API 문서를 확인할 수 있습니다.

'By city ID'라는 소제목의 글을 보면, 다음과 같이 URI를 확인할 수 있습니다.

[그림] 요청을 보낼 URI를 확인할 수 있습니다.

1
api.openweathermap.org/data/2.5/weather?id={city id}&appid={your api key}

[요청] 'By city ID'에서는 URI를 제공합니다.

주어진 URI와 발급받은 API 키로 날씨 데이터에 접근할 수 있습니다. 중괄호 안에 있는 city id에는 OpenWeather에서 도시마다 부여한 ID 중 하나를 입력할 수 있습니다. your api key에는 발급받은 API Key를 입력합니다. 서울의 city id는 1835848입니다.

6. API 호출

6.1. URI로 확인

데이터를 정상적으로 받아올 수 있는지, URI는 작동을 하는지 확인하기 위해 브라우저에 다음과 같이 입력합니다.

api.openweathermap.org/data/2.5/weather?id=1835848&appid={your api key}

[요청] `city id`에 서울의 id를, `your api key`에 발급받은 api key를 입력하고, 브라우저의 검색창에 입력합니다.

다음과 같은 결과가 나타난다면, 데이터를 잘 받고 있는 겁니다.

[그림] 브라우저의 검색창에 요청 URI를 입력한 결과

브라우저에서 JSON 형식의 데이터를 정리해서 보여주는 기능을 사용하면, 다음과 같이 구조적으로 데이터를 확인할 수 있습니다. 여기에서 사용된 기능 이름은 JSON Viewer입니다.

[그림] 크롬의 확장 프로그램 JSON Viewer를 설치하면, JSON 데이터 타입에 알맞은 형식으로 데이터를 확인할 수 있습니다.

6.2. Postman으로 확인

• Postman으로 날씨 데이터를 받아옵니다. URI로 확인한 데이터와 같다면 성공입니다.
  
  

데이터가 보이지 않나요?

이 API를 사용하기 위해 회원가입을 진행한 경우, 정상적인 이용을 위해 조금의 시간이 필요합니다. 30분 ~ 2시간 정도의 시간이 지난 후 다시 시도하세요.

 

---

퀴즈) Q. Open API 중 날씨 정보를 받아올 수 있는 OpenWeather에서는 API Key는 따로 필요하지 않다.

A. X

OpenWeather에서 날씨 정보를 받아오기 위해서는 API Key가 필요합니다.

api.openweathermap.org/data/2.5/weather?id={city id}&appid={your api key}

 

---