Frontend/JavaScript
데이터 교환에 많이 사용되는 JSON 형식에 대해서 알아보자
dev6v6
2025. 2. 24. 14:00
JSON (JavaScript Object Notation) 이란?
JSON은 JavaScript 객체 표기법을 기반으로 만든 데이터 형식.
사람이 읽기 쉽고, 기계가 해석하기 쉬운 구조로 되어 있어서, 서버와 클라이언트 간 데이터 교환에 가장 많이 사용된다.
JSON은 key-value(키-값) 쌍으로 이루어져 있다.
JSON은 자료형 리스트와 딕셔너리를 섞어놓은 것처럼 생겼음
📌 JSON 데이터 예시 (문자열 형태로 저장됨)
{
"name": "Alice",
"age": 25,
"isStudent": false,
"skills": ["JavaScript", "Python", "Java"],
"address": {
"city": "Seoul",
"country": "Korea"
}
}
JSON의 특징 (JavaScript 객체와 비교)
| JSON | JavaScript 객체 | |
| 문자열 속성 (Key) | 반드시 "" (큰따옴표) 사용 | 따옴표 없이 가능 |
| 데이터 타입 | 문자열, 숫자, 불리언, 배열, 객체 가능 | 함수, undefined 사용 가능 |
| 사용 목적 | 데이터 저장/전송 | 로직 처리 및 데이터 조작 |
JSON은 반드시 key를 큰따옴표("")로 감싸야 한다!
{ "name": "Alice" } ✅ (JSON 형식)
{ name: "Alice" } ❌ (JavaScript 객체, JSON 아님!)
JSON을 JavaScript에서 다루는 방법
JavaScript에서 JSON을 사용하려면 문자열 → 객체, 객체 → 문자열 변환이 필요.
✔ JSON을 객체로 변환 (파싱)
📌 JSON 문자열을 JavaScript 객체로 변환할 때 JSON.parse()를 사용!
const jsonData = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonData);
console.log(obj.name); // "Alice"
console.log(obj.age); // 25
✔ 객체를 JSON 문자열로 변환
📌 JavaScript 객체를 JSON 형식의 문자열로 변환할 때 JSON.stringify()를 사용!
const person = {
name: "Bob",
age: 30,
isStudent: false
};
const jsonString = JSON.stringify(person);
console.log(jsonString);
// '{"name":"Bob","age":30,"isStudent":false}'
JSON이 많이 사용되는 곳
✅ API 응답 및 요청 (서버와 데이터 주고받을 때)
✅ 로컬 저장소 (localStorage, sessionStorage) 저장
✅ 설정 파일 (config.json)
✅ 데이터베이스에서 데이터 주고받을 때 (MongoDB 등)
✔ JSON은 데이터를 저장하고 주고받는 형식으로, JavaScript 객체와 유사하지만 문자열 형태로 다룸!
✔ 서버와 클라이언트 간 데이터를 주고받을 때 가장 많이 사용됨!
✔ JSON.parse() → JSON을 객체로 변환
✔ JSON.stringify() → 객체를 JSON으로 변환