API (feat. curl, Fetch, 포스트맨)

💫 오늘의 학습 키워드
* 포스트맨
* fetch
✔️ TMDB, 공공데이터, OpenWeather API   ⇒  각각 다른 api 문서의 형태를 확인해보고, 사용해보자!

 

 

1)  카카오 API 예시

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

 

— CURL

• Client URL의 약자.
  
  
• API에서 웹사이트나 서버에 요청을 보내고 응답을 받을 수 있다. 명령어 한 줄로 간단하게 API와 대화할 수 있게 해주는 도구.예를 들어, 웹에서 데이터를 가져오거나 보내고 싶을 때 curl을 사용한다.
  
• 모든 API 문서에 필수로 들어가 있다. 공통표준! CURL에 명시되어 있는 것들은 필수조건!
  ⇒ 내용이 누락되면 서버가 bad request로 인지하고 400번 오류를 보낸다.

• 요청메시지 : POST (http메서드) ⇒ 요청을 보낼 때 url의 바디에 데이터를 담아서 보낸다. 서버의 값이나 상태를 변경하기 위해 사용. (e.g. 게시글 작성 등..)
• https://kauth.kakao.com/oauth/token : 여기서는 URI 이자 URL, End point
• -H : Header. : (콜론)으로 구분 짓는다.
• -d : Body. = (이퀄)로 구분 짓는다.
• —data-urlencode : url 인코디드. (인코드 : meta charset=”UTF-8”처럼 기계가 인지할 수 있는 언어로 변환해주는 작업.)
• "Content-Type: application/x-www-form-urlencoded"가 Header로 들어가면, —data-urlencode가 적용되어 알아서 인코딩 해준다.

 

 

(*참고)
💡 https://hoyeonkim795.github.io/posts/rest_api/     REST API 란? ( GET과 POST의 차이 )
💡 https://velog.io/@torang/URL과-URI의-차이점          URL과 URI의 차이점

 

---

2) 공공데이터

http://data.go.kr/data/15073885/openapi.do       

 

 

• 요청메시지 : GET (http메서드) ⇒ Post와 달리 요청을 보낼 때 url의 헤더에 데이터를 담아서 보낸다. ? 뒤에 데이터가 붙어 요청을 보내기 때문에 데이터의 크기가 제한적.
• URL : http://apis.data.go.kr/B552584/UlfptcaAlarmInqireSvc/getUlfptcaAlarmInfo
• ? 뒤 : 쿼리 파라미터 (앤퍼센트로 구분)
  

---

 

3) TMDB

https://developer.themoviedb.org/reference/intro/getting-started

 

• 요청메시지 GET
• 공공데이터와 달리 Header에 Authorization, Bearer이 명시되어 있는데 이것을 토큰 (JWT 토큰)이라고 한다.
• Header의 accept :  'application/json 타입으로 받겠다.'는 의미 (= 요청보낼 때 application/json으로 보내!)
  보통 accept 혹은 더 직접적인 content type으로 명시한다.

 

— Postman

• API 개발, 테스트, 문서화, 협업을 효율적으로 수행할 수 있도록 도와주는 종합적인 API 플랫폼
• Postman으로 API가 정상적으로 응답하는지 확인 한 이후 서비스함수 작성해보기.
  

Postman을 어떤 단계에서 사용?

API 문서를 먼저 살펴본 후, 서비스 함수 코드를 작성하기 전에 API가 잘 응답하는지 테스트해보는 단계로 사용한다. Postman에서 응답이 잘 나오는 지 확인한 후 Fetch로 서비스함수를 작성한 후에 리팩토링한다.

장점

• code snippet 에서 curl을 다른 코드로도 변환해줌 (e.g. javascript – fetch, node.js – axios 등등)
• 어차피 서비스함수로 변환(리팩토링)하긴 해야하긴 하지만 변환할 때 참고하기 좋고 급할 때 써볼 수 있다.
• Postman에서 API 자료가 쌓이면 나중에 백엔드를 할 때도 참고자료로 활용 할 수 있다(이 API에서는 이렇게 요청하고, 이렇게 응답받고 프론트에서 이렇게 처리를 했구나~)

사용법

Postman에 Get URL 입력하면, 자동으로 쿼리 파라미터가 입력된다.

 

Header의 accept: */* (모든 걸 받겠다.)

 

 

또 다른 Header에 Authorization, Bearer (JWT토큰) 을 넣어줘야하는데

 

Authorization에서 Auth타입과 토큰을 각각 명시해줘야 한다. ⇒ 귀찮음

 

---

📌 TIP 

상위 컬렉션(부모)의 Variables에서 토큰을 변수화 시켜주고

⬇️

Authorization에서 변수 {{TOKEN}} 으로 받아온 후,

⬇️

그 밑의 자식 폴더, 파일에서 Authorization을 상속받게 한다!

 

---

 

 

{ } 동적경로 ⇒ url 붙여줄때 동적경로 앞에 콜론을 붙여준다.

 

 

 

 

 

📌 매번 api 사이트의 리퀘스트 파라미터를 확인하기 힘드니, postman에서 description으로 한번 정리해놓으면 그 키의 의미를 편하게 확인할 수 있다!  (공공 api를 postman에 옮겨놓는 작업. postman에서 확인 해보는 연습 )

 

(*참고)
💡 https://kometa.wiki/en/latest/files/builders/tmdb/#sort-options      TMDB 쿼리파라미터 key값에 대한 설명

 

---

OpenWeather

https://openweathermap.org/current

 

navigator.geolocation.getCurrentPosition((position) => {
	console.log(position)
});
//웹에서 지원해주는 API. console에서 바로 확인 가능

 

💡 (*참고)
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API      geolocation : 웹에서 지원해주는 api