[mjt] JSON과 메서드에 대해 알아보자

January 3, 2025

JSON과 메서드에 대해 알아보자

JSON(JavaScript Object Notation)은 텍스트 기반 데이터 포맷으로, 데이터를 교환하거나 저장할 때 많이 사용된다. JSON의 기본 개념과 JavaScript에서 활용할 수 있는 주요 메서드에 대해 알아보자.

JSON이란?

JSON은 키-값 쌍으로 데이터를 표현하며, 읽기 쉽고 가볍다는 장점이 있다. 주로 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환에 사용된다.

1-1) JSON의 특징

텍스트 기반으로 사람과 기계 모두 읽기 쉽다.
언어에 독립적이며 다양한 프로그래밍 언어에서 사용 가능하다.
데이터 구조는 객체와 배열을 사용하여 표현한다.

1-2) JSON 구조 예시

{
  "name": "John Doe",
  "age": 30,
  "isMarried": false,
  "skills": ["JavaScript", "React", "Node.js"],
  "address": {
    "city": "Seoul",
    "zipCode": "12345"
  }
}

JSON 관련 메서드

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

2-1) JSON.stringify()

객체 또는 배열을 JSON 문자열로 변환한다.

const obj = {
  name: "rarrit",
  age: 30,
  skills: ["HTML", "CSS", "JavaScript"],
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 출력: {"name":"rarrit","age":30,"skills":["HTML","CSS","JavaScript"]}

2-2) JSON.parse()

JSON 문자열을 객체 또는 배열로 변환한다.

const jsonString =
  '{"name":"rarrit","age":30,"skills":["HTML","CSS","JavaScript"]}';
const obj = JSON.parse(jsonString);

console.log(obj);
// 출력: { name: 'rarrit', age: 30, skills: [ 'HTML', 'CSS', 'JavaScript' ] }

주의할점

3-1) JSON 문자열 형식

JSON.parse()는 유효한 JSON 문자열만 처리할 수 있다. 유효하지 않은 문자열을 파싱하려고 하면 오류가 발생합니다.

try {
  JSON.parse("{invalid: json}");
} catch (error) {
  console.error("파싱 에러:", error.message);
}

3-2) 순환 참조 객체

JSON.stringify()는 순환 참조 객체를 처리할 수 없다.

const obj = {};
obj.self = obj;

try {
  JSON.stringify(obj);
} catch (error) {
  console.error("순환 참조 에러:", error.message);
}

회고

JSON은 프론트엔드 백엔드 간의 데이터를 교환할 때 자주 사용되어 중요하고 메서드를 잘 이해해야 될 것 같다.

참고 문서

ko.javascript.info - JSON과 메서드

Twitter Facebook LinkedIn

RARRIT