section28-AJAX와API

 

topic		explain	class
AJAX	AJAX	form태그와 promise가 많이 생각이 난다. AJAX는 페이지에 데이터를 요구한다. 페이지가 로딩이 된 후 데이터를 요청할 수 있 다. 검색할 때 실시간으로 데이터를 요청할 수 있다. 필요한 개념은 포맷팅을 알아야한다.	AJAX개요
	API	*앤드포인트 요청을 주고 받을 수 있는 통신(?)수단(?)같은 것. JASON과 아주 밀접한 관계가 있다.	APIs개요
	JASON	XML은 과거에 많이 사용햇다. JASON.parse(data)를 이용해서 JASON구조화 하면 된다.	JASON이란?
		//THIS IS A STRING OF JSON (NOT AN OBJECT) const data = `{"ticker":{"base":"BTC","target":"USD","price":"11288.49813464","volume":"91769.69699773","change":"-46.29462447"},"timestamp":1596510482,"success":true,"error":""}` // THIS IS A JS OBJECT const parsedData = JSON.parse(data);
POSTMAN		*Proxy : 프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 '프록시', 그 중계 기능을 하는 것을 프록시 서버라고 부른다.	Using Hoppscotch(or Prostman) https://hoppscotch.io/ https://www.postman.com/downloads/ {API} https://swapi.dev/ https://catfact.ninja/
		동사마다 역할 이 다르다. get, post, put, patch, delete, copy, head, options,link,unlink,purge,lock,unlock,propfind,view	HTTP Verbs(동사)
		*리디렉션 쿼리문자열 -> 'q='	HTTP Status Codes https://developer.mozilla.org/en-US/docs/Web/HTTP/Status {API} https://www.tvmaze.com/api
		Headers : 헤더의 역할은? HTTP 요청 헤더(Headers)는 클라이언트가 서버로 HTTP 요청을 보낼 때 추가적인 정보를 제공하는 역할을 합니다. 이러한 정보들은 요청의 메타데이터로서, 요청의 목적이나 특징을 서버에 전달합니다. HTTP 요청 헤더에는 다양한 정보들이 포함될 수 있습니다. 일반적으로 사용되는 헤더는 아래와 같습니다. User-Agent: 클라이언트의 브라우저나 애플리케이션 정보를 포함합니다. Accept: 클라이언트가 받아들일 수 있는 데이터 타입을 서버에 전달합니다. Content-Type: 클라이언트가 서버로 전송하는 데이터 타입을 서버에 전달합니다. Authorization: 인증 토큰과 같은 보안 인증 정보를 서버에 전달합니다. 이 외에도, 사용자 정의 헤더를 추가하여 요청에 필요한 정보를 전달할 수 있습니다. 서버는 요청 헤더를 확인하여 클라이언트의 요청에 대한 처리 방법을 결정하게 됩니다.	HTTP Headers
	XHR	XHR이란  XHR은 "XMLHttpRequest"의 약자로, JavaScript에서 서버와 HTTP 요청을 보내고 응답을 받을 수 있는 API입니다. XHR을 사용하면 페이지 새로고침 없이도 서버와 데이터를 주고받을 수 있습니다. 예를 들어, AJAX 기술을 사용하여 사용자가 입력한 내용을 서버에 전송하고 서버에서 처리한 결과를 다시 받아와서 페이지를 갱신할 수 있습니다. 이를 통해 사용자 경험을 개선하고 서버의 처리 부담을 줄일 수 있습니다. XHR은 이제 Fetch API와 같은 다른 API로 대체되어 사용되지 않는 경우가 많습니다.	MakingXHRs
		데이터 요청하고 가져오기 const req = new XMLHttpRequest(); req.onload = function () {   console.log("IT LOADED!!")   console.log(this);   const data = JSON.parse(this.responseText);   console.log(data.name, data.height); } req.onerror = function () {   console.log("ERROR!!")   console.log(this); } req.open("GET", 'https://swapi.dev/api/people/1'); req.send();
Using The Fetch API	then	fetch('https://swapi.dev/api/people/1')   .then(res => {     console.log("RESOLVED!", res);     res.json().then(data => console.log("JSON DONE", data));     //JSON.parse()와는 다르다.   })   .then((data) => {     console.log(data);   })   .catch(e => {     console.log("ERROR!", e);   })	Using The Fetch API
	return fetch	fetch('https://swapi.dev/api/people/1')   .then(res => {     console.log("RESOLVED!", res);     return res.json();     //JSON.parse()와는 다르다.   })   .then((data) => {     console.log(data);     return fetch('https://swapi.dev/api/people/2');   })   .then((res) => {     console.log("SECOND REQUEST RESOLVED!!");     return res.json();   })   .then((data) => {     console.log(data);     return fetch('https://swapi.dev/api/people/3');   })   .then((res) => {     console.log("THIRD REQUEST RESOLVED!!");     return res.json();   })   .then((data) => {     console.log(data);   })   .catch(e => {     console.log("ERROR!", e);   })
	awit	const loadStarWarsPeople = async () => {   try {     const res = await fetch('https://swapi.dev/api/people/1');     const data = await res.json();     console.log(data);     const res2 = await fetch('https://swapi.dev/api/people/2');     const data2 = await res2.json();     console.log(data2);   } catch (e) {     console.log("ERROR!!", e);   } }
AXIOS A LIBRARY FOR MAKING HTTP REQUESTS	AXIOS	Axios는 타사 라이브러리로 JS의 네이티브 함수가 아니다. Axios는 HTTP 요청의 생성과 처리를 최대한 간소화할 목적으로 만들어졌습니다. 백그라운드에서는 동일하게 브라우저에 fetch함수를 사용하지만 JS에서 기본 제공하는 함수가 아니므로 추가로 빌드해야 합니다.	Introducing Axios https://github.com/axios/axios#installing
		const getStarWarsPerson = async (id) => {   try {     const res = await axios.get(`https://swapi.dev/api/planets/${id}/`);     console.log(res.data);   } catch (e) {     console.log("ERROR", e);   } } console.log("START!!");//먼저 처리한다. getStarWarsPerson(5);
	AXIOS header	JASON과 header의 연관성은? header의 의미를 모르겠음 DOM이 정확히 뭐지? 배웠지만... 개념정리가 안되어 있음..	Axios로 해더 세팅하기 {API} https://icanhazdadjoke.com/api
		API를 너무 자주 반복(loop)적으로 호출하거나 자동화하지 말아야한다.