18.5.3 JSON과 객체의 차이 - 데이터를 주고받는 두 가지 방법

📘 18.5.3 JSON과 객체의 차이 - 데이터를 주고받는 두 가지 방법

반가워요, 코딩을 사랑하는 여러분. 오늘은 우리가 지금까지 함께 걸어온 길에서 정말 소중한 이야기를 나누려고 해요. 자바스크립트 객체와 JSON이라는 특별한 형식이 어떻게 다른지, 그 미묘한 차이를 함께 살펴보겠습니다.

마치 같은 마음을 담은 편지를 한국어로 쓰느냐, 영어로 쓰느냐의 차이처럼, 같은 정보를 서로 다른 방식으로 표현하는 방법이에요. 각각의 고유한 아름다움이 있답니다.

🧠 새로운 친구들과 마음 나누기

먼저 오늘 만날 새로운 개념들을 정성스럽게 소개해드릴게요.

이름	하는 일
JSON	컴퓨터들이 서로 데이터를 주고받을 때 사용하는 표준 형식
자바스크립트 객체	프로그램 안에서 사용하는 데이터 저장소
데이터 전송	서로 다른 컴퓨터나 프로그램이 정보를 주고받는 것

JSON은 "JavaScript Object Notation"이라는 긴 이름의 줄임말이에요. "제이슨"이라고 부르죠.

✨ 두 가지 방법의 차이점

우리 학교에서 친구들과 쪽지를 주고받는 모습을 떠올려보세요.

교실 안에서 쓰는 쪽지 (자바스크립트 객체)는 우리끼리만 알아볼 수 있는 자유로운 형식으로 쓸 수 있어요. 그림도 그리고, 우리만의 말도 쓰고, 함수처럼 특별한 기능도 넣을 수 있죠.

다른 학교로 보내는 편지 (JSON)는 정해진 규칙에 맞춰 정성스럽게 써야 해요. 누구나 이해할 수 있도록 표준 형식을 지켜야 하거든요.

🏠 두 방법의 서로 다른 특징

자바스크립트 객체의 특징

자바스크립트 객체는 우리 교실 안의 공책과 같아요. 자유롭게 여러 가지를 담을 수 있어요.

// 자바스크립트 객체 - 교실 안 공책
const 학급회장 = {
  이름: "김철수",           // 따옴표 없어도 괜찮아요
  '나이': 11,              // 작은따옴표도 괜찮아요
  "학년": "5학년",         // 큰따옴표도 물론 괜찮고요
  인사하기: function() {   // 특별한 기능(함수)도 넣을 수 있어요
    return "안녕하세요!";
  },
  특별한값: undefined      // 정의되지 않은 값도 가질 수 있어요
};

JSON의 특징

JSON은 우체국을 통해 보내는 정식 편지와 같아요. 엄격한 규칙을 지켜야 해요.

// JSON - 우체국 편지 형식
const 학급회장정보 = `{
  "이름": "김영희",
  "나이": 10,
  "학년": "5학년",
  "취미": ["독서", "그림그리기"]
}`;

🎭 각각의 장점과 단점

자바스크립트 객체의 장점과 단점

장점:

• 함수 같은 특별한 기능을 담을 수 있어요
• 여러 가지 데이터 타입을 자유롭게 사용할 수 있어요
• 이름표(속성명) 작성이 자유로워요

단점:

• 다른 프로그램으로 직접 보낼 수 없어요
• 파일로 저장하기 어려워요

JSON의 장점과 단점

장점:

• 어떤 프로그래밍 언어에서도 사용할 수 있어요
• 인터넷을 통해 빠르게 전송할 수 있어요
• 파일로 저장하고 불러오기 쉬워요

단점:

• 함수나 특별한 기능을 담을 수 없어요
• 엄격한 문법 규칙을 지켜야 해요

🧪 실제로 비교해보기

🔹 자바스크립트 객체 만들어보기

// 우리 반 친구 정보를 객체로 만들어보아요
const 반친구 = {
  이름: "박민수",
  나이: 11,
  좋아하는과목: ["수학", "과학"],
  자기소개: function() {
    return `안녕! 나는 ${this.이름}이야!`;
  },
  생일: new Date("2013-05-15")
};

// 객체의 능력을 확인해보아요
console.log("이름:", 반친구.이름);
console.log("인사:", 반친구.자기소개());
console.log("생일 타입:", typeof 반친구.생일);

🔹 객체를 JSON으로 바꿔보기

이제 객체를 JSON으로 바꿔보겠어요. 이때 사용하는 명령어는 JSON.stringify()예요.

