데이터 호출하기 fetch 함수, AJAX, JSON

백앤드로부터 데이터 받아오는 방법

1. Web API fetch()함수

2. axios 라이브러리

 

fetch()함수

• HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API
• 프로미스를 지원함
• HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달
• HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환
  • response 객체는 HTTP 응답을 나타내는 다양한 프로퍼티 제공

fetch('api주소')
 .then(res => res.json())
 .then(res => {
  //데이터 응답 받은 후의 로직
 });
 
 //ES6의 함수 선언식
 fetch('api주소')
  .then(function(res) {
    return res.json();
   })
  .then(function(res) {
   //데이터 응답 받은 후의 로직
   });

*함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있음 (각 then 뒤의 res는 서로 다른 res)

 

Method

디폴트는 get

 

response 객체

 

Web API란

https://developer.mozilla.org/ko/docs/Web/API

 

API 명세

 

Ajax

활용

추천검색어 어떻게 가능할까?

브라우저-웹서버를 통신할때 보는 ajax를 통해서 웹서버와 통신하고 있고, 이것이 가능한것이 ajax임

 

배경

1999년 microsoft가 ajax기능 탑재

2004년 google gmail가 다시 ajax가치를 활용

페이지 리로드 없이 받은 정보함의 정보를 보여줌

Asynchoronous Javascript And Xml (AJAX) 이름 명명

 

정의

자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 '웹페이지 변경에 필요한 데이터'를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식

 

불필요한 정보까지 가져오지 않고, 딱 필요한 정보만 가져오는 방법

Ajax이전에는 완전한 HTML을 전송받아 웹페이지 전체를 다시 렌더링 했음

 

네트워크 보는 법

inspect - network 보면 어떤 데이터를 주고받는지 볼 수 있음

 

JSON

• JavaScript Object Notation
• 데이터 형식의 하나 (text-based structure)
• 객체 {key : value}
• 공부 포인트
  • JSON - Object : 
    • Object -> JSON(string)
      • object를 어떻게 직렬화serialize해서 JSON으로 바꿀지
      • JSON.stringify()
    • JSON(string) -> Object
      • JSON을 어떻게 역직렬화deserialize해서 object로 바꿀지
      • JSON.parse

 

 

 

 

출처

https://opentutorials.org/module/3447

https://www.youtube.com/watch?v=FN_D4Ihs3LE&t=14s