JavaScript - JSON: A Beginner's Guide

안녕하세요, 미래의 코딩 마법사 여러분! 오늘 우리는 JSON의 세계로 흥미로운 여정을 떠납니다. 이전에 들어본 적이 없다면 걱정 마세요 - 이 튜토리얼이 끝나면 프로처럼 JSON을 다루게 될 것입니다. 당신의 좋아하는 음료를 손에 쥐고 편안하게 앉아, 함께 빠져들어 보겠습니다!

JSON이란?

JSON은 JavaScript Object Notation의 약자로, 가벼운 데이터 교환 형식입니다. 이게 무슨 말인지 이해하기 어렵게 들릴 수 있지만, 컴퓨터가 서로 소통하고 정보를 쉽게 이해할 수 있도록 만든 방법이라고 생각해 보세요.

어린이들이 수업 시간에 비밀 메모를 주고받는 것을 상상해 보세요 (물론 그런 일을 권장하는 것은 아닙니다!). JSON은 그 메모를 표준화된 방식으로 작성하여 누구나 빠르고 쉽게 메시지를 이해할 수 있도록 하는 것입니다.

JSON의 특징

자세한 내용에 들어가기 전에 JSON이 특별한 이유를 알아보겠습니다:

1. 가벼우고 읽기 쉬움
2. 언어 독립적입니다 (JavaScript뿐만 아니라!)
3. 두 가지 보편적인 구조에 기반합니다: 객체와 배열

이러한 특징 덕분에 JSON은 데이터 저장과 전송에 매우 적합하여 웹 애플리케이션에서 널리 사용됩니다.

JSON 문법

이제 JSON의 기본 문법을 살펴보겠습니다. 처음에는 이상하게 보일 수 있지만, 단계별로 설명하겠습니다.

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

이것은 간단한 JSON 객체입니다. 이를 구성해 보겠습니다:

• 전체 객체는 중괄호 {}로 둘러싸여 있습니다.
• 내부에는 키-값 쌍이 있습니다.
• 키는 항상 문자열이며, 이는 이중 따옴표로 둘러싸여 있습니다.
• 값은 문자열, 숫자, 불리언, 배열, 객체, null 중 하나입니다.
• 키-값 쌍은 쉼표로 구분됩니다.

JSON 데이터

JSON은 다양한 유형의 데이터를 표현할 수 있습니다. 몇 가지 예를 보겠습니다:

문자열

{"message": "Hello, World!"}

숫자

{"age": 30}

불리언

{"isStudent": true}

null

{"spouse": null}

JSON은 데이터를 쉽게 이해하고 사용할 수 있도록 표현하는 것이 목적입니다. 각 정보 조각에 대해 상세한 프로필을 작성하는 것을 생각해 보세요.

JSON 객체

이미 간단한 JSON 객체를 보았지만, 좀 더 깊이 탐구해 보겠습니다. JSON 객체는 여러 키-값 쌍을 포함할 수 있으며, 심지어 객체를 포함할 수도 있습니다.

{
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
}

이 예제에서 우리는 주요 객체에 "person" 키를 가지고 있습니다. "person"의 값은 다양한 정보를 포함한 또 다른 객체입니다. 배열을 포함하고 있음에 주목하세요.

JSON 배열

JSON 배열은 값을 순서대로 나열한 목록입니다. 이는 꺽쇠 []로 둘러싸여 있으며, JSON 데이터의 어떤 유형도 포함할 수 있습니다.

{
"fruits": ["apple", "banana", "cherry"],
"numbers": [1, 2, 3, 4, 5],
"mix": [42, "answer", true, null]
}

배열은 관련 항목의 컬렉션을 표현할 때 매우 유용합니다. 예를 들어, 레시피의 재료 목록이나 게임의 고득점 목록입니다.

JSON 데이터 접근

이제 JSON 데이터의 구조를 알고 있으므로, JavaScript에서 이를 어떻게 접근하는지 배워보겠습니다. 이전에 사용한 "person" 객체를 예로 들어보겠습니다.

let data = {
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
};

console.log(data.person.name); // 출력: Alice
console.log(data.person.hobbies[1]); // 출력: cycling
console.log(data.person.address.city); // 출력: Wonderland

이와 같이 점 표기법을 사용하여 객체 프로퍼티에 접근하고, 꺽쇠를 사용하여 배열 요소에 접근합니다. 정보를 찾는 지도를 따르는 것과 같습니다!

JSON 메서드

JavaScript는 JSON을 다루기 위한 두 가지 주요 메서드를 제공합니다:

메서드	설명
JSON.parse()	JSON 문자열을 JavaScript 객체로 변환
JSON.stringify()	JavaScript 객체를 JSON 문자열로 변환

이제 이 메서드들을 사용해 보겠습니다:

// JSON.parse()
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // 출력: John

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // 출력: {"name":"Alice","age":25}

이 메서드들은 JavaScript와 JSON 간의 효과적인 소통을 돕는 역할을 합니다.

JSON과 JavaScript 객체의 차이

JSON은 JavaScript 객체와 매우 유사하게 보이지만, 몇 가지 중요한 차이점이 있습니다:

1. JSON 키는 문자열이어야 하며, 이는 이중 따옴표로 둘러싸여 있습니다.
2. JSON 값은 문자열, 숫자, 객체, 배열, 불리언, null 중 하나여야 합니다.
3. JSON은 함수나 주석을 지원하지 않습니다.

다음은 간단한 비교입니다:

// 유효한 JavaScript 객체
let jsObj = {
name: 'John',
age: 30,
greet: function() { console.log('Hello!'); }
};

// 동일한 JSON
let jsonObj = {
"name": "John",
"age": 30
};

주의해야 할 점은 함수와 비표준 키가 JSON 버전에 포함되지 않는다는 것입니다.

JSON 문자열을 JavaScript 객체로 변환

이미 JSON.parse()를 사용하여 JSON 문자열을 JavaScript 객체로 변환하는 방법을 보았습니다. 이제 더 복잡한 예제를 보겠습니다:

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // 출력: Alice
console.log(obj.pets[0].name); // 출력: Fluffy

이는 서버에서 데이터를 수신할 때 특히 유용합니다.

JavaScript 객체를 JSON으로 변환

마찬가지로 JSON.stringify()를 사용하여 JavaScript 객체를 JSON 문자열로 변환할 수 있습니다. 이는 데이터를 서버로 전송할 때 자주 필요합니다.

let person = {
name: "Bob",
age: 35,
hobbies: ["swimming", "painting"],
address: {
street: "456 Elm St",
city: "Dreamland"
}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// 출력: {"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

이제 JSON에 대한 간단한 강의를 마치셨습니다. 연습이 완벽함을 기억하시고, JSON 데이터를 만들고 조작하는 데 두려워하지 마세요. 곧 프로처럼 JSON을 다루게 될 것입니다!

Credits: Image by storyset