4. REST API와 Ajax

덧글 기능을 구현하기에 앞서 REST API와 Ajax 개념에 대해 정리

 

 

JSON 이란?

---

ㆍJavaScript Object Notation의 약자로 자바스크립트 객체 표기법을 의미한다. 기존에 XML 문서를 통해 데이터를 교환했는데, 데이터 보다 태그가 더 많은 경우가 많아 복잡해지는 경우가 발생하여 이에 대한 대안으로 등장하였다.

 

ex) {속성명1 : 속성값1, 속성명2, 속성값2, ... }

     객체 배열의 경우 [ { 속성명 : 속성값, ... }, {속성명 : 속성값, ... } ]

     Map의 경우 {키1 : {속성명 : 속성값, ... }, 키2 : {속성명 : 속성값, ... }, ... }

 

ㆍstringify()와 parse()

 

JS객체를 서버로 전송하기 위해서는 직렬화(문자열로 변환)가 필요하고, 서버가 보낸 데이터(JSON 문자열)를 JS객체로 변환할 때에는 역직렬화(JS객체로 변환)가 필요하다.

 

아래 예제와 같이 JSON.stringify()를 통해 객체를 JSON 문자열로 변환하고, JSON.parse()를 통해 JS객체로 변환한다.

화살표를 기준으로 왼쪽은 JS객체이고, 오른쪽은 JSON 문자열이다.

 

{name : "John", age : 30} → '{"name" : "John", "age" : 30}' // JSON.stringify()

'{"name" : "John", "age" : 30}' → {name : "John", age : 30} // JSON.parse()

 

 

Ajax란?

---

Asynchronous javascript and XML(요즘은 주로 JSON을 사용)의 약자로, 비동기 통신으로 데이터를 주고 받기 위한 기술을 의미한다. 따라서 웹페이지 전체(데이터 + UI)를 업데이트 하는 방식이 아닌 일부(데이터)만 업데이트 하는 방식이다. 예를 들어 사이트 내 실시간 변동되는 주식 그래프 기능 혹은 댓글 기능 같은 경우에 사용될 수 있다. 

 

※ 동기 vs 비동기 ?

 

동기 : 사용자가 서버에 데이터를 요청하면 서버가 요처에 대한 응답을 다시 리턴해주기 전까지 다른 활동을 할 수 없고 대기해야 하는 방식이다.

 

비동기 : 사용자가 서버에 데이터를 요청한 후 응답을 기다리지 않고 외부 활동 수행이 가능한 방식이다. 서버에서 처리가 완료되면 Callback(콜백) 함수로 응답 처리를 받는다.

 

 

 

REST, REST API란?

---

REST란? Representational State Transfer의 약자로, Roy Fielding이 제안한 웹 서비스 디자인 아키텍쳐 접근 방식을 의미한다. 프로토콜에 독립적이고 주로 HTTP를 사용하여 구현하고, 리소스 중심의 API 디자인을 통해 HTTP 메서드로 수행할 작업을 정의한다.

 

REST API란? REST 규약을 준수하는 API를 의미하고, 이 규약이 잘 지켜진 API를 RESTful API라고 한다. 프로토콜이거나 표준은 아니고, 다양한 방식으로 개발자들이 구현할 수 있다. 

 

앞서 다룰 댓글 기능에서는 REST 규약 중 일부를 적용해보고자 한다. 따라서 URI를 단순하게 하고 HTTP 메서드에서 담당할 수 있도록 설계한다.