[JavaScript | 드림코딩] JSON 개념과 활용방법 및 사이트

🍕HTTP(Hypertext Transfer Protocal)

-클라이언트와 서버 사이의 통신 규약 

-클라이언트는 서버에 request 할 수 있고 서버는 그 응답에 response 한다. 

 

🍕AJAX (Asynchronous JavaScript And XML)

-웹 페이지에서 동적으로 서버와 데이터를 주고받을 수 있는 기술 

-자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할수 있는 통신 기능

• XMLHttpRequest(XHR)객체: 브라우저 API에서 제공하는 obj중 하나로 해당 객체를 이용하면 간단하게 서버에 데이터를 주고받을 수 있음
• fetch() API: XHR과 같은 기능을 하지만 최신버전의 API 단점이 있다면 IE에서 지원하지 않음!

*비동기 방식? 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청한 후 멈춰있는 것이 아니라 프로그램은 계속 돌아감

*XML은 뭐죠? HTML과 같은 마크업 언어, 태그를 사용해서 데이터를 나타낸다. 

 

서버와 통신할 때 XML을 사용하면 불필요한 태그를 너무 많이 사용해서 파일의 사이즈도 커지고 가독성도 좋지않기 때문에 많이 사용하고 있지 않음 XML -> JSON을 사용

🍕JSON(JavaScript Object Notation) 

- ECMAScript 3rd 1999의 Obj에서 큰 영감을 받아 만들어진 데이터 포맷을 JSON이라고 부른다. 

- 자바스크립트 Object의 형식이 {key : value} 로 이루어진 것처럼 JSON도 같은 형식으로 이루어져있음

-브라우저뿐만 아니라 모바일에서도 데이터를 주고받을 때 사용, 서버와 통신하지 않더라도 obj를 파일 시스템에 저장할때도 JSON데이터 타입을 많이 이용

-데이터(obj)를 전송하고 직렬화할 때 사용하며 프로그래밍 언어나 플랫폼에 상관없이 사용가능!

 

▶JSON 공부할 때 key point

Object to JSON: obj를 직렬화(serialize)해서 JSON(string)포맷으로 전환 

JSON to Object: 직렬화된 JSON(string)을 다시 deserialize해서 obj로 변환할 것인지 

 

// jSON
// JavaScript Object Notation
// JSON인터페이스를 살펴보면 stringify와 parse API가 있는데
// stringify의 경우는 함수의 이름은 동일하지만 매개변수가 다른 것이 하나 더 있다. 이걸 오버로딩이라고 부른다.
// 오버로딩을 하면 각각다른 방식으로 호출이 가능하다.
// stringify()는 obj를 받아와서 string으로 변환해준다. 콜백함수(replacer?), 리플레이서는 배열형태 or 함수형태로 전달가능
// parse()는 string 을 obj로 변환해준다. 콜백함수(reviver?)

// 1. Object to JSON
// stringify(obj)
let json = JSON.stringify(true);
let json2 = JSON.stringify(['바나나', '애플']);

console.log(json);
console.log(json2); // ["바나나","애플"]
// 위의 결과가 배열처럼 보이지만 typeof(json2)하면 string이라고 뜸,
// JSON의 규격사항에 맞게 싱글쿼트가 아니라 더블쿼트로 요소가 들어간 것이 확인된다.

const lion = {
  name: 'cola',
  color: 'orange',
  size: null,
  birthDate: new Date(),
  jump: () => {
    console.log(`${lion.name} can jump!`);
  },
};
let json3 = JSON.stringify(lion);
// 결과: {"name":"cola","color":"orange","size":null,"birthDate":"2022-04-08T08:03:33.366Z"}
//유의사항: jump function는 포함되어 있지 않음 -> 함수는 obj에 있는 데이터가 아니기때문에 포함되지 않음
// 또한 JS에만 있는 특별한 데이터형인 symbol역시 포함되지 않는다.
console.log(json3);
console.clear();
/* 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 
배열로 전달할 경우 지정한 속성만 결과에 포함합니다. */

// stringfigy의 콜백함수를 배열형태로 지정해서 보내면 내가 원하는 항목만 불러올 수 있다.
json3 = JSON.stringify(lion, ['name', 'color', 'size']);
// stringify의 콜백함수를 함수형태로 하면 key와 value를 인자로 받는데
// 결과값에서 특이한 점이 있다면 가장 lion obj를 싸고있는 최상위 것이 맨 처음에 출력됨
json3 = JSON.stringify(lion, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'king' : value;
});
console.log(json3); //위의 return 값에서 삼항연산자를 통해 데이터값을 조작하는것도 가능하다
//{"name":"king","color":"orange","size":null,"birthDate":"2022-04-08T08:32:19.807Z"}
/*
key: , value: [object Object] // 최상위 객체 맨처음에 출력됨
json.js:43 key: name, value: cola
json.js:43 key: color, value: orange
json.js:43 key: size, value: null
json.js:43 key: birthDate, value: 2022-04-08T08:29:39.757Z 
*/
// 결론: 세밀한 작업을하고 싶을 때는 콜백함수를 쓰자

