API fetch 21.03.29

29 Mar 2021 in Dev on Java Script

fetch를 이용해 서버에 요청하기

서버(server) : resource를 제공하는 주체
클라이언트(client) : resource를 요청하는 프로그램(웹 브라우저, 앱 등)
API(Application Programming Interface) : 서버가 클라이언트에게 리소스를 잘 활용할 수 있도록 제공하는 인터페이스
Open API: 누구나 사용할 수 있도록 공개된 API
API 키 : API를 이용하기 위해 필요한 키

[API 사용시 유의 사항]

모든 API가 무료는 아니다.
서비스 제공자로부터 권한을 받아야 한다
그러므로 API Key는 암호처럼 취급되어야 합니다.

ex code :

let ApiKey = 'bc4818cb3aa21cd77cba9e3168dceca4'

let weatherApi = `https://api.openweathermap.org/data/2.5/weather?q=seoul&appid=${ApiKey}`;
// API Key는 암호처럼 취급되어야 합니다.

fetch

fetch : 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 Method.

fetch를 통해 DATA를 요청하고 받아오는데 시간이 걸리므로 .then을 함께 써준다.

.then : then은 앞에 있는 작업이 끝난 후에 실행이된다.

// API 서버에서 JSON 데이터 가져오기
  fetch(API가 할당된 변수명 또는 API) // fetch를 통해 API에 DATA 요청
  .then(function(response) { // 시간이 걸리므로 then을 써서 fectch가 완료될 때 까지 기다려준다. 
    return response.json(); 
    // fetch 요청을 통해 받아온 응답을 json화(JSON.parse()와 비슷한 역할)
    // 즉, string 타입인 response를 object로 변경.
    // (response는 파라미터라 이름 변경 가능)
  })
  .then(function(data) { // 위에서 return한 resp.json의 객체 데이터를 가져온다. 
	// 실행할 코드
    // 가져온 DATA와 관련하여 실행할 코드 작성
    console.log(data);
  });

보통 API의 데이터 파일은 string으로 되어있으므로 API를 요청해서 응답받은 데이터를 object로 변경해줘야한다.

event - enter key와 연결하기

const input = document.querySelector('input');
// 엔터키는 보통 로그인 창 또는 검색창에서 검색한 후 사용하므로
// button이 아닌 input에 event를 연결해줘야 한다.

let enterKey = function(event) {
  if(event.keyCode === 13) { // 또는 event.keyCode === 'Enter'
    // 실행 할 코드
    searchFunction();
  }
}

// 요소와 이벤트 연결
input.addEventListener('keyup', enterKey);