[JavaScript] JSON

JSON 기본 이해: JSON.stringify와 JSON.parse 활용 및 JSON 형식과 문자열의 차이

1. JSON이란 무엇인가

JSON은 "JavaScript Object Notation"의 약자입니다. 이는 데이터를 구조화하여 표현하기 위한 개방형 표준 형식이며, 사람이 읽고 쓰기 용이하며 기계가 파싱하고 생성하기 쉬운 형태로 설계되었습니다. 웹 서비스에서 서버와 클라이언트 간의 데이터 교환에 주로 사용됩니다.

JSON의 주요 특징

가독성: key-value 쌍으로 구성되어 데이터의 의미를 쉽게 파악할 수 있습니다.
경량성: 다른 데이터 교환 형식(예: XML)에 비해 파일 크기가 작아 네트워크 전송 효율이 높습니다.
범용성: 대부분의 프로그래밍 언어에서 JSON을 처리하는 라이브러리 및 기능이 내장되어 있습니다.

JSON 데이터의 일반적인 구조

{
  "department": "IT 개발",
  "employeeId": "mjh",
  "isActive": true,
  "skills": ["JavaScript", "React", "Spring"],
  "contact": {
    "email": "contact@example.com",
    "phone": "010-xxxx-xxxx"
  }
}

2. JSON.stringify()와 JSON.parse()의 기능 및 형태

JSON 데이터는 주로 문자열 형태로 통신되거나 저장됩니다. 자바스크립트에서는 이러한 변환을 위해 JSON.stringify()와 JSON.parse() 두 가지 내장 함수를 제공합니다.

JSON.stringify(): 자바스크립트 객체를 JSON 문자열로 변환

• 자바스크립트 객체 또는 값을 JSON 형식의 문자열로 직렬화(serialize)합니다. 이 함수는 주로 객체를 웹 서버로 전송하거나 localStorage와 같은 웹 스토리지에 저장하기 전에 사용됩니다.

// 변환 전: 자바스크립트 객체
const userDataObject = {
  name: "김철수",
  age: 30,
  isAdmin: false,
  roles: ["user", "guest"]
};

console.log("변환 전 타입:", typeof userDataObject);
console.log("변환 전 값:", userDataObject);
/* 출력:
변환 전 타입: object
변환 전 값: { name: '김철수', age: 30, isAdmin: false, roles: [ 'user', 'guest' ] }
*/

// JSON.stringify() 적용: 객체를 JSON 문자열로 변환
const jsonStringifiedData = JSON.stringify(userDataObject);

console.log("변환 후 타입:", typeof jsonStringifiedData);
console.log("변환 후 값:", jsonStringifiedData);
/* 출력:
변환 후 타입: string
변환 후 값: {"name":"김철수","age":30,"isAdmin":false,"roles":["user","guest"]}
*/

변환 후 jsonStringifiedData 변수는 JavaScript의 object 타입이 아닌 string 타입의 값을 가지게 되며, 모든 키와 문자열 값은 이중 따옴표(")로 감싸집니다.

JSON.parse(): JSON 문자열을 자바스크립트 객체로 변환

• J JSON 형식의 문자열을 파싱(parse)하여 자바스크립트 객체로 역직렬화(deserialize)합니다. 이 함수는 주로 웹 서버로부터 JSON 응답을 수신하거나 localStorage에서 JSON 데이터를 읽어올 때 사용됩니다.

// 변환 전: JSON 형식의 문자열 (예: 서버로부터 수신된 데이터)
const receivedJsonString = '{"name":"박영희","age":25,"isAdmin":true,"roles":["admin","editor"]}';

console.log("변환 전 타입:", typeof receivedJsonString);
console.log("변환 전 값:", receivedJsonString);
/* 출력:
변환 전 타입: string
변환 전 값: {"name":"박영희","age":25,"isAdmin":true,"roles":["admin","editor"]}
*/

// JSON.parse() 적용: JSON 문자열을 자바스크립트 객체로 변환
const parsedDataObject = JSON.parse(receivedJsonString);

console.log("변환 후 타입:", typeof parsedDataObject);
console.log("변환 후 값:", parsedDataObject);
/* 출력:
변환 후 타입: object
변환 후 값: { name: '박영희', age: 25, isAdmin: true, roles: [ 'admin', 'editor' ] }
*/

변환 후 parsedDataObject 변수는 JavaScript의 object 타입이 되며, 해당 객체의 속성에 직접 접근하여 데이터를 활용할 수 있습니다.