// 객체를 JSON으로 바꾸는 방법
const JSON편지 = JSON.stringify(반친구, null, 2);

console.log("JSON 편지 모습:");
console.log(JSON편지);

// 어떤 정보가 사라졌는지 확인해보아요
console.log("자기소개 기능이 있나요?", JSON편지.includes("자기소개"));
console.log("생일이 그대로 있나요?", JSON편지.includes("2013-05-15"));

자기소개하는 기능(함수)이 사라졌네요! 그리고 생일(Date 객체)은 문자열로 바뀌었어요.

🔹 JSON을 다시 객체로 바꿔보기

이번에는 반대로 JSON을 다시 객체로 바꿔보겠어요. 이때 사용하는 명령어는 JSON.parse()예요.

// JSON을 다시 객체로 바꾸는 방법
const 다시객체로 = JSON.parse(JSON편지);

console.log("다시 객체가 된 모습:");
console.log(다시객체로);

// 정보가 돌아왔는지 확인해보아요
console.log("이름:", 다시객체로.이름);
console.log("자기소개 기능이 돌아왔나요?", typeof 다시객체로.자기소개);
console.log("생일 타입:", typeof 다시객체로.생일);

아쉽게도 자기소개하는 기능(함수)은 돌아오지 않았어요. 그리고 생일도 문자열 상태로 남아있네요.

🎯 언제 무엇을 사용할까요?

자바스크립트 객체를 사용할 때:

• 우리 프로그램 안에서 데이터를 정리하고 싶을 때
• 여러 가지 기능(함수)이 필요할 때
• 복잡한 계산이나 작업을 해야 할 때
• 시간이나 날짜를 다뤄야 할 때

JSON을 사용할 때:

• 다른 컴퓨터에게 데이터를 보내야 할 때
• 데이터를 파일로 저장해야 할 때
• 서버와 브라우저가 정보를 주고받을 때
• 설정 정보를 저장할 때

🔄 변환 과정 정리

객체와 JSON 사이의 변환 과정을 차근차근 정리해보겠어요.

1단계: 자바스크립트 객체를 만들어 다양한 데이터와 기능을 담아요.

2단계: JSON.stringify()로 문자열 형태의 JSON으로 바꿔요.

3단계: JSON 문자열을 다른 컴퓨터로 보내거나 파일로 저장해요.

4단계: JSON.parse()로 다시 자바스크립트 객체로 바꿔요.

5단계: 변환 과정에서 어떤 정보가 사라졌는지 확인하고 필요하면 보완해요.

🧚‍♀️ 실생활 예시: 온라인 쇼핑몰

온라인 쇼핑몰에서 일어나는 일을 예로 들어보겠어요.

// 쇼핑몰에서 상품 정보 (자바스크립트 객체)
const 상품정보 = {
  "상품번호": 12345,
  "상품명": "아이패드",
  "가격": 500000,
  "재고": 10,
  "할인중": true,
  "설명": "최신 아이패드입니다",
  "옵션": ["256GB", "512GB"],
  "가격계산": function(할인율) {
    return this.가격 * (1 - 할인율);
  }
};

// 서버로 보내기 위해 JSON으로 변환
const 서버전송용 = JSON.stringify(상품정보, null, 2);

console.log("서버로 보낼 데이터:");
console.log(서버전송용);

가격계산하는 기능은 서버로 보낼 때 사라지겠죠? 하지만 상품의 기본 정보들은 완벽하게 전달될 거예요.

🎈 재미있는 실험: 어떤 정보가 사라질까?

여러 가지 데이터 타입을 가진 객체로 실험해보겠어요.

// 실험용 객체 만들기
const 실험객체 = {
  문자열: "안녕하세요",
  숫자: 123,
  참거짓: true,
  빈값: null,
  사라질값: undefined,
  배열: [1, 2, 3],
  중첩객체: {
    안쪽데이터: "숨겨진 정보"
  },
  특별기능: function() {
    return "기능이 실행되었습니다!";
  },
  오늘날짜: new Date()
};

console.log("원래 모습 (자바스크립트 객체):");
console.log(실험객체);

// JSON으로 변환
const JSON형태 = JSON.stringify(실험객체, null, 2);
console.log("\nJSON 편지 형태:");
console.log(JSON형태);

// 다시 객체로 복원
const 복원된객체 = JSON.parse(JSON형태);
console.log("\n복원된 모습:");
console.log(복원된객체);

