Ajax(Asynchronous Javascript And XML)
자바스크립트와 XML의 비동기. XML는 eXtensible Markup Language의 약자로 다목적 마크업 언어이다.
기존의 HTML과는 달리 웹 상에서 구조화된 문서를 전송 가능하게 설계되었다.
무슨 의미냐면 HTML에서는 서점이라는 데이터를 기술하기에 마땅한 태그가 존재하지 않는다.
하지만 XML은 이렇게 기술 할 수 있다.
<book>
<title> Learning Amazon Web Services </title>
<author> Mark Wilkins </author>
</book>=> 이러한 데이터를 비동기 방식으로 주고받아 웹페이지를 동적으로 갱신하는 프로그래밍 기법이다.
참고로 Ajax는 브라우저 APi인 XMLHttpRequest객체를 기반으로 동작한다.
이 객체는 Http 비동기 통신을위한 메서드와 프로퍼티를 제공함.
원래 주목받지 못하다가 구글이 Ajax를 이용하여 구글맵스를 개발하게됨.
당시기준으로 퍼포먼스가 데스크톱 애플리케이션과 비교해도 손색 없을 정도. 이후 Ajax가 널리 쓰이게됨.
Ajax이전에는 HTML파일을 모두 갈아끼웠으나, 필요한 부분만 갈아 끼울 수 있게됨.
JSON(JavaScript Object Notation)
자바스크립트 객체 표기법.
클라이언트와 서버간의 HTTP통신을 위한 텍스트 데이터 포맷이다. 현재는 XML대신 JSON을 많이씀.
{
"name": "kim",
"age" : 20,
"alive" : true
...
}객체와 비슷하지만 키는 무조건 따옴표로 사용해야한다.
JSON.stringify()메서드를 사용하면 JS의 값을 문자열로 바꾸어 JSON에 담을 수 있다. 이를 직렬화(serializing)이라 함.
const obj = {
"name": "kim",
"age" : 20,
"alive" : true
}
console.log(JSON.stringify(obj)) // string { "name": "kim", "age" : 20,"alive" : true }객체를 제외한 다른 값들도 문자화된다. 특히 Boolean도 문자화 되니 유의하자.
JSON.parse()를 사용하면 반대로 JSON 포맷 문자열을 객체로 변환한다. 이를 역직렬화(deserializing)이라 함.
XMLHttpRequest
브라우저는 주소창, HTML의 form태그, a태그를 통해 HTTP 요청 전송 기능을 기본 제공함.
JS를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다
Http 요청
const xhr = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
xhr.open('GET', '/users'); //요청 초기화
xhr.setRequestHeader('content-type', 'application/json'); // 헤더에 콘텐츠 타입 지정
xhr.send(); // 전송!
//만약 Post라면....
xhr.open('POST', '/users'); //요청 초기화
xhr.setRequestHeader('content-type', 'application/json'); // 헤더에 콘텐츠 타입 지정
xhr.send(JSON.stringify({id:1, name:'kim', age:'25'})); // 객체를 직렬화하여 전송. 이때 보낸 JSON은 http body에 담긴다참고로 서버가 응답할 데이터의 MIME타입을 지정할 수 있다.
MIME타입은 type/subtype을 사용하여 나타낸다.
xhr.setRequestHeader('accept', 'application/json');타입 지정은 아주 중요하다.
파일의 확장자가 아니라 데이터의 MIME타입을 이용하여 파일의 타입을 알아낸다.
자주 사용되는 MIME타입은 다음과 같다.
- text : text/plain, text/html, text/css, text/javascript
- application : application/json, application/x-www-from-urlencoded(form submit타입)
- multipart :mutipart/formed-data(form submit 타입인데, 파일이나 이미지 전송 시)
Http 응답
응답하려면 객체가 발생시키는 이벤트를 캐치해야한다.
xhr.onreadystatechange = () => {
//readyState라는 프로퍼티는 응답의 단계를 나타낸다. (0 ~ 4) 4가 완료된 상태다.
if(xhr.readyState !== XML.request.DONE) return;
//Http status중 200이 아니라면 정상적인 응답이 아니다.
if(xhr.status !== 200 ) return console.error('Error', xhr.status, xhr.statusText);
//정상 응답 처리
console.log(JSON.parse(xhr.response))
}참고로 이벤트파트에서 배웠던 readystatechange이벤트와 이름은 같지만, 다르다.
XMLRequest객체의 readyState프로퍼티가 변경될때마다 일어나는 이벤트다.
아예 응답이 완료되었을때만 캐치하고싶다면 load이벤트를 사용하면 된다. 이 역시 기존 이벤트와 이름은 같지만 기능이 다르다.
xhr.onload = () => {
//이미 응답이 완료되었을때만 일어난다.
//Http status중 200이 아니라면 정상적인 응답이 아니다.
if(xhr.status !== 200 ) return console.error('Error', xhr.status, xhr.statusText);
//정상 응답 처리
console.log(JSON.parse(xhr.response))
}참고로 현재는 대부분 fetch Api를 사용하기때문에 거의 쓰이진 않는다. 하지만 Http요청이 어떻게 일어나는지 어느정도의 로우레벨은 알고있으면 좋아보인다.
REST API(REpresentational State Transfer)
표현적인 상태 전송. 직역하니 와닿지 않는다. 정의를 보자.
REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이고 REST API는 REST를 기반으로 서비스 API를 구현한 것.
REST API는 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성된다.
자체 표현 구조로 구성되어 REST API만으로 HTTP요청의 내용을 이해할 수 있다는 장점이 있다.
아하 그러니까 상태 전송에 대한 표현을 정의한 것이다
구성
위에서 3가지로 이루어져있다 했다. 이를 표현하는 방법은 다음과 같다.
- 자원 : URI
- 행위(자원에 대한) : HTTP 요청 메서드
- 표현(자원에 대한 행위의 구체적 내용) : 페이로드
설계 원칙
가장 중요한 원칙은 두가지다.
- URI는 리소스(자원)을 표현하는데 집중한다.
# bad
GET /getTodos/1
GET /todos/show/1
# good
GET /togods/1- 행위에 대한 정의는 HTTP요청 메서드를 통한다
# bad
DELETE /todos/delete/1
# good
DELETE /togods/1이제 슬슬 감이 온다.
REST API 실습
현재 팀 프로젝트로 실습은 대체하겠다. 대신 HTTP요청 메서드들의 차이점을 적어보겠음.
| HTTP 메서드 종류 | 종류 | 목적 | 페이로드 |
|---|---|---|---|
| GET | index/retrieve | 리소스 취득 | X |
| POST | create | 리소스 생성 | O |
| PUT | replace | 리소스 전체 교체 | O |
| PATCH | modify | 리소스 일부 수정 | O |
| DELETE | delete | 리소스 삭제 | X |
