1.Ajax

Ajax이란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.
Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.
이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다.
따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다.
Ajax의 등장은 이전의 전통적인 패러다임을 획기적으로 전환했다.
즉, 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진 것이다. 이를 통해 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 퍼포먼스와 부드러운 화면 전환이 가능해졌다.

2.JSON

JSON은 데이터를 교환하기 위한 용도로 개발된 포맷이다.
또한, JSON은 문자열이다. 애초에 자바스크립트 객체를 데이터로 변환하기 위한 용도로 만들었기 때문에 객체랑 비슷하게 생겼다.

const jsonString = '
{
  "name": "park jin yang",
  "age":30,
  "bloodType":"B"
}
';

JSON은 객체보다 표현법이 굉장히 까다롭다.
1. Key 이름을 객체로 감싸줘야 된다.
-->"name": "Park jin yang",
2. value도 문자열인 경우에 반드시 더블 쿼트만 사용해야 된다.(싱글 쿼드 사용 시 문법적 오류)
-->"bloodType":"B",
3. 맨 마지막 속성의 콤마(,) 스펙을 지원하지 않는다.
-->"bloodType":"B"
4. 데이터 타입, value의 종류가 제한적이다.
only 문자열, 숫자, 그리고 배열[ ], 객체, boolean을 지원한다.

1.간단하게 객체로 변환하는 방법

const jsonString = '
{
  "name": "park jin yang",
  "age":30,
  "bloodType":"B"
}
';

const myJson = JSON.parse(jsonString);
-> JSON이라는 내장 객체를 이용해 parse라는 메소드를 사용해 인자로 JSON 문자열을 넘겨준다.

cosole.log(myJson.name);
->myJson이 객체화되었다.

(출력)
'park jin yang'

2.데이터를 전송하기 위해서 JSON으로 만드는 방법

console.log(JSON.stringify(myJson)); 
->stringify은 문자열화한다는 뜻이다.

(출력)

'{"name": "park jin yang", "age":30, "bloodType":"B" }'

3.JSON 사용 시 주의사항

1. JSON 데이터이므로 함수를 지원하지 않는다.

ex) function{ }

2. JSON 문자열 문법적 오류 시 try-catch구문 사용 방법

const jsonString = '
{
  "name": "park jin yang",
  "age":30,
  "bloodType": 'B' -> 더블 쿼트 대신 싱글 쿼트를 사용해 문법적 오류 발생
}
';

try{
 const myJson = JSON.parse(jsonString);

 cosole.log(myJson.name);

 console.log(JSON.stringify(myJson));
} catch(e){
  console.log('다시 한번 새로고침 해주세요.');
}

1. 'B'의 문법 오류로 인해 JSON.parse에서 오류가 나서 다시 한번 새로고침 해주세요 코드가 넘어갔다.
2. "B"으로 수정 뒤 catch 문에 걸리지 않고 두 코드들이 정상적으로 작동이 된다.

JSON.parse 할 때는 혹시 모를 오류 상황을 위해서 항상 try-catch 예외 구문으로 감싸서 오류 상황에 대비해야 된다!!