// 변화 분석
console.log("\n=== 무엇이 변했을까요? ===");
console.log("사라질값(undefined) 남아있나요?", "사라질값" in 복원된객체);
console.log("특별기능(함수) 남아있나요?", typeof 복원된객체.특별기능);
console.log("오늘날짜가 Date 객체인가요?", 복원된객체.오늘날짜 instanceof Date);
console.log("오늘날짜의 타입:", typeof 복원된객체.오늘날짜);

🧠 자주 하는 실수와 해결 방법

❌ 실수 1: JSON을 객체인 줄 알고 바로 사용하기

// 서버에서 받은 JSON 문자열
const 서버데이터 = '{"이름": "홍길동", "나이": 25}';

// 잘못된 사용법
// console.log(서버데이터.이름); // undefined가 나와요!

// 올바른 사용법
const 객체로변환 = JSON.parse(서버데이터);
console.log("이름:", 객체로변환.이름); // "홍길동"이 제대로 나와요!

❌ 실수 2: 함수가 포함된 객체를 JSON으로 보내려고 하기

// 함수가 포함된 객체
const 문제객체 = {
  이름: "철수",
  인사: function() { return "안녕!"; }
};

// JSON으로 변환하면 함수가 사라져요
const JSON문자열 = JSON.stringify(문제객체);
console.log("함수가 사라졌어요:", JSON문자열); // {"이름":"철수"}

// 해결 방법: 함수는 따로 처리해요
const 데이터만객체 = {
  이름: "철수",
  인사메시지: "안녕!" // 함수 대신 결과값을 저장해요
};

✏️ 연습 문제들을 풀어보세요

우리가 배운 내용을 손끝으로 확인해보는 시간이에요. 차분하게, 여러분만의 속도로 천천히 해보세요.

Ex1) 우리 가족 소개하기

가족 구성원들의 정보를 담은 객체를 만들고, JSON으로 바꾼 다음 다시 객체로 되돌려보세요.

// 여러분의 가족 정보를 여기에 적어보세요
const 우리가족 = {
  아빠: {
    이름: "김아빠",
    나이: 40,
    직업: "회사원"
  },
  엄마: {
    이름: "김엄마", 
    나이: 38,
    직업: "선생님"
  },
  나: {
    이름: "김어린이",
    나이: 10,
    좋아하는과목: "수학"
  }
};

// JSON으로 변환해보세요
const 가족편지 = JSON.stringify(우리가족, null, 2);
console.log("가족 소개 편지:");
console.log(가족편지);

// 다시 객체로 변환해보세요
const 편지에서복원 = JSON.parse(가족편지);
console.log("복원된 가족 정보:");
console.log(편지에서복원);

Ex2) 학급 친구들 정보 정리하기

// 학급 친구들의 정보를 정리해보세요
const 학급친구들 = [
  {
    이름: "김철수",
    번호: 1,
    좋아하는색: "파랑",
    취미: ["축구", "독서"]
  },
  {
    이름: "이영희", 
    번호: 2,
    좋아하는색: "분홍",
    취미: ["그림", "피아노"]
  }
];

// JSON으로 변환하고 다시 복원해보세요
const 친구들편지 = JSON.stringify(학급친구들, null, 2);
const 복원된친구들 = JSON.parse(친구들편지);

console.log("친구들 정보가 잘 보존되었나요?");
console.log("원래 친구 수:", 학급친구들.length);
console.log("복원된 친구 수:", 복원된친구들.length);
console.log("첫 번째 친구 이름:", 복원된친구들[0].이름);

🤔 심화 문제로 실력 확인하기

Q1. JSON과 자바스크립트 객체의 장점과 단점을 비교해 보세요.

자바스크립트 객체의 장점:

• 다양한 기능 사용 가능 (함수 포함)
• 유연한 데이터 타입 (undefined, Date 객체 등)
• 자유로운 속성명 작성

자바스크립트 객체의 단점:

• 다른 프로그램으로 직접 전송 불가
• 파일 저장이 어려움

JSON의 장점:

• 모든 프로그래밍 언어에서 사용 가능
• 네트워크 전송에 최적화
• 표준화된 형식

JSON의 단점:

• 함수나 특별한 객체 포함 불가
• 엄격한 문법 규칙

Q2. 다음 상황에서 어떤 것을 사용해야 할지 설명해 보세요.

상황 1: 웹사이트에서 서버로 사용자 정보를 보내야 할 때
답변: JSON을 사용해야 해요. 서로 다른 시스템 간 통신에는 표준 형식이 필요해요.

