230125 개발지식: JSON 편

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

JSON 사실 이게 정확히 뭔지는 모르고 그냥 데이터를 한 곳에 넣어두는 확장자겠거니..

정도로만 이해하고 있었다.(생각하고 있었던게 틀렸을지도)

 

그래서 이번 글을 정리하는김에 JSON에 대해 기록하고 기억하고자 한다.

 

---

JSON이란 JavaScript Object Notation의 약어로, JS의 데이터를 표현하는 하나의 포맷 이라고 생각하면 되겠다.

이 친구는 속성과 값의 하나의 쌍으로 이뤄져 있는데, 소위 우리가 알고 있는 KEY : VALUE형태 이다.

 

마치 객체 데이터와 유사하고, 사람이 읽을 수 있는 용도의 포맷이다.

JSON은 비동기 브라우저 또는 서버간의 통신을 위해 사용되는데,

예전에 주로 사용되던 XML(앱에서는 현재도 왕왕 쓰고있는)을 대체할 주요 데이터 포맷이라 할 수 있다.

 

특히 JSON은 인터넷에서 특정데이터를 주고받을 때 사용되는 것으로 익히 알려져있고,

주고받는 항목 또는 양에 따라 데이터 하나당의 범위가 어어엄청 많을 수도 있고,

그 한 데이터 안의 타입도 다양하게 있을 수 있다.

때문에 컴퓨터 프로그램의 변수값을 표현하는데 유용하다

 

JSON은 보통 아래 예시처럼 생겼다.

 

날씨 데이터 관련 JSON

 

JSON의 공식 미디어 타입은 application/json이고, 확장자는 .json이다.

 

JSON의 기본 자료형은 Number, String, Boolean, Array, Object, null이다.

undefined를 제외하면 다 사용할 수 있다.

다만, JSON은 무조건...!!! 큰따옴표 "" 로만 구성이 가능하다!!

 

암튼 JSON데이터는 실제로 받아보면 위 사진처럼 정돈된 상대로 보여지는게 아니라

 

정리되지 않은 JSON

 

기본적으로 위 사진 처럼 나온다. 굉장히 정신 없고 보기가 어렵다.

나같은 초보자 개발 공부러는 이런거 보면 걍 놓을게 뻔한... 그런 형태의 자료이다.

 

때문에 크롬에서는 JSON데이터를 브라우저 상에서 읽기 편하도록 제공하는 확장프로그램(익스텐션)들이 있는데

 

나는 그 중에 두개의 확장 프로그램을 사용한다.

 

JSON Viewer

우선 기본적으로 내 크롬에 활성화 시켜놓은 JSON Viewer 이걸 주로 사용한다.

그냥 json 형태로 바로 보여줘서 편하다 읽기 쉬운상태로 변환해서 보여주기 때문에 추천한다.

브라우저에서 볼 수 있는 테마도 여러개가 있다.(개발 공부를 한다면 무족권.. 검은색..!!!)

 

 

두번째는 

 

JSON Formatter

이것도 첫번째 확장프로그램과 마찬가지로 보기편하게 포맷해서 보여준다.

얘랑 첫번째랑 별차이는 없지만, json테마가 첫번째가 더 눈이 편해서 첫번째 프로그램만 활성화 해두게 된다.

(아마 얘는 사용을 안해서 조만간 삭제할지도..?)