안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 마법 창고(LocalStorage)에 물건을 보관하는 법을 배웠죠? 그런데 보물이 수백 개라면 어떻게 할까요? 창고지기는 “상자 하나에 물건을 하나씩만 담아주세요!”라고 고집을 피운답니다. 그래서 오늘은 여러 보물을 하나의 문자열 상자로 묶어주는 마법 포장지, JSON(제이슨)을 배워볼게요!
1. JSON: 여러 데이터를 하나의 실로 묶기
JSON은 우리가 가진 복잡한 데이터(객체, 배열)를 컴퓨터가 읽기 쉬운 긴 ‘글자 줄(문자열)’로 바꿔주는 마법 포장지예요. 창고지기는 복잡한 레고 블록은 못 받지만, 예쁘게 포장된 ‘글자 상자’는 기쁘게 받아준답니다.
- Stringify (포장하기): 레고 성을 납작하게 접어서 상자에 넣는 과정이에요.
- Parse (풀기): 상자에서 꺼낸 납작한 레고를 다시 멋진 성으로 조립하는 과정이죠.
2. 왜 이 마법이 필요한가요?
우리 가족의 ‘이름’, ‘나이’, ‘좋아하는 색깔’을 따로따로 저장하려면 창고 열쇠가 3개나 필요해요. 하지만 JSON 포장지를 쓰면 이 모든 정보를 ‘가족 정보’라는 상자 하나에 쏙 담아 보관할 수 있답니다. 정말 깔끔하죠?
3. 실전 마법: 보물 꾸러미 저장하고 꺼내기
여러 정보를 한꺼번에 창고에 넣고 다시 꺼내 쓰는 코드를 짜볼까요?
<script setup>
import { ref } from 'vue';
const myTreasure = {
name: '마법 지팡이',
level: 10,
power: '불꽃'
};
// 1. 포장해서 창고에 넣기 (Stringify)
const saveTreasure = () => {
const wrapped = JSON.stringify(myTreasure);
localStorage.setItem('myBox', wrapped);
alert('보물 꾸러미를 포장해서 저장했어요!');
};
// 2. 창고에서 꺼내서 포장 풀기 (Parse)
const loadTreasure = () => {
const wrapped = localStorage.getItem('myBox');
if (wrapped) {
const unwrapped = JSON.parse(wrapped);
console.log('짜잔! 다시 조립된 보물:', unwrapped.name);
}
};
</script>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 이 과정을 ‘여행 가방 싸기’에 비유해 보세요. 옷, 칫솔, 장난감을 그냥 들고 갈 순 없지만, 커다란 가방 하나에 다 넣으면(Stringify) 옮기기 쉽고, 도착해서 가방을 열면(Parse) 다시 물건들을 꺼낼 수 있는 것과 같다고요. 아이와 함께 오늘 먹은 음식 리스트를 하나의 ‘메뉴 가방’에 담아 저장하는 놀이를 해보세요!
마치며: 정리 정돈의 달인이 된 마법사
이제 여러분은 아무리 복잡한 데이터도 상자 하나에 쏙쏙 담아 관리할 수 있게 되었습니다. 진정한 데이터 마법사가 되신 걸 축하해요! 다음 시간에는 **’마법의 시간표(SetTimeout & Interval)’**라는 주제로, 웹사이트가 스스로 시간을 재고 움직이게 만드는 법을 배워볼게요.