// 2. JSON to Object
// parse(json)
//제이슨 포맷을 객체로 만들때 유의점: 제이슨 -> 객체가 됐을 때 메소드가 포함되지 않았던 것을 기억하시면
// lion.jump() 는 제대로 작동하지만 obj.jump() 는 존재하지 않기 때문에 작동하지 않는 것을 명심하셈
console.clear();
const 제이슨 = JSON.stringify(lion);
const obj = JSON.parse(제이슨);
console.log(obj); //{name: 'cola', color: 'orange', size: null, birthDate: '2022-04-08T08:35:03.106Z'}
lion.jump();
// obj.jump(); //에러: Uncaught TypeError: obj.jump is not a function
console.log(lion.birthDate.getDate()); // 8, 여기서 birthDate는 obj임
// console.log(obj.birthDate.getDate()); // 에러 발생, 이유: JSON->obj화 한거라 여기서 birthDate는 string이라서그럼
// 그렇다면 콜백함수(reviver)를 통해 세밀하게 조정해서 JSON을 obj로 변환해보자
const obj2 = JSON.parse(제이슨, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  //key 명이 birthDate면 Date객체로 만들어주고 아닌 애들은 원래 value가져와서 쓰자!
  return key === 'birthDate' ? new Date(value) : value;
});
/*
key: name, value: cola
json.js:70 key: color, value: orange
json.js:70 key: size, value: null
json.js:70 key: birthDate, value: 2022-04-08T09:25:47.032Z
json.js:70 key: , value: [object Object] */
console.clear();
console.log(obj2.birthDate.getDate()); // 위에서 reviver콜백함수를 통해서 조작했기 때문에 이제는 정상 작동

 

※이슈: 위의 코드에서 화살표 함수로 작성한 lion객체의 메소드가 제대로 작동하지 않아서 확인해보니 this사용에 있어서 제약이 있다고 합니다. 

 

🍳arrow function 에서 this 키워드

this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.

메소드로 화살표 함수가 사용된다면, 화살표 함수는 자신의 this를 가지고있지 않습니다.
대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용됩니다

ref: 
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

const lion2 = {
  name: 'cola',
  color: 'orange',
  size: null,
  birthDate: new Date(),
  jump: () => {
    console.log(`${this.name} can jump!`);
  },
};
lion2.jump();

위의 코드처럼 객체 안에 함수를 정의할 때는 화살표함수를 쓰지 않는 것이 좋다. 왜냐면 this가 가리키는 대상이 해당 메소드를 소유하고 있는 lion2객체를 가리키는 것이 아니라 전역객체(Window)를 가리키기 때문에 this.name을 해도 cola가 뜨지 않는다. 

 

위의 코드를 화살표 함수를 사용하지 않고 아래와 같이 수정해주면 정상적으로 작동한다. 

jump: function () {
    console.log(`${this.name} can jump!`);
  },

 

---

🍕JSON 관련 유용한 사이트 

🥯JSON Diff (http://www.jsondiff.com/)

서버로부터 받은 첫번째 데이터와 두번째로 받은 데이터가 어떻게 다른 지 확인할 때 좋은 사이트

-> compare 버튼을 누르면 달라진 부분을 보여준다. 

문제를 디버깅할 때 유용하게 사용가능

 

🥯JSON Beautifier (https://codebeautify.org/jsonviewer)

가끔 JSON파일을 가져오면 포맷이 망가지는 경우가 있는데 이럴때 JSON형식으로 재정렬해준다. 

-> Beautify 버튼을 누르면 포맷을 예쁘게 만들어준다. 

 

🥯JSON Parser (http://json.parser.online.fr/)

제이슨 포맷을 객체로 만들었을 때 모양을 미리 보고싶을 때 사용 

 

🥯JSON Validator (https://codebeautify.org/jsonvalidator)

제이슨 포맷이 사용가능(유효)한 지 알려주는 사이트 

문법적 오류가 있거나 하면 어디서 에러가 발생했는 지 알려줌 

제이슨이 문제가 있는 거 같을 때 코드를 복사해서 붙여넣기 후 확인해보면 좋다.