TIL

JSON

ECMAScript 3rd 1999 에서 쓰여지는 Object에서 큰 영감을 받아 만들어진 데이터 포맷
JavasScript의 Object처럼 JSON도 동일하게 {key: value} 형태
JSON은 browser 뿐만 아니라 server와 데이터를 주고 받을 때 또는
server와 통신을 하지 않아도 Object를 file system에 저장할 때 많이 사용하는 데이터 타입

• 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷
• 텍스트를 기반으로 가벼움
• 눈으로도 읽기 편함
• key-value로 이루어진 파일 포맷
• 데이터를 서버와 주고받을 때 직렬화하고 데이터를 전송하는데 사용
• 프로그래밍 언어나 언어를 사용하는 플랫폼 상관없이 사용★
  (JSON으로 직렬화된 Object를 다시 그 언어의 특징에 맞게 Object로 변환하고, 다시 Object를 JSON으로 직렬화하는 것을 지원 / JSON ⇄ Object)

JSON Point!!

1. Object --(serialize)--> string(JSON)

JSON interface 안에 있는 2가지 API 중 stringify(obj)

• ''(홑따옴표)형태의 배열을 JSON으로 바꾸면 ""(쌍따옴표)형태로 배열 타입처럼 보임 - JSON의 규격 사항

• Object를 JSON으로 바꿀 때, Object의 함수는 Object에 있는 데이터가 아니기 때문에 JSON에 포함되지 않음(변환, 출력x) ★유의!
  (javascript 자체에 들어있는 특별한 데이터인 symbol도 JSON에 포함되지 않음)

• JSON으로 변환되는 것을 세밀하게 통제하고 싶다면 콜백 함수를 이용(key, value로 전달받음)

2. Object <--(deserialize)-- string(JSON)

JSON interface 안에 있는 2가지 API 중 parse(json)

• Object의 함수는 직렬화될 때 (원래 함수가 포함되지 않았던) 문자열의 JSON으로 부터 다시 Object로 변환했기 때문에 당연히 함수가 없음 ★코딩할 때 유의!

• Date라는 Object는 데이터 자체가 string 형태이기 때문에 문자열의 JSON으로 부터 다시 Object로 변환해도 string 형태로 할당됨
  에러가 발생하지 않기 위해 콜백 함수를 이용해 Date라는 Object 자체로 출력되어야 함

◈ 추가 개념

• 오버로딩(Overloading): 함수의 이름은 동일하지만 어떤 파라미터를 전달하는지, 몇 개의 파라미터를 전달하는지에 따라서 각각 다른 방식으로 호출 가능

참고영상: 드림코딩 by 엘리의 JSON의 개념정리와 활용방법

---

▶ JSON(JavaScript Object Notation)

자바스크립트를 이용해 동적인 요소를 추가
동적으로 처리하고자 할 때, html 안에 html(UI 요소)과 데이터 요소가 함께 있는 것은 좋지 못함(정적인 형태일 때만 사용)

(js 파일은 비즈니스 로직, 즉 코드가 담겨있는 파일이기 때문에 js 파일에 배열을 이용해 코드와 데이터를 섞어서 보관하는 방법 말고!)
파일이나 데이터베이스, 백엔드 서비스에 데이터를 따로 보관

JSON은 JavaScript와 매우 유사하여 object 안에는 key와 value로 구성되어 있음
(items라는 배열 안에 여러개의 item object들이 있음 - 바깥 value가 key: value 형태)

▶ fetch the JSON file

json 파일을 동적으로 불러오는데 시간이 소요되기 때문에 Promise를 리턴하도록 만듦
성공적으로 불러오면(Promise가 성공적으로 값을 전달하면) 실행되게 하는 '.then()'
불러오지 못한 경우에는 '.catch()'

fetch()는 해당하는 파일의 경로나 url을 작성하면 간단하게 데이터를 네트워크를 통해 받아올 수 있음
데이터를 성공적으로 받아오면 'Response'라는 object를 전달해줌
(우리가 원하는 데이터는 Response의 'body'에 들어있음)
html이 완료되고 자바스크립트가 실행되고나서 json 파일을 불러오게 됨
MDN fetch

▶ display the items

JSON 형식의 items 데이터(배열)를 html 요소로 변환해서 페이지에 나타냄
innerHTML을 이용해 li 태그 그룹으로 만들어 부모요소에 추가
각각에 해당하는 item들을 html li 태그의 배열로 변환하기 위해 mapping함
(한 가지 형태의 배열을 다른 형태의 배열로 변환해주는) map을 사용

• map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
  MDN Array.prototype.map()

먼저 html li 태그들을 문자열로 변환시킴
문자열이 들어있는 배열들을 한 가지의 문자열로 병합하기 위해 join API 를 사용하여 item들을 동적으로 추가

• join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듦
  MDN Array.prototype.join()