클라이언트와 서버는 어떻게 통신할까? http를 이용해 통신한다.
HTTP란?
Hypertext Transfer Protocal의 약자로 Hypertext를 주고받을 수 있는 규약이다.
클라이언트가 서버에게 data를 request(요청)할 수 있고 서버가 이에 response(응답)할 수 있는 방식이다. 이떄 Hypertext는 비단 웹사이트에서 이용되는 링크 뿐만 아니라 전반적으로 쓰이는 문서, 이미지 등의 리소스를 포함한다.
이렇게 서버에게 데이터를 요청해 받아오는 방법으론 AJAX가 있다.
AJAX란?
Asynchronous Javascript and XML의 약자로 웹페이지에서 서버에게 동적으로 데이터를 주고받을 수 있는 기술이다.
그럼 이때 XML은 뭘까?
XML이란?
HTML처럼 데이터를 표현할 수 있는 방법 중 하나이다.
그러나 XML은 불필요한 태그가 과도하게 필요해 가독성이 떨어지고 파일의 사이즈가 커진다.
이를 대체하기 위해 나온 것이 바로 JSON이다.
JSON이란?
JavaScript Object Notation의 약자로 key와 value로 이뤄진 데이터 포맷이다.
JSON은 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고받을 때, 서버와 통신하지 않아도 object를 file system에 저장할 때도 많이 사용된다.
그렇다면 JSON의 특징은 무엇일까?
- 데이터를 주고받을 때 사용할 수 있는 가장 간단한 포맷이다.
- 텍스트를 기반으로 해 가볍고 가독성이 좋다.
- 데이터를 서버와 주고받을 때 직렬화하기 위해 사용한다.
- 컴퓨터 언어나 플랫폼에 제약을 받지 않고 대부분의 언어에서 사용 가능하다.
어떻게 object를 직렬화해서 json으로 변환하고 직렬화된 json은 어떻게 다시 object로 변환하지?
코드로 JSON을 쓰고 .을 찍으면 parse, stringify 두 가지가 나온다.
배열 -> JSON
stringify는 object를 json으로 변환할 수 있다.
json = JSON.stringify(['apple', 'banana']);
console.log(json);결과는,
["apple", "banana"]
배열 타입처럼 보이는 json으로 변환되어 나온다.
Object -> JSON
const puppy = {
name: '오복이',
color: 'brown',
size: null,
bite: () => {
console.log(`${name}이 물었다!`);
},
};
json = JSON.stringify(puppy);
console.log(json);결과는,
{"name":"오복이","color":"brown","size":null}
object 타입처럼 보이는 json으로 나오지만 bite라는 함수는 변환되지 않은 것을 확인할 수 있다. 함수는 object에 있는 data가 아니라 제외된 것이다. symbol처럼 js에만 있는 특별한 데이터 역시 제외된다.
이때 json으로 변환되는 걸 더 통제하고 싶으면 어떡하지?
Q. puppy object에서 name만 json으로 변환하고 싶어요!
A. 그럼 원하는 property 이름만 전달하세요!
json = JSON.stringify(puppy,["name"]);결과는,
{"name": "오복이"}
이렇게 해당하는 property만 변환해준다.
혹은 callback 함수를 사용할 수도 있다.
json = JSON.stringify(puppy, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return value;
});이렇게 콜백 함수의 형태를 갖춘 뒤 조작하고 싶은 부분을 조작해주면 된다. 예시를 들어보자.
"key에 name이 들어오면 멍멍이라고 설정하고 key가 name이 아닌 경우엔 원래의 value를 사용하고 싶어!"
json = JSON.stringify(puppy, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? '멍멍이' : value;
});결과는,
{"name":"멍멍이","color":"brown","size":null}
name의 value가 변경되어 json으로 변환된 것을 확인할 수 있다.
JSON -> Object
json을 object로 변환할 때는 parse(json)이 사용된다.
JSON.parse()란?
JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성하는 객체이다.
선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있다.
const puppy = {
name: '오복이',
color: 'brown',
size: null,
bite: () => {
console.log(`${name}이 물었다!`);
},
};
json = JSON.stringify(puppy);
const obj = JSON.parse(json);
console.log(obj);object에 parse라는 api로 변환하고자 하는 json을 전달하면 된다.
결과는,
{name: "오복이", color: "brown", size: null}
그럼 함수도 한 번 찍어보자.
obj.bite();결과는,
Uncaught TypeError: obj.jump is not a function at
아까 함수는 object에 있는 data가 아니라 제외됐는데 그걸 다시 object로 만들었으니 당연히 포함되지 않는 것을 확인할 수 있다.
