JavaScript JSON

JSON은 무엇인가?

JSON은 "JavaScript Object Notation"의 약자로, 데이터 저장 및 교환을 위한 간단한 텍스트 형식입니다.
이 구조는 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 사용할 수 있습니다.

 

JSON은 데이터를 표현하는 형식입니다. 일상생활에서 데이터를 교환할 때 사용되는 것과 비슷한 개념이에요. 예를 들어, 친구에게 사진, 이름, 전화번호 등의 연락처 정보를 주고받을 때와 같은 것이죠.

JSON은 어디에 쓰일까?

웹사이트에서 정보 주고받기: 웹사이트에서 날씨 정보를 보여주고 싶다면, 날씨 정보를 가진 서버와 통신해서 데이터를 가져와야 해요. 이 때 JSON 형식으로 데이터를 주고받습니다.

설정 파일로 사용하기: 어떤 프로그램의 설정을 저장할 때 JSON 형식으로 저장하기도 해요. 설정 내용을 쉽게 읽고 쓸 수 있기 때문이죠.

데이터 저장하기: 일부 데이터베이스는 정보를 JSON 형식으로 저장합니다. 쉽게 정보를 넣고 빼고 할 수 있기 때문이에요.

 

JSON의 구조와 규칙

이름과 값의 쌍: "key": "value" 형태로 표현됩니다.
객체: 중괄호 {}로 감싸며, 내부에는 여러 이름/값 쌍이 포함될 수 있습니다.
예: {"firstName":"John", "lastName":"Doe"}
배열: 대괄호 []로 표현되며, 내부에 객체가 포함될 수 있습니다.

 

예:

"employees": [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]

 

JSON 사용 예시

JSON을 사용하여 직원의 정보를 표현해보겠습니다. 아래는 JSON 형식으로 직원 3명의 정보를 배열로 표현한 것입니다.

{
"employees": [
{"firstName": "John", "lastName": "Doe"},
{"firstName": "Anna", "lastName": "Smith"},
{"firstName": "Peter", "lastName": "Jones"}
]
}
이 정보를 웹 페이지에 표시하려면 다음과 같이 JavaScript로 변환할 수 있습니다.

JSON 문자열 생성:

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

 

JSON 문자열을 JavaScript 객체로 변환:

const obj = JSON.parse(text);

 

웹 페이지에 정보 표시:

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