섹션 28 AJAX, API
AJAX
Asynchronous Javascript and XML
비동기식 자바스크립트와 XML
자바스크립트와 XML을 이용한 비동기적 정보 교환 기법이다.
웹에서 요청을 해서 서버와 데이터를 주고 받을때 사용한다.
API
HTML, CSS, JavaScript를 사용해 웹 페이지를 띄운다.
하지만 자바스크립트로 AJAX요청을 할 땐 HTML, CSS, JavaScript가 아닌 순수한 정보를 받는다. 데이터만 받으면 된다.
이때 API가 필요하다.
Application Programming Interface.
컴퓨터가 여러 소프트웨어와 상호 작용하는 모든 인터페이스를 의미한다.
소프트웨어끼리 작용하는 인터페이스.
웹과는 상관이 없지만 일반적으로 웹 개발자들이 API라고 하면 WebAPI를 뜻한다.
날씨 정보, 비트코인 가격 등등. 모두 특정 엔드 포인트를 제공하고 거기서 정보로 응답. 즉 WebAPI는 다른 어플리케이션이나 데이터베이스로 가는 입구이다.
WebAPI는 HTTP에서 일어나는 인터페이스이다.
API가 데이터를 전송할때 쓰는 포맷은 정보 자체만을 제공하기 위해 존재하기 때문에 스타일 같은 것이 없다. 가장 흔히 쓰는 것은 두 가지인데 XML이 초기에 유명했으나 요즘은 보기 힘들다. XML은 HTML같이 생겼고 변경이 가능하다.
요새는 JSON을 주로 쓴다.
JSON
JSON은 Java Script Object Notation. 자바 스크립트 객체 문법을 뜻하는데
JavaScript와는 별 관계가 없다. 그냥 데이터 전송하는 포맷일 뿐.
자바스크립트의 객체와 비슷하게 생겼다. 중괄호 안에 키-값이 있다.
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"fomed": 2016
}모든 키는 큰따옴표를 갖고 있다. 자바스크립트에서는 큰따옴표를 쓰지 않는다.
값으로 문자열, 숫자나 객체, 배열을 쓸 수 있고 불리언이나 null도 쓸 수 있다.
json.org 사이트에서 JSON의 작동 원리를 설명해준다.
자바스크립트에서의 undefined는 JSON에서는 유효하지 않은 값이다.
JSON을 자바스크립트에서만 쓴다고 생각하는 사람이 많은데 전혀 그렇지 않다.
파이썬이나 루비 같은 언어를 써도 JSON API를 쓴다. 언어마다 JSON을 파싱하는 방법이 다르다. 자바스크립트에는 파싱하는 내장된 메서드가 있다.
JSON.parse
JSON.parse()괄호 안에 전달받은 JSON을 넣으면 자바스크립트 객체로 변환해주는 메서드이다.
JSON.stringify
JSON.stringify()반대로 자바스크립트 객체를 JSON으로 변환하려면 이렇게한다.
undefined 값은 모두 null로 바뀐다.
Postman
HTTP요청을 해서 여러 API를 테스트할 수 있는 프로그램이다.
설치해서 쓰면되고 가입을 하도록 바뀌었다.
가입하기 싫으면 비슷한 기능을 하는 웹페이지가 있다.
Hoppscotch
Postman과 같은 기능을 쓸 수 있는 오픈 소스.
Hoppscotch * Open source API development ecosystem
둘다 URL을 넣고 요청을 보낼 수 있다.
개발자가 API 요청을 테스트하는데 쓴다.
스타워즈 관련 정보를 주는 스타워즈 API, SWAPI
사용하기 쉽고 유용한 API이다.
Hoppscotch 사이트에서 swapi 의 엔드포인트 주소를 복사해서 넣고 send를 누르면 서버에서 받은 JSON을 확인할 수 있다.
HTTP Method
HTTP Verb. HTTP 요청을 할 때 요청 별로 적용할 수 있는 동사들이 있다.
Get
일반적으로 정보를 가져올 때 사용한다.
API로부터 정보를 가져온다.
Post
일반적으로 데이터를 어딘가로 보낼 때 사용하는 요청이다.
즉 데이터를 보내서 데이터베이스와 같은 특정 공간에 저장.
또는 서버에 영향을 미친다.
Put
데이터를 수정한다.
Delete
API를 통해 뭔가를 삭제할 때 사용한다.
HTTP Status Code
HTTP 상태코드.
200
200은 좋은 거다. 보통 문제가 없을때 2로 시작하는 코드가 뜬다.
200은 요청이 성공적으로 처리되었다는 뜻.
201은 post요청이 성공했다.
404
4로 시작하면 좋은게 아니다. 클라이언트 사이드 오류.
존재하지 않는 URL(엔드 포인트)를 요청하면 이렇게 뜬다.
404 찾을 수 없음. ‘뭘 요청하는 지 모르겠어’ 라고 API가 응답하는 것.
405는 post요청을 보냈을때 허용되지 않음(지원되지 않음) 이라고 뜬다.
아주 많은 상태코드가 있지만 전부 외울 필요는 없다.
500번대는 서버 사이드 오류.
300번대는 리디렉션과 관련이 있다.
query string
https://developer.mozilla.org/ko/search?q=chiken쿼리 문자열.
URL뒤에 ? 가 있고 그 뒤 온갖 텍스트가 붙는다.
키-값 쌍을 이루는데 여러개가 붙으면 &앰퍼샌드 기호로 구분 짓는다.
https://abc.com/search?sort=desc&color=blue키를 먼저 작성하고 등호와 값이 이어진다.
URL은 한글자만 틀려도 요청과 응답이 제대로 이루어지지 않지만,
쿼리 문자열은 해당 값을 찾지 않는 이상 서버가 쿼리 문자열을 무시해버린다.
mdn서버는 q=chiken, q라는 값을 찾고 chiken을 검색한다.
Postman이나 Hoppscotch에서는 쿼리 문자열을 일일히 쓸 필요 없이
쉽게 추가할 수 있다.
parameters 섹션에서 쿼리 매개변수로 넣고 값을 넣으면 된다.
이렇게 하면 등호나 앰퍼샌드, 물음표를 직접 작성할 필요가 없다.
HTTP Header
HTTP 헤더는 요청과 함께 정보를 전달한느 부수적인 방식으로서 응답에도 포함된다.
메타데이터와 같은 키-값 쌍에 해당하며 요청에 첨부하는 세부사항과 같다.
크롬 개발자도구에서 헤더를 확인 할수 있다.
network탭에 들어가면 header탭이 있다. 요청 URL과 요청 메서드, 상태코드, 등을 볼 수 있다.
응답에도 헤더가 포함된다.
특정 API들은 사용자 지정 헤더를 보내야 한다.
아재 개그를 보내주는 icanhazdadjoke.com
그냥 하면 HTML응답이 뜨는데 JSON응답을 받으려면 별도의 엔드포인트 없이 Accept라는 헤더를 지정하고 application/json으로 설정해야한다.
Hoppscotch나 Postman에서 Headers섹션으로 들어가 헤더를 추가하면 된다.
XHR
XMLHttpRequest는 자바스크립트에서 요청을 보내는 기존 방식.
promise를 지원하지 않아 수많은 콜백을 받게 되고 설정방식이 복잡해진다.
Fetch나 Axios가 나오기 전에 사용하던 방법.
const req = new XMLHttpRequest();
req.onload = function () {
}
req.onerror = function () {
}
req.open("GET", )
req.send();콜백에 중첩시켜야 되고 복잡. 구문도 좀 이상하다.
요새는 쓰지 않는다. Fetch가 있다.
Fetch
기본적인 사용법은 fetch함수로 호출한다.
fetch("https://swapi.dev/api/people/1/")이렇게 호출하면 프로미스를 반환한다.
이 뒤에 .then 과 .catch를 써서 사용한다.
fetch("https://swapi.dev/api/people/1/")
.then(res => {
console.log("resolve!", res)
})
.catch(e => {
console.log("error!", e)
})응답이 성공했을때 받은 res에는 포함되길 예상한 모든 항목이 없다.
이유는 fetch가 헤더를 수신하는 즉시 프로미스가 resolve(처리)되기 때문.
따라서 json메서드를 사용해야 한다. JSON.parse와는 다르다.
res 객체를 가져오는 fetch 함수에 추가된 메서드이다.
fetch("https://swapi.dev/api/people/1/")
.then(res => {
console.log("resolve!", res)
res.json().then((data) => console.log("JSON DONE", data))
})XHR보다 훨씬 편해졌지만 불완전하다.
JSON 구문 분석을 별도로 수행해야 하기 때문이다. 그래서 Axios가 나왔다.
Axios
axios는 타사 라이브러리로 자바스크립트의 네이티브 함수가 아니다.
HTTP요청의 생성과 처리를 최대한 간소화할 목적으로 만들어졌다.
자바스크립트에서 기본 제공하는 함수가 아니므로 import해서 코드에 추가해야 한다.
axios에는 몇가지 메서드가 있다.
axios.get("https://swapi.dev/api/people/1/");이렇게 하면 프로미스가 반환된다.
axios.get("https://swapi.dev/api/people/1/")
.then(res => {
console.log("Response:", res)
})이렇게 하면 fetch와 달라진 점이 보인다.
바로 data가 이미 채워져 있단느 것! JSON을 구문 분석하고 그것을 나타내는 추가 작업을 할 필요가 없다. fetch를 쓸때는 .json으로 한번 더 처리했어야 했다.
const getStarWarsPerson = async (id) => {
const res = await axios.get(`https://swapi.dev/api/people/${id}/`);
console.log(res.data);
};
getStarWarsPerson(5);
비동기로 스타워즈 인물에 대한 정보를 받는 함수!
이렇게 axios는 추가적인 작업 없이 자동으로 JSON을 구문 분석해 주고 처리될때까지 대기하지 않아도 되도록 해준다.
.then도 적게 쓸 수 있고 비동기로 쓸수도 있다.
axios.get('http://icanhazdadjoke.com/', {header: {'application/json'}} )axios.get에서는 이렇게 헤더를 지정할 수 있다.
