JSON 데이터 다루기: 주니어 개발자를 위한 기본 가이드

JSON(JavaScript Object Notation)은 데이터를 저장하고 교환하는 데 사용되는 경량의 데이터 형식입니다. 웹 개발에서 JSON은 클라이언트와 서버 간에 데이터를 전송할 때 매우 중요한 역할을 합니다. 이 가이드에서는 JSON 데이터를 다루는 기본적인 방법을 알아보겠습니다.

JSON 이해하기

JSON은 텍스트 기반의 데이터 형식으로, 사람과 기계 모두가 이해하기 쉽게 설계되었습니다. JSON은 두 가지 구조를 기반으로 합니다:

• 이름/값 쌍의 집합: 여기서 이름(키)은 문자열이고, 값은 문자열, 숫자, 배열, 불리언(true/false), null 또는 다른 객체일 수 있습니다.
• 값의 순서화된 목록(배열): 배열은 대괄호([])로 묶인 값들의 집합입니다.

JSON 데이터 예시

{
  "name": "John Doe",
  "age": 30,
  "isDeveloper": true,
  "skills": ["HTML", "CSS", "JavaScript"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

위 예시에서 볼 수 있듯이, JSON 객체는 중괄호()로 묶여 있으며, 각 이름/값 쌍은 쉼표(,)로 구분됩니다. 배열은 대괄호([])로 표시됩니다.

JSON 데이터 다루기

JSON 파싱

웹 개발에서는 종종 서버에서 받은 JSON 문자열을 JavaScript 객체로 변환해야 할 필요가 있습니다. 이를 위해 JSON.parse() 메서드를 사용할 수 있습니다.

const jsonString = '{"name": "John Doe", "age": 30}';
const user = JSON.parse(jsonString);

console.log(user.name); // John Doe

JSON 문자열화

반대로, JavaScript 객체를 JSON 문자열로 변환해야 하는 경우도 있습니다. 이때는 JSON.stringify() 메서드를 사용합니다.

const user = {
  name: "John Doe",
  age: 30
};

const jsonString = JSON.stringify(user);

console.log(jsonString); // {"name":"John Doe","age":30}

실습

이제 여러분 차례입니다. 다음 객체를 JSON 문자열로 변환해 보세요:

const project = {
  title: "Web Development",
  completed: false,
  technologies: ["HTML", "CSS", "JavaScript"]
};

그리고 변환된 JSON 문자열을 다시 JavaScript 객체로 파싱해 보세요. 이 과정을 통해 JSON 데이터를 다루는 기본적인 방법을 익힐 수 있습니다.

결론

JSON은 웹 개발에서 데이터를 교환하는 데 필수적인 형식입니다. 이 가이드를 통해 JSON 데이터를 다루는 기본적인 방법을 배웠습니다. 실제 프로젝트에서 이러한 기술을 활용하여 더 효율적으로 데이터를 관리하고 교환할 수 있기를 바랍니다.