Ajax란?

우선 Ajax는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.

ajax가 있기전 웹페이지는 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작했다.
이런 경우 변경할 필요가 없는 부분까지 전부 새로고침이 되고 화면 깜박임 등의 현상이 발생한다.
이에 반해 Ajax는 웹페이지 변경에 필요한 부분의 데이터만 비동기 방식으로 받아 사용하기에
변경할 필요가 없는 부분을 다시 렌더링 하지 않으며 화면 깜박임 현상도 발생하지 않고 불필요한 데이터 통신이 발생하지 않게 한다.

JSON이란?

JSON은 클라이언트와 서버 간의 통신을 위한 텍스트 데이터 포맷이다. 쉽게 말해 이전처럼 HTML을 통째로 주고 받는 것이 아니라 필요한 텍스트 데이터만 주고 받는 것이다.

JSON의 표기 방식

JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트이다. 텍스느는 반드시 큰따옴표로 묶어야 한다.

{
	"name":"YongWoo",
   "age":32,
   "alive":true,
   "hobby":["coding","readBook"]      
}

JSON 문자로의 변환

위와 같이 JSON은 독립형 텍스트 데이터 포맷으로 형식에 맞춰 사용한다. 이런 형식을 맞추기 위한 방법이 몇 가지 있다.
우선
클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야하는데 이 작업을 직렬화라고 한다.
그리고
문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화라고 한다.

JSON.stringify 직렬화

const obj ={
 name:'YongWoo',
 age:32,
 alive:true,
 hobby:['coding','readBook']    
}

위와 같은 데이터가 있을 때 이를 JSON형식에 맞춰 객체를 문자열화 하기 위해선 아래와 같이 사용한다.

const json = JSON.stringify(obj);
console.log(typeof json, json);
/*
string {"name":"YongWoo","age":20,"alive":true,"hobby":["coding","readBook"] }
*/

그리고 객체뿐 아니라 배열도 JSON 포맷의 문자열로 변환이 가능하다.

JSON.parse 역직렬화

서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로 사용하려면

const obj ={
 name:'YongWoo',
 age:32,
 alive:true,
 hobby:['coding','readBook']    
};
//객체를 JSON 포맷의 문자열로 변환
const json = JSON.stringify(obj);
//JSON 포맷의 문자열을 객체로 변환
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
/*
object {"name":"YongWoo","age":20,"alive":true,"hobby":["coding","readBook"] }
*/

이제 REST API에 관해 알아보자 다음장에서!