상황 2: 웹페이지에서 복잡한 계산기 만들기
답변: 자바스크립트 객체를 사용해야 해요. 계산 기능들을 함수로 만들어 담을 수 있어요.

상황 3: 게임 설정을 파일로 저장하기
답변: JSON을 사용해야 해요. 파일로 저장하고 불러오려면 JSON 형태여야 해요.

---

📚 복습 타임: 이전에 배운 내용 확인하기

18단원까지 왔으니 이전에 배운 중요한 내용들을 복습해볼까요?

복습 문제 1: 객체와 배열 다루기 (8단원, 7단원 복습)

// 학생들의 성적 정보를 객체와 배열로 정리하기
const 우리반성적 = {
  "5학년3반": [
    {이름: "김철수", 수학: 85, 영어: 92},
    {이름: "이영희", 수학: 94, 영어: 87},
    {이름: "박민수", 수학: 76, 영어: 83}
  ]
};

// 객체를 JSON으로 변환
const 성적JSON = JSON.stringify(우리반성적, null, 2);
console.log("성적표 JSON:");
console.log(성적JSON);

// JSON을 다시 객체로 변환
const 복원된성적 = JSON.parse(성적JSON);

// 배열에서 수학 점수 평균 구하기
const 학생들 = 복원된성적["5학년3반"];
let 수학총점 = 0;

학생들.forEach(학생 => {
  수학총점 += 학생.수학;
});

const 수학평균 = 수학총점 / 학생들.length;
console.log(`우리반 수학 평균: ${수학평균}점`);

복습 문제 2: 함수와 조건문 활용하기 (5단원, 3단원 복습)

// 점수에 따라 등급을 매기는 함수
function 등급매기기(점수) {
  if (점수 >= 90) {
    return "A";
  } else if (점수 >= 80) {
    return "B";
  } else if (점수 >= 70) {
    return "C";
  } else {
    return "D";
  }
}

// 학생 정보 객체
const 학생정보 = {
  이름: "김학생",
  점수: 87
};

// 학생 정보를 JSON으로 변환
const 학생JSON = JSON.stringify(학생정보);
console.log("JSON 형태:", 학생JSON);

// 다시 객체로 변환하고 등급 계산
const 복원된학생 = JSON.parse(학생JSON);
const 등급 = 등급매기기(복원된학생.점수);

console.log(`${복원된학생.이름}의 점수: ${복원된학생.점수}점`);
console.log(`등급: ${등급}`);

복습 문제 3: 반복문으로 데이터 처리하기 (4단원 복습)

// 여러 학생의 정보를 처리하는 예제
const 학급정보JSON = `{
  "반이름": "5학년 3반",
  "학생들": [
    {"이름": "김철수", "출석번호": 1},
    {"이름": "이영희", "출석번호": 2},
    {"이름": "박민수", "출석번호": 3}
  ]
}`;

// JSON을 객체로 변환
const 학급정보 = JSON.parse(학급정보JSON);

console.log(`${학급정보.반이름} 출석부:`);

// for문으로 학생 명단 출력
for (let i = 0; i < 학급정보.학생들.length; i++) {
  const 학생 = 학급정보.학생들[i];
  console.log(`${학생.출석번호}번 ${학생.이름}`);
}

console.log(`총 학생 수: ${학급정보.학생들.length}명`);

---

🌟 오늘 배운 내용 정리

오늘 우리는 JSON과 자바스크립트 객체의 차이점에 대해 배웠어요!

자바스크립트 객체는 우리 프로그램 안에서 사용하는 다재다능한 데이터 저장소예요. 함수도 넣을 수 있고, 여러 가지 특별한 기능을 사용할 수 있어요.

JSON은 컴퓨터들 사이에서 정보를 주고받을 때 사용하는 표준 편지 형식이에요. 함수 같은 특별한 기능은 담을 수 없지만, 어디든 보낼 수 있는 장점이 있어요.

두 형태는 JSON.stringify()와 JSON.parse() 명령어로 서로 변환할 수 있지만, 변환 과정에서 일부 정보(함수, undefined, Symbol 등)는 사라질 수 있다는 것을 기억해야 해요.

앞으로 웹 개발을 할 때 이 두 가지를 적절히 사용하면 더 좋은 프로그램을 만들 수 있을 거예요!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
JSON과 객체의 기본 개념과 차이점	✅
JSON.stringify()와 JSON.parse() 사용법	✅
변환 과정에서 사라지는 데이터 타입들	✅
각각을 언제 사용해야 하는지	✅
자주 하는 실수들과 해결방법	✅

---

📂 마무리 정보

오늘 배운 18.5.3 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---