JSON

요즘 들어서 자꾸 사용하는데 한 번도 제대로 배우지 않았던 놈이 있다.

그놈의 이름은 JSON으로 갑자기 튀어나와서는 우리에게 에러를 먹이는 간악한 놈이다. 

아직 놈에 대해서 부분적으로 알고 있을 뿐 명확하게는 알지 못한다.

그래서 오늘은 JSON에 대해 자세히 다루어 보고자 한다.

 

 

What is JSON?

 

---

JSON에 대해서 우리의 킹무위키는 "일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식"이라고 설명하고 있다.  뭔가 어려운 말이지만, 그냥 서버가 우리한테 주는 데이터의 형식이다.

 

이런 JSON은 누가 만들었을까?

그것은 바로 "더글라스 미만 잡"의 주인공인

더글라스 크록포드

이다.

 

탄생 배경도 다소 재밌는데, 과거에도 XML이나 csv 같은 웹표준 양식이 있었다. 이놈들은 아래와 같이 생겼는데....

XML

<title> Learning Amazon Web Services </title>
<author> Mark Wilkins </author>

scv

이름,생년,월,일,국어 점수, 영어 점수, 수학 점수
홍길동, 1992,7,17,100,90,70
희동이, 1992,4,3,90,100,100

네.... 그만 알아보자.

 

보기만 해도 숨이 막히는 듯한 이 모습이 옛날 개발자들의 흔적이다. 가독성은 심해로 보내버린 저세상 코드가 당시에는 무려 표준이었다. 이런 상황에서 우리의 더글라스형이 못 해 먹겠다면서 만든 데이터 형식이 바로

JSON이다.

 

 

이 JSON은 탄생과 함께 큰 호응을

 

 

 

 

 

 

 

받기는커녕 찐따 취급을 받았다. 당시 컴알못들은 저세상 코드가 더 익숙했는지 지 혼자 다른 거 쓰다고 놀리기 일 수였다. 사실 반쯤 맞는 말인데, JSON은 뭔가 정교한 기법을 사용해서 만든 게 아니라 더글라스 형이 그냥 "난 이제부터 이렇게 할랭!" 하면서 자기 마음대로 만든 거 기 때문이다. 그러다 화난 우리 더글라스 형이 json.org이라는 사이트를 만들었다.

https://www.json.org/json-en.html

JSON

 

더글라스 님은이 사이트에서 JSON에 대한 자세한 설명을 적어 자신의 참 뜻을 다른 사람들이 알리기 위해...........

 

 

 

 

는 개뿔. 그냥 다른 기업이 만든 공식 사이트처럼 속여서 다른 개발자들을 낚은 거였다. 여기 낚인 개발자들이 JSON을 쓰다가 좋으니까 널리 퍼지게 되었고, 2013년에는 자바스크립트에 공식 문법으로 편입되었다.

 

 

태생부터가 사기로 만들어진 놈......

 

 

 

JSON의 구조

---

JSON은 모든 언어에서 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을 구성된다.  사실 JSON은 J​avaScript Object Notation의 약자로 아래와 같이 키-값 쌍을 가지며 객체와 유사한 구조를 보인다.

 {
    "이름": "홍길동",
    "나이": 30,
    "취미": ["명상", "자원봉사"],
    "가족": {"부": "홍판서", "모": "춘섬"}
 }

 

그럼 어? 그냥 객체 쓰듯이 갖다가 쓰면 되지 않냐?라고 할 수 있다. 근데 자세히 보면 키에 해당하는 부분에도 " "가 붙어 있다. 또한 객체와 다르게 ' '는 허용하지 않는다. 따라서 객체와 비슷할 뿐이지 동일하지 않아서 변환하는 과정이 필요하다.

 

 

JSON 메서드

---

JSON.stringify(value, replacer[optional], space[optional])

 

• 첫번째 인자 value에 넣은 자바스크립트의 데이터를 JSON으로 변환시켜주는 메서드.

const obj={name:"kim"};
JSON.stringify(obj); //객체를 JSON으로 변환. 배열이나 숫자,문자열도 동일하게 가능

const arr=['a','b','c','d'];
JSON.stringify(arr);// 배열일 때 결과값: '["a","b","c","d"]'

• 함수 속성과 키가 심볼인 속성, 값이 undefined인 속성은 변환이 불가능하다.

let user = {
  sayHi() { // 무시
    alert("Hello");
  },
  [Symbol("id")]: 123, // 무시
  something: undefined // 무시
};

alert( JSON.stringify(user) ); // {} (빈 객체가 출력됨)

• 두번째 인자 replacer는 생략이 가능하며 함수나 배열을 넣을 수 있다. 여기서 JSON에 특정 속성만 취하거나 값을 변형할 수 있게 만든다. 함수가 들어가면 콜백함수가 되어서 리턴값을 대신 넣는다. 

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};
function replacer(key, value) {
  if (typeof value === "string") {
    return 'hello';
  }
  return value;
}
JSON.stringify(obj, replacer);
// {"id":12,"name":"hello","age":33} //name의 값을 helllo로 변경

• 배열의 경우 배열에 저장된 요소만  넣을 수 있게 만든다. 

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};
const replacer = ["name", "age"];
JSON.stringify(obj, replacer);
// {"name":"john","age":33}

• 세번째 인자 space는 생략 가능하며 문자열의 간격을 조절할 수 있다. 이때 숫자나 문자를 넣어서 간격을 지정할 수 있다.

const obj = {
  id: 12,
  name: 'john',
  age: 33, 
};
JSON.stringify(obj, null, 5);//5칸만큼 뛰우기. 최대 10까지 설정가능

/*{
     id: 12,
     name: 'john',
     age: 33, 
};*/

JSON.stringify(obj, null, '😆😆😆');// 문자열 일 경우, 키 앞에 문자열을 넣는다
/*{
😆😆😆id: 12,
😆😆😆name: 'john',
😆😆😆age: 33, 
};*/

JSON.stringify(obj, null, '\t\t');/// \t도 최대 10개 까지 가능

/*{
		id: 12,
		name: 'john',
		age: 33, 
};*/

 

JSON.parse 

• JSON을 객체로 변환시켜주는 메서드.

let json = {
        "drink": "coffee",
        "appetizer": "banana",
        "confirm": 56
}
JSON.parse(json);

// 결과:
//{
//       drink: "coffee",
//        appetizer: "banana",
//        confirm: 56
//}

•  두번째 인자에 콜백함수를 넣어서 값을 변경시키는 것도 가능하다.

const obj={p: 5};

JSON.parse(obj, (key, value) =>
  typeof value === 'number'
    ? value * 2 // 숫자라면 2배
    : value     // 나머진 그대로
);//p:"10"