javascript JSON 개념 정리와 활용 방법 및 유용한 사이트 공유

JSON 유용한 사이트 모음

 

JSON에 대해 조금더 공부를 하고 싶으시면: MDN ➡️

https://developer.mozilla.org/en-US/d...

JavaScript.info ➡️

https://javascript.info/json

JavaScript.info 한국어 ➡️

https://ko.javascript.info/json

유용한 사이트: JSON Diff checker:

http://www.jsondiff.com/

JSON Beautifier/editor:

https://jsonbeautifier.org/

JSON Parser:

https://jsonparser.org/

JSON Validator:

https://tools.learningcontainer.com/j...

 

 

HTTP (hypertext Transfer Protocal)

브라우저에서 동작하고 있는 웹 어플리케이션과 같은 클라이언트 들이 서버와 통신할 수 있는 것이 바로 HTTP 이다.

클라이언트가 서버에게 데이터를 요청할 수 있고, 서버는 클라이언트가 요청한 것에 따라서 그에맞는 응답을 클라이언트에게 보내준다.

hypertext는 문서나 이미지파일들 링크 들을 포함해서 이야기한다.

http를 이용해서 서버에게 데이터를 요청에서 받아올 수 있는 방법으로는 바로 AJAX를 썼다.

AJAX(Asynchronous Javascript And Xml)

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

대표적인 예로는 XHR(XmlHttpRequest)는 오브젝트가 있다. 이것은 브라우저 api에서 제공하는 오브젝트 중 하나로, 이것을 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수가 있다.

최근 브라우저 api에 추가된 fetch() api를 이용하면 간편하게 데이터를 받아올 수 있다. (인터넷 익스플로러 지원안됨)

XML

html과 같은 마크업 언어 중에 하나이다. 태그들을 이용해서 데이터를 나타낸다.

html과 마찬가지로 데이터를 표현할 수 있는 한가지 방법이다.

서버와 데이터를 주고받을 때는 xml 뿐만 아니라 다른 것도 가능하다.

하지만, 불필요한 태그들이 많이 들어가고 사이즈가 커져서 가독성이 안좋아서 많이 사용하지 않는다.

JSON (JavaScript Object Notation)

자바스크립트 오브젝트 데이터 포맷이다. Object { key : value } 로 이루어져 있다.

json은 브라우저 뿐만 아니라, 모바일에서 데이터를 주고받을 때, 또는 서버와 통신을 하지 않아도

obj를 파일 시스템에 저장할 때도 json 데이터 타입을 많이 이용하고 있다.

• 데이터를 주고받을 때 쓸 수 있는 가장 간단한 파일 포맷이다.
• text를 기반으로 한 가벼운 형태이다.
• 가독성이 좋다.
• key와 value로 이루어져있다.
• 데이터를 보통은 서버와 주고받을 때, 직렬화하고 데이터를 전송할 때 쓰인다.
• 프로그래밍 언어나 플랫폼에 상관없이 쓸 수 있다.

c언어 , c++, 자바, 파이썬, php, go 등에 상관없이 거의 대부분의 언어들이 json을 사용할 수 있다.

클라이언트와 서버는 key와 value 형태로 변환해서 사용한다.

 

JSON의 방향

1. object를 어떻게 string(JSON) 으로 변환할 지
2. string(JSON)을 어떻게 object로 변환할 지

json에는 두개의 api가 있는데, parse와 stringify가 있는데 동일한 이름의 함수가 2개가 있고, 전달되는 매개변수가 차이가 있다.

함수의 이름은 동일하지만 몇개의 파라미터를 전달하냐에 따라서 다른 방식으로의 호출이 가능한 것이 바로 오버로딩 이라고한다.

parse

json에 string 타입을 넣으면, object로 변환해주는 것이다. 오브젝트를 더 세밀하게 조정하고 싶다면, reviver로 조정 가능하다.

stringify

오브젝트, 어떤 타입의 오브젝트를 받아와서 string으로 변환해준다. string으로 만들 때 세밀하고 통제하고 싶다면 콜백함수로 만들 수가 있다.

object를 json으로 변환하는 방법

stringify(obj)을 사용하면 된다.

let json = JSON.stringify(true);
console.log(json);

json = JSON.stringify(["apple", "banana"]);
console.log(json);

이렇게 console.log에서 string 형태로 변환된 것을 볼 수 있다.

const rabbit = {
  name: "toro",
  color: "white",
  size: null,
  birthDate: new Date(),
  symbol: Symbol("id"),
  jump: () => {
    console.log(`${name} can jump`);
  }, 
};

json = JSON.stringify(rabbit);
console.log(json);

이렇게 오브젝트 형태로 json.stringify를 해보았다.

콘솔에는 이런 형식으로 떴는데, 여기서 중요한 점은 오브젝트의 jump() 는 함수여서 object에 데이터 형태로 추가가 되지 않는 점을 볼 수 있다. 또한 Symbol 형태도 자바스크립트 자체에서 사용가능한 것이기 때문에 json에 추가되지 않는 것을 볼 수 있다. 이 점을 유의해야 함!!

json = JSON.stringify(rabbit, ["name", "color"]);
console.log(json);

이렇게 stringify로 원하는 목록을 만들어서 이렇게 name과 color만 json 형태로 넘겨주고 할 수도 있다.

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "name" ? "ellie" : value;
});
console.log(json);

 

또한, 이렇게 콜백함수를 이용해, key와 value를 받고, 특정 조건을 줄 수도 있다.

콘솔부분 처음의 key와 value는 오브젝트 전체를 감싸고 있는 key와 value 값이다.

json을 object로 변환하는 방법

parse(json) 으로 변환하면 된다.

const json = JSON.stringify(rabbit);
const obj = JSON.parse(json)

parse(json)으로 하면 간단하다.

여기서 주의할 점은 우리는 const json으로 stringify로 string 형태로 바꾸어 주었다.

즉, string 형태로 데이터가 들어가있다는 뜻.

그래서 object 형태로 바꾸어도, string 형태에 있었던 데이터들이 들어가는 것이다.

그렇기 때문에, 아까 정의해두었던 object 안의 jump() 함수를 obj.jump();로 불러올 수 없다.

또한 date 형식의 데이터도 string 형태로 들어갔기 때문에 obj.birthDate.getDate()로 불러올 수 없다.

parse(json) 도, 간단하게 콜백함수를 이용해 조건을 추가할 수 있다. obj.birthdate.getDate() 가 되지 않기 때문에, 이 부분을 될 수 있도록 작업을 해보겠다.

const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "birthDate" ? new Date(value) : value;
});

이렇게 key와 value 값을 받고, key가 birthDate 면 새로운 new Date를 만들고 그 안에 value를 넣어주고, key가 name이라던가 다른 키면 그냥 value를 return 할 수 있게 만들어주면, 이제 obj에서도 new Date가 있기 때문에 obj.birthdate.getDate() 가 된다.