JS기초 | Ajax, JSON 개념정리 및 활용방법

Ajax란?

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

 

Ajax는 XMLHttpRequest 객체를 기반으로 동작하며, http 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 

 

전통적인 웹페이지의 생명주기 

예전의 웹페이지는 완전한 html 태그로 감싸진 html 파일을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 랜더링 하는 방식으로 동작했다. 따라서 클라이언트가 화면전환을 요청하면, 서버로부터 새로운 html을 전송받아 웹페이지 전체를 다시 새로고침 해야했다. 

전통적인 웹 생명주기

위와 같이 동작하면 어떤 단점이 있을까?

1. 변경될 필요가 없는 부분까지 매번 서버로부터 재전송 받기때문에 불필요한 데이터 통신이 발생한다. 

2. 화면전환이 일어나면, 화면이 순간적으로 깜박이는 현상이 발생. 이것도 불필요한 현상이다. 

3. 클라이언트와 서버와의 통신이 동기방식으로 동작하기 때문에, 서버로부터 응답이 있을때까지 다음 처리는 블로킹된다.

 

이를 개선하기 위해 등장한 Ajax 덕분에, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기방식으로 전송받아, 변경하고 싶은 부분만 한정적으로 렌더링이 가능해졌다. 

Ajax 덕분에 브라우저에서도 애플리케이션과 유사한 빠른 퍼포먼스와 부드러운 화면전환이 가능해진 것이다. 

 

Ajax 통신 생명주기 

Ajax

Ajax는 비동기 통신방식이다. 따라서 새로운 요청을 Ajax로 요청하면, 서버로부터 필요한 데이터만 전송받기 때문에 불필요한 데이터통신이 발생하지 않는다.

JSON이란, 클라이언트와 서버간의 http 통신을 돕는 데이터 포맷이다. JSON은 클라이언트가 요청하는 객체를 serialize해서 {key: value} 타입의 string으로 만들고, 서버와 통신하는데 이용한다음 deserialize를 거쳐 다시 객체로 변환해 클라이언트에 원하는 데이터를 제공하여 브라우저에 보여주는 것이다. 

 

JSON.stringify()

JSON에는 두가지 메서드가 존재한다. 먼저, stringify()는 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야하는데, 이를 serializing 이라고 부른다. 

// 1. Object to JSON
// stringify(obj)
const obj = {
  name: 'Kim',
  age: 20,
  alive: true,
  hobby: ['traveling', 'tennis']
};

// obj 객체를 JSON 포맷으로 변환 
const json = JSON.stringify(obj);
console.log(json, typeof json);  // {"name":"Kim","age":20,"alive":true,"hobby":["traveling","tennis"]} string

// 원하는 value만 받아오기 
console.log(JSON.stringify(obj, ['age']));  // {"age":20}

// 들여쓰기 적용 
const json2 = JSON.stringify(obj, null, 2);
console.log(json2);
/*
{
  "name": "Kim",
  "age": 20,
  "alive": true,
  "hobby": [
    "traveling",
    "tennis"
  ]
}
*/

객체를 JSON 형태의 문자열로 변환한 모습이다. 매개변수 끝에 숫자나 문자열을 넣으면 해당 칸만큼 들여쓰기가 된다. 아래 api 문서참고.  

stringify() API문서

이번에는 배열을 JSON으로 변환해보자. 

const todos = [
  { id: 1, content: 'HTML', completed: false},
  { id: 2, content: 'CSS', completed: false},
  { id: 3, content: 'JavaScript', completed: true}
];

const arrayToJson = JSON.stringify(todos, null, 2);
console.log(arrayToJson);
/*
[
  {
    "id": 1,
    "content": "HTML",
    "completed": false
  },
  {
    "id": 2,
    "content": "CSS",
    "completed": false
  },
  {
    "id": 3,
    "content": "JavaScript",
    "completed": true
  }
]
*/

 

JSON.parse()

parse는 JSON 포맷의 문자열을 객체로 변환하는 메서드이다. 서버로부터 클라이언트에 전달된 json은 문자열이고, 객체로서 사용하려면 객체화 과정이 필요하다. 이러한 과정을 deserializing 이라고 부른다. 

// 2. JSON to Object
// parse(json) 
const parsed = JSON.parse(json2);
const JsonToArray = JSON.parse(arrayToJson);

console.log(parsed, typeof parsed); // { name: 'Kim', age: 20, alive: true, hobby: [ 'traveling', 'tennis' ] } object
console.log(JsonToArray, typeof JsonToArray);
/*
[
  { id: 1, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JavaScript', completed: true }
] object
*/

위에서 만든 JSON 문자열들을 다시 객체로 변환한 모습이고, 데이터 타입이 객체로 변경된걸 확인할 수 있다. 

---

참고 | 모던 자바스크립트 #43