JSON 이란?

♣ JSON (JavaScript Object Notation) ♣

 

JSON은 데이터를 구조화하여 표현하는 문자 기반의 데이터 포맷이다.
JSON은 문자 기반의 데이터 교환의 형식으로, 데이터 포맷이다.
특정 통신 방법이나 프로그래밍 문법에 의존하지 않으며, 단순히 데이터를 구조화 하여 표현하는 방식이다

 

 

 

▶  JSON 특징

• 가독성 : 텍스트 기반으로 사람이 쉽게 읽고 이해할 수 있으며, 컴퓨터가 또한 간편하게 처리할 수 있다.
• 인기 있는 데이터 형식 : 웹 애플리케이션 간에 데이터를 전송하거나 데이터를 저장할 때 자주 사용된다.
• 구조화된 데이터 표현 : 키-값 쌍의 객체와 값의 배열을 사용해 복잡한 데이터를 구조화하여 표현할 수 있다.
• 언어 독립성 : 특정 프로그래밍 언어에 종속되지 않으며, 다양한 언어와 플랫폼에서 데이터를 교환하는 데 이상적이다.
•                       (대부분의 언어에서 JSON을 처리할 수 있는 라이브러리를 제공한다.)
• 경량성 : 데이터 크기를 최소화하며, 직렬화와 역직렬화가 간편해 클라이언트와 서버 간의 데이터 전송에 효율적이다.
• 보안 : 데이터 구조가 명확하여 검증이 용이하지만, 안전한 전송을 위해 HTTPS와 같은 프로토콜을 사용을 권장한다.
• 다양한 데이터 유형 지원 : 문자열, 숫자, 불리언, 배열, 객체, null 등 다양한 기본 데이터 유형을 지원한다.
• JavaScript와의 관계 : JSON 문서 형식은 JavaScript 객체 표기법에서 유래했기에 문법이 유사하지만, JavaScript 코드 자체는 아니다. ☞ 그러나 JavaScript를 사용하여 JSON 데이터를 쉽게 객체로 변환할 수 있는 이점이 있다.

 

▶  JSON 구문 규칙

• 데이터는 키-값 쌍으로 구성된다.
• 데이터는 쉼표로 구분된다.
• 중괄호는 객체를 보관한다.
• 대괄호는 배열을 보관한다.

 

▶  JSON 객체 표기

• JSON 형식은 JavaScript 객체를 생성하는 코드와 구문적으로 동일하다. (아래 예시)
• JSON 객체는 중괄호 안에 작성된다.

JSON 형식	JavaSctript 객체
{          "name": "Alice",      "age": 30, "isStudent": false,      "skills": ["JavaScript", "HTML", "CSS"] }	const person = {      name: "Alice",      age: 30,      isStudent: false,      skills: ["JavaScript", "HTML", "CSS"] };

 

 

▶  JSON 데이터 : 이름(키) - 값

• JSON 데이터는 JavaScript 객체 속성처럼 키-값 쌍으로 작성된다.
• 키-값 쌍은 필드 이름(큰따옴표로 묶음), 콜론, 값으로 구성됩니다.

* 참고 - JSON 이름에는 큰따옴표가 필요합니다. JavaScript 이름은 필요하지 않다.

 

 

▶  JSON 배열

• JSON 배열은 대괄호 안에 작성된다. 
• JavaScript와 마찬가지로 배열에는 객체가 포함될 수 있다.

// employees 배열 속 세 개의 객체
"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]

 

 

 

▶  JSON 텍스트를 JavaScript 객체로 변환 예제

• JSON의 일반적인 용도는 웹 서버에서 데이터를 읽어 웹 페이지에 데이터를 표시하는 것이다.

 

예) 먼저 JSON 구문을 포함하는 JavaScript 문자열을 만들어보자.

      다음 JavaScript 내장 함수 JSON.parse()를 사용하여 문자열을 JavaScript 객체(obj) 로 변환해준다.

      마지막으로, 페이지에서 새로운 JavaScript 객체(obj) 를 사용해 본다.

<script>
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

var obj = JSON.parse(text);
</script>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

// 결과
// Anna Smith

 

 

 

 

 

 

* 참고

https://www.w3schools.com/js/js_json_intro.asp

W3Schools.com

https://www.w3schools.com/whatis/whatis_json.asp

W3Schools.com

 

https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

JSON이란 무엇인가?

https://www.oracle.com/kr/database/what-is-json/

JSON이 웹을 지배하는 이유

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON으로 작업하기 - Web 개발 학습하기 | MDN