📘 18.5.2 JSON.stringify와 JSON.parse - 데이터 변환 도구
반가워요, 코딩을 함께 배우는 여러분. 오늘은 정말 소중하고 유용한 도구를 배워볼 거예요. 바로 자바스크립트의 정보 상자를 편지로 바꾸고, 다시 편지를 정보 상자로 바꾸는 놀라운 기능이에요!
이 기능은 두 개의 특별한 도구로 이루어져 있답니다. 하나는 JSON.stringify라는 변환 도구이고, 다른 하나는 JSON.parse라는 복원 도구예요. 함께 이 아름다운 변환의 세계로 천천히 걸어가 볼까요?
🧠 새로운 친구들과 마음 나누기
데이터 변환을 배우기 전에, 이 특별한 도구들이 무엇인지 차근차근 알아보겠어요.
| 친구 이름 | 무엇을 하는 친구인가요? |
|---|---|
| JSON.stringify | 자바스크립트 정보 상자를 JSON 편지로 바꿔주는 변환 도구예요 |
| JSON.parse | JSON 편지를 자바스크립트 정보 상자로 되돌려주는 복원 도구예요 |
| 문자 모음 | 컴퓨터가 이해하는 글자들이 줄줄이 연결된 것이에요 |
| 정보 상자 | 여러 정보를 담고 있는 특별한 상자예요 |
stringify는 "글자로 만들다"라는 뜻이고, parse는 "분석해서 이해하다"라는 뜻이에요. 마치 편지를 쓰고 읽는 것과 같아요!
✨ 두 도구의 아름다운 이야기
우리 동네에는 정말 특별한 두 친구가 살고 있어요.
첫 번째 친구 JSON.stringify는 변환 전문가예요. 이 친구는 복잡하고 큰 보물상자(정보 상자)를 받으면, 그 안의 모든 보물들을 하나하나 살펴보고 종이에 꼼꼼히 적어서 편지로 만들어줘요. 이 편지는 다른 학교로도 보낼 수 있고, 파일로 저장할 수도 있는 정말 특별한 편지예요.
두 번째 친구 JSON.parse는 복원 전문가예요. 이 친구는 편지를 받으면, 그 편지에 적힌 내용을 읽고 다시 원래의 보물상자로 만들어주는 놀라운 능력을 가지고 있어요. 마치 레고 설명서를 보고 레고를 조립하는 것 같아요!
🎭 첫 번째 도구: JSON.stringify - 변환 도구
기본적인 변환 기능 배우기
먼저 가장 기본적인 변환 기능부터 배워보겠어요.
// 우리의 보물상자(정보 상자)를 만들어보아요
const 내정보 = {
이름: "김코딩",
나이: 10,
좋아하는것: ["게임", "책읽기", "수영"],
반: "5학년 3반"
};
// 첫 번째 도구: JSON.stringify - 편지로 변환!
const 편지형태 = JSON.stringify(내정보);
console.log("원래 모습 (보물상자):");
console.log(내정보);
console.log("\n편지로 변환한 모습:");
console.log(편지형태);와! 보물상자가 한 줄의 긴 편지로 변환됐어요. 이제 이 편지를 어디든 보낼 수 있답니다!
예쁘게 꾸미는 변환 기능
편지가 너무 길고 읽기 어렵다면, 예쁘게 꾸며줄 수도 있어요.
// 같은 정보를 예쁘게 꾸며서 편지로 만들어보아요
const 예쁜편지 = JSON.stringify(내정보, null, 2);
console.log("예쁘게 꾸민 편지:");
console.log(예쁜편지);이번에는 편지가 줄바꿈도 되고, 들여쓰기도 되어서 훨씬 읽기 쉬워졌어요!
🎯 두 번째 도구: JSON.parse - 복원 도구
이제 편지를 다시 보물상자로 되돌리는 도구를 배워보겠어요.
// 편지를 다시 보물상자로 되돌리는 도구!
const 되돌린정보 = JSON.parse(편지형태);
console.log("편지에서 되돌린 보물상자:");
console.log(되돌린정보);
// 정말 잘 되돌려졌는지 확인해보아요
console.log("이름:", 되돌린정보.이름);
console.log("나이:", 되돌린정보.나이);
console.log("첫 번째 좋아하는 것:", 되돌린정보.좋아하는것[0]);놀랍게도 편지가 다시 원래의 보물상자로 완벽하게 되돌아왔어요!
🧪 재미있는 변환 실험들
🔹 실험 1: 학급 친구들 정보 전송하기
// 우리 학급 친구들의 정보를 정리해보아요
const 우리반친구들 = [
{
이름: "김철수",
번호: 1,
좋아하는과목: "수학",
점심메뉴선호: "김치찌개"
},
{
이름: "이영희",
번호: 2,
좋아하는과목: "미술",
점심메뉴선호: "불고기"
},
{
이름: "박민수",
번호: 3,
좋아하는과목: "체육",
점심메뉴선호: "짜장면"
}
];
console.log("원래 친구들 정보:");
console.log(우리반친구들);
// 편지로 변환시켜서 다른 반 선생님께 보내요
const 친구들편지 = JSON.stringify(우리반친구들, null, 2);
console.log("\n다른 반으로 보낼 편지:");
console.log(친구들편지);
// 다른 반에서 편지를 받고 정보를 복원해요
const 받은친구들정보 = JSON.parse(친구들편지);
console.log("\n다른 반에서 받은 친구들 정보:");
console.log(받은친구들정보);
// 친구 수가 같은지 확인해보아요
console.log(`우리반 친구 수: ${우리반친구들.length}명`);
console.log(`받은 친구 수: ${받은친구들정보.length}명`);🔹 실험 2: 변환이 작동하지 않는 특별한 물건들
어떤 물건들은 편지로 바꿀 수 없어요. 어떤 것들인지 확인해보겠어요.
// 특별한 물건들이 들어있는 상자
const 특별한상자 = {
이름: "특별상자",
숫자: 123,
문자: "안녕하세요",
참거짓: true,
빈값: null,
사라질값: undefined, // 이건 편지에서 사라져요
특별함수: function() { // 이것도 편지로 바꿀 수 없어요
return "안녕하세요!";
},
오늘날짜: new Date()
};
console.log("특별한 상자의 원래 모습:");
console.log(특별한상자);
// 편지로 변환시켜보아요
const 특별한편지 = JSON.stringify(특별한상자, null, 2);
console.log("\n편지로 변환한 모습 (일부가 사라졌어요!):");
console.log(특별한편지);
// 다시 상자로 되돌려보아요
const 되돌린특별한상자 = JSON.parse(특별한편지);
console.log("\n되돌린 상자:");
console.log(되돌린특별한상자);
// 무엇이 사라졌는지 확인해보아요
console.log("\n사라진 것들 확인:");
console.log("사라질값이 있나요?", "사라질값" in 되돌린특별한상자);
console.log("특별함수가 있나요?", "특별함수" in 되돌린특별한상자);
console.log("오늘날짜 타입:", typeof 되돌린특별한상자.오늘날짜);🔹 실험 3: 편지가 잘못 쓰여진 경우
가끔 편지가 잘못 쓰여져 있을 수 있어요. 그럴 때는 어떻게 될까요?
// 잘못 쓰여진 편지들
const 잘못된편지들 = [
'{"이름": "철수", "나이": 10}', // 올바른 편지
'{"이름": "영희", "나이": 9,}', // 마지막에 쉼표가 더 있어요 (잘못됨)
'{"이름": 철수, "나이": 10}', // 따옴표가 없어요 (잘못됨)
'{이름: "민수", "나이": 11}' // 이름표에 따옴표가 없어요 (잘못됨)
];
// 각 편지를 읽어보려고 시도해보아요
잘못된편지들.forEach((편지, 번호) => {
console.log(`\n편지 ${번호 + 1} 읽기 시도:`);
console.log("편지 내용:", 편지);
try {
const 읽은내용 = JSON.parse(편지);
console.log("읽기 성공!", 읽은내용);
} catch (오류) {
console.log("읽기 실패! 편지가 잘못 쓰여졌어요.");
console.log("오류 내용:", 오류.message);
}
});🎯 지금까지 배운 내용 복습하기
18.5.2단원을 배우기 전에 그동안 배운 중요한 내용들을 복습해보겠습니다!
복습 문제 1: 배열 메서드 활용하기 (7단원 복습)
// 학생들의 성적 데이터
const 학생성적 = [
{이름: "김철수", 수학: 85, 영어: 92},
{이름: "이영희", 수학: 94, 영어: 87},
{이름: "박민수", 수학: 76, 영어: 83}
];
// JSON으로 변환해보기
const 성적편지 = JSON.stringify(학생성적, null, 2);
console.log("성적표 편지:");
console.log(성적편지);
// 다시 배열로 변환
const 받은성적 = JSON.parse(성적편지);
// 배열 메서드로 평균 점수 구하기
let 총합 = 0;
let 학생수 = 받은성적.length;
받은성적.forEach(학생 => {
총합 += 학생.수학 + 학생.영어;
});
const 전체평균 = 총합 / (학생수 * 2);
console.log(`반 평균 점수: ${전체평균}점`);복습 문제 2: 객체와 반복문 활용하기 (8단원, 4단원 복습)
// 도서관 책 정보
const 도서관책들 = {
"수학의정석": {저자: "홍성대", 페이지: 400},
"해리포터": {저자: "J.K.롤링", 페이지: 500},
"어린왕자": {저자: "생텍쥐페리", 페이지: 120}
};
// 객체를 JSON으로 변환
const 책목록편지 = JSON.stringify(도서관책들, null, 2);
console.log("도서관 책 목록:");
console.log(책목록편지);
// 다시 객체로 변환
const 받은책목록 = JSON.parse(책목록편지);
// for...in 반복문으로 책 정보 출력
console.log("\n책 정보 목록:");
for (const 책제목 in 받은책목록) {
const 책정보 = 받은책목록[책제목];
console.log(`제목: ${책제목}, 저자: ${책정보.저자}, 페이지: ${책정보.페이지}`);
}🎮 재미있는 활용 예제
게임 저장 시스템 만들기
우리가 만든 게임의 진행 상황을 저장하고 불러오는 시스템을 만들어보겠어요.
// 게임 상태 정보
let 게임상태 = {
플레이어이름: "용감한모험가",
레벨: 5,
점수: 1250,
생명력: 80,
가지고있는아이템: ["특별한검", "체력물약", "방패"],
현재위치: {
맵: "숲",
x좌표: 150,
y좌표: 200
},
퀘스트완료: ["첫번째모험", "드래곤퇴치", "보물찾기"]
};
// 게임 저장하기 함수
function 게임저장하기(상태) {
console.log("게임을 저장하는 중...");
// 상태를 편지로 변환
const 저장편지 = JSON.stringify(상태, null, 2);
// 실제로는 파일에 저장하겠지만, 여기서는 콘솔에 출력해요
console.log("저장된 게임 정보:");
console.log(저장편지);
// 편지를 임시로 저장해두어요
window.저장된게임 = 저장편지;
console.log("게임 저장 완료!");
}
// 게임 불러오기 함수
function 게임불러오기() {
console.log("\n게임을 불러오는 중...");
// 저장된 편지가 있는지 확인
if (!window.저장된게임) {
console.log("저장된 게임이 없어요!");
return null;
}
try {
// 편지를 다시 게임 상태로 변환
const 불러온상태 = JSON.parse(window.저장된게임);
console.log("게임 불러오기 완료!");
return 불러온상태;
} catch (오류) {
console.log("게임 파일이 손상되었어요!");
console.log("오류:", 오류.message);
return null;
}
}
// 게임 저장 테스트
게임저장하기(게임상태);
// 게임 상태를 바꿔보아요
게임상태.레벨 = 6;
게임상태.점수 = 1500;
게임상태.가지고있는아이템.push("특별한반지");
console.log("\n게임을 계속 진행한 후:");
console.log("현재 레벨:", 게임상태.레벨);
console.log("현재 점수:", 게임상태.점수);
// 저장된 게임 불러오기
const 불러온게임 = 게임불러오기();
if (불러온게임) {
console.log("\n불러온 게임 상태:");
console.log("저장 당시 레벨:", 불러온게임.레벨);
console.log("저장 당시 점수:", 불러온게임.점수);
console.log("저장 당시 아이템:", 불러온게임.가지고있는아이템);
}🔄 도구 사용 순서 정리
지금까지 배운 도구를 사용하는 순서를 정리해보겠어요.
변환 도구 (JSON.stringify) 사용 순서:
변환시킬 정보 상자 준비하기: 편지로 바꾸고 싶은 정보 상자를 준비해요.
도구 사용하기:
JSON.stringify(정보상자)라고 명령을 내려요.예쁘게 꾸미기 (선택사항): 읽기 쉽게 만들고 싶다면
JSON.stringify(정보상자, null, 2)를 사용해요.편지 확인하기: 만들어진 편지가 제대로 되었는지 확인해요.
복원 도구 (JSON.parse) 사용 순서:
편지 받기: JSON 형태의 문자 모음 편지를 준비해요.
도구 사용하기:
JSON.parse(편지)라고 명령을 내려요.안전하게 시도하기: 편지가 잘못되었을 수도 있으니 try-catch로 감싸는 것이 좋아요.
복원된 정보 상자 사용하기: 되돌린 정보 상자를 사용해요.
🧚♀️ 이야기로 다시 배우기: 번역 센터
지금까지 배운 내용을 하나의 아름다운 이야기로 다시 정리해볼까요?
우리 동네에는 정말 특별한 번역 센터가 있어요. 이 번역 센터에는 두 명의 뛰어난 번역사가 일하고 있답니다.
첫 번째 번역사는 stringify 선생님이에요. 이 선생님은 어떤 복잡한 정보든 받으면, 그것을 누구나 이해할 수 있는 표준 형식의 편지로 바꿔주는 전문가예요. 학생의 성적표든, 도서관의 책 목록이든, 심지어 게임의 저장 파일이든 모든 정보를 깔끔한 편지로 만들어줘요.
두 번째 번역사는 parse 선생님이에요. 이 선생님은 반대로 표준 형식의 편지를 받으면 다시 원래의 정보로 되돌려주는 전문가예요. 편지에 적힌 내용을 꼼꼼히 읽고, 그 정보를 프로그램에서 사용할 수 있는 형태로 완벽하게 복원해줘요.
이 두 선생님 덕분에 우리 동네의 모든 컴퓨터와 프로그램들이 자유롭게 정보를 주고받을 수 있게 되었어요. 한국의 프로그램이 미국의 서버에 정보를 보내거나, 스마트폰 앱이 인터넷에서 데이터를 받아올 때도 이 번역 센터의 도움을 받아요.
우리가 배운 JSON.stringify와 JSON.parse도 이 번역 센터와 똑같은 역할을 해요!
🧠 자주 하는 실수와 해결 방법
데이터 변환을 배우다 보면 가끔 실수를 할 수 있어요. 자주 하는 실수들을 알아보고 어떻게 해결할 수 있는지 배워보겠어요.
❌ 실수 1: 편지를 정보 상자인 줄 알고 바로 사용하기
// 서버에서 받은 편지 (문자 모음이에요!)
const 서버편지 = '{"이름": "김학생", "점수": 95}';
// 잘못된 사용법
// console.log(서버편지.이름); // undefined가 나와요!
// 올바른 사용법
const 학생정보 = JSON.parse(서버편지);
console.log("학생 이름:", 학생정보.이름); // "김학생"이 제대로 나와요!❌ 실수 2: 잘못된 편지를 읽으려고 하기
// 잘못 쓰여진 편지
const 잘못된편지 = '{"이름": "철수", "점수": 95,}'; // 마지막 쉼표가 문제!
// 안전하게 읽는 방법
try {
const 정보 = JSON.parse(잘못된편지);
console.log("읽기 성공:", 정보);
} catch (오류) {
console.log("편지 읽기 실패! 편지를 다시 확인해주세요.");
console.log("문제:", 오류.message);
}✏️ 연습 문제들을 풀어보세요
우리가 배운 내용을 손끝으로 확인해보는 시간이에요. 차분하게, 여러분만의 속도로 천천히 해보세요.
Ex1) 나만의 프로필 편지 만들어보기
// 여러분의 정보로 프로필을 만들어보세요
const 내프로필 = {
이름: "여러분의이름",
나이: 10,
학교: "코딩초등학교",
좋아하는과목: ["수학", "과학"],
좋아하는음식: ["피자", "치킨"],
꿈: "훌륭한 프로그래머"
};
// 프로필을 편지로 변환해보세요
const 프로필편지 = JSON.stringify(내프로필, null, 2);
console.log("내 프로필 편지:");
console.log(프로필편지);
// 편지를 다시 프로필로 되돌려보세요
const 복원된프로필 = JSON.parse(프로필편지);
console.log("\n복원된 프로필:");
console.log(`안녕하세요! 저는 ${복원된프로필.이름}이고, ${복원된프로필.나이}살입니다.`);
console.log(`제 꿈은 ${복원된프로필.꿈}이 되는 것입니다!`);Ex2) 간단한 메모장 시스템 만들기
// 메모 저장소
let 저장된메모들 = [];
// 메모 추가 기능
function 메모추가하기(제목, 내용) {
const 새메모 = {
제목: 제목,
내용: 내용,
작성시간: new Date().toLocaleString()
};
저장된메모들.push(새메모);
console.log(`메모 "${제목}"이 추가되었습니다!`);
}
// 메모 저장 기능
function 메모저장하기() {
const 메모편지 = JSON.stringify(저장된메모들, null, 2);
console.log("저장된 메모들:");
console.log(메모편지);
// 실제로는 파일에 저장하지만, 여기서는 변수에 저장해요
window.저장된메모편지 = 메모편지;
}
// 메모 불러오기 기능
function 메모불러오기() {
if (window.저장된메모편지) {
const 불러온메모들 = JSON.parse(window.저장된메모편지);
console.log(`${불러온메모들.length}개의 메모를 불러왔습니다!`);
return 불러온메모들;
} else {
console.log("저장된 메모가 없습니다.");
return [];
}
}
// 메모장 테스트
메모추가하기("오늘의 할일", "수학 숙제하기, 친구와 놀기");
메모추가하기("좋은 아이디어", "로봇 친구 만들기 프로젝트");
메모저장하기();
// 새로운 메모를 더 추가
메모추가하기("내일 계획", "공원에서 자전거 타기");
// 이전에 저장된 메모 불러오기
const 이전메모들 = 메모불러오기();
console.log("\n불러온 메모들:");
이전메모들.forEach((메모, 번호) => {
console.log(`${번호 + 1}. ${메모.제목} (${메모.작성시간})`);
console.log(` 내용: ${메모.내용}`);
});🌟 오늘 배운 도구 정리
오늘 우리는 정말 유용한 두 가지 도구를 배웠어요!
JSON.stringify (변환 도구)는 자바스크립트 정보 상자를 편지(문자 모음)로 바꿔주는 놀라운 도구예요. 이 도구 덕분에 우리의 정보를 다른 컴퓨터로 보내거나, 파일로 저장할 수 있게 되었답니다.
JSON.parse (복원 도구)는 편지(문자 모음)를 다시 자바스크립트 정보 상자로 되돌려주는 도구예요. 받은 편지를 읽어서 원래의 정보로 되돌릴 수 있어요.
하지만 이 도구들에도 한계가 있다는 것을 잊지 마세요. 함수나 undefined 같은 특별한 것들은 편지로 바꿀 수 없고, 잘못 쓰여진 편지는 읽을 수 없어요.
앞으로 웹사이트를 만들거나 데이터를 저장할 때, 이 두 도구가 정말 유용하게 쓰일 거예요. 계속 연습해서 데이터 변환 전문가가 되어보아요!
다음 시간에는 더 재미있는 자바스크립트 기능을 배워볼 거예요. 기대해 주세요! 🎉
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| JSON.stringify의 기본 개념과 사용법 | ✅ |
| JSON.parse의 기본 개념과 사용법 | ✅ |
| 변환할 수 없는 데이터 타입들 | ✅ |
| 자주 하는 실수들과 해결 방법 | ✅ |
| 실전 예제 이해 | ✅ |
| 지금까지 배운 내용 복습 | ✅ |
📂 마무리 정보
오늘 배운 18.5.2 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'18. 똑똑한 코드 패턴 (디자인 패턴) > 18.5 JSON 다루기' 카테고리의 다른 글
| 18.5.3 JSON과 객체의 차이 - 데이터를 주고받는 두 가지 방법 (0) | 2025.07.28 |
|---|---|
| 18.5.1 JSON이란? - 컴퓨터들의 편지 쓰기 방법 (0) | 2025.07.28 |