📘 18.5.1 JSON이란? - 컴퓨터들의 편지 쓰기 방법
안녕하세요, 여러분. 오늘은 참 흥미롭고 재미있는 이야기를 들려드릴게요. 바로 JSON(제이슨)이라는 특별한 방법에 대한 이야기예요.
여러분, 혹시 친구에게 편지를 써본 적이 있나요? 편지를 쓸 때는 친구가 이해할 수 있도록 차근차근 예쁘게 써야 하죠? 컴퓨터들도 마찬가지예요. 컴퓨터들이 서로 편지를 주고받을 때 사용하는 특별한 글쓰기 방법이 바로 JSON이랍니다. 전 세계 모든 컴퓨터들이 약속한 공통된 편지 쓰기 방법이라고 생각하면 돼요.
🧠 새로운 친구들과 마음 나누기
우리가 오늘 만날 새로운 친구들을 먼저 소개해드릴게요. 이 친구들과 친해지면 JSON을 훨씬 쉽게 이해할 수 있어요.
| 친구 이름 | 무엇을 하는 친구인가요? |
|---|---|
| JSON | 컴퓨터들이 서로 정보를 주고받을 때 사용하는 특별한 글쓰기 방법이에요. 편지를 쓰는 규칙 같은 거예요. |
| 정보 포장하기 | 컴퓨터 안에 있는 정보를 다른 곳으로 보내거나 저장할 수 있는 모습으로 바꾸는 과정이에요. |
| 정보 풀어내기 | 포장된 정보를 다시 컴퓨터가 사용할 수 있는 모습으로 되돌리는 과정이에요. |
| 이름표와 내용물 | JSON에서 정보를 표현하는 방식으로, 이름표와 그에 해당하는 내용물이 짝을 이루는 구조예요. |
이 친구들은 우리가 JSON의 세계를 탐험하는 동안 계속 만나게 될 소중한 동반자들이에요. 하나씩 천천히 알아가다 보면 어느새 친숙해질 거예요.
✨ JSON의 아름다운 비밀
JSON은 전 세계 컴퓨터들이 사용하는 공통 언어와 같아요. 우리가 여러 나라 친구들과 대화할 때 영어를 공용어로 사용하는 것처럼, 서로 다른 방식으로 만들어진 프로그램들이 정보를 주고받을 때 JSON을 사용한답니다.
JSON의 가장 멋진 점은 사람이 읽기도 쉽고, 컴퓨터가 이해하기도 쉽다는 거예요. 잘 정리된 일기장처럼, 어떤 정보가 어디에 있는지 한눈에 알아볼 수 있어요.
JSON은 정보를 이름표와 내용물의 짝으로 정리해요. 예를 들어, 여러분의 정보를 JSON으로 표현하면 이런 모습이 될 거예요:
이름: "철수"
나이: 10
좋아하는색: "파란색"
취미: ["축구", "게임", "독서"]이렇게 깔끔하고 이해하기 쉬운 방식으로 정보를 정리하는 것이 바로 JSON의 특별한 능력이에요.
재미있는 이야기: 우리 동네 게시판
JSON을 더 쉽게 이해하기 위해 '우리 동네 게시판' 이야기를 들려드릴게요.
우리 동네에는 아파트 입구에 큰 게시판이 있어요. 관리사무소에서는 여러 가지 중요한 소식들을 이 게시판에 붙입니다. "새로운 가족이 이사 왔어요", "엘리베이터 점검해요", "운동회가 열려요" 같은 소식들이죠.
그런데 관리사무소에서는 소식을 붙일 때 정해진 양식을 사용해요. 항상 제목, 내용, 날짜, 연락처를 같은 순서로 적어서 붙이는 거예요. 그러면 동네 사람들이 어떤 소식이든 쉽게 이해할 수 있거든요.
예를 들어:
제목: 엘리베이터 점검 안내
내용: 10월 15일 오후 2시부터 4시까지 점검합니다
날짜: 2023-10-14
연락처: 관리사무소 02-1234-5678이렇게 정해진 형식으로 적으면, 동네 사람들이 어떤 소식이든 빠르게 이해할 수 있어요. 또한 다른 아파트에서 온 방문자들도 쉽게 알아볼 수 있죠.
우리가 배울 JSON도 이 동네 게시판과 똑같이 동작해요. 복잡한 정보들을 누구나 이해할 수 있는 깔끔한 형태로 정리해서, 다른 프로그램들과 쉽게 공유할 수 있게 해주는 거예요.
🎯 왜 JSON을 배워야 할까요?
여러분이 궁금해할 것 같아요. "그럼 JSON을 배우면 어떤 좋은 일이 생기나요?"
첫 번째 이유는 누구나 이해하기 쉽다는 것이에요. JSON으로 쓰인 정보는 프로그래밍을 잘 모르는 사람도 대충 무슨 내용인지 알 수 있을 정도로 직관적이에요. 잘 정리된 메모장처럼 말이죠.
두 번째로는 다양한 프로그래밍 언어에서 사용 가능하다는 점이에요. 자바스크립트뿐만 아니라 파이썬, 자바, C# 등 거의 모든 프로그래밍 언어에서 JSON을 읽고 쓸 수 있어요. 세계 공용어처럼 말이죠.
세 번째는 인터넷을 통해 정보를 주고받기 편하다는 것이에요. 웹사이트에서 서버로 정보를 보내거나, 스마트폰 앱이 인터넷에서 정보를 받아올 때 JSON을 많이 사용해요.
마지막으로는 가벼우면서도 빠르다는 장점이 있어요. 같은 정보를 다른 방식으로 표현하는 것보다 JSON이 더 간단하고 공간을 적게 차지해서, 인터넷으로 빠르게 전송할 수 있답니다.
⚙️ JSON의 기본 모습
JSON에는 몇 가지 간단한 규칙이 있어요. 이 규칙만 알면 누구나 JSON을 읽고 쓸 수 있답니다.
1. 정보는 이름과 값의 짝으로 표현해요
"이름": "철수"
"나이": 102. 여러 정보는 중괄호 안에 넣어요
{
"이름": "철수",
"나이": 10,
"학년": 5
}3. 목록은 대괄호로 표현해요
{
"이름": "철수",
"취미": ["축구", "게임", "독서"]
}4. 정보가 없는 경우 null을 사용해요
{
"이름": "철수",
"별명": null
}이런 간단한 규칙들로 복잡한 정보도 깔끔하게 정리할 수 있어요.
🧪 실제로 JSON을 만나보기
이제 실제로 JSON을 사용한 재미있는 예제들을 만들어 보겠어요. 처음에는 간단한 것부터 시작해서 점점 더 멋진 것들을 만들어 보겠습니다.
🔹 예제 1: 우리 반 친구 정보를 JSON으로 만들어보기
첫 번째 예제에서는 우리 반 친구의 정보를 JSON 형태로 만들어 보겠습니다.
// 우리 반 친구 민지의 정보를 담은 JSON 편지
const minjiInfoJSON = `{
"이름": "김민지",
"나이": 11,
"학년": 5,
"반": 3,
"좋아하는과목": ["수학", "과학", "미술"],
"싫어하는과목": ["체육"],
"취미": ["독서", "그림그리기", "피아노"],
"가족구성": {
"아버지": "김아빠",
"어머니": "이엄마",
"형제자매": ["오빠"]
},
"연락처": {
"집전화": "02-1234-5678",
"어머니휴대폰": "010-1234-5678"
},
"특별사항": null
}`;
// JSON 편지를 자바스크립트가 이해할 수 있는 정보 상자로 바꾸기
const minjiInfo = JSON.parse(minjiInfoJSON);
// 민지의 정보 사용해보기
console.log(`안녕! 나는 ${minjiInfo.이름}이야!`); // 민지가 자기 이름을 소개해요
console.log(`나는 ${minjiInfo.학년}학년 ${minjiInfo.반}반이고, ${minjiInfo.나이}살이야.`); // 민지가 자기 학년과 나이를 말해요
// 좋아하는 과목 출력하기
console.log("내가 좋아하는 과목들:");
minjiInfo.좋아하는과목.forEach((subject, index) => { // 좋아하는 과목들을 하나씩 꺼내서
console.log(`${index + 1}. ${subject}`); // 번호와 함께 보여줘요
});
// 가족 구성 출력하기
console.log(`우리 가족은 ${minjiInfo.가족구성.아버지}, ${minjiInfo.가족구성.어머니}와 나, 그리고 ${minjiInfo.가족구성.형제자매[0]}까지 총 4명이야!`);
// 특별사항 확인하기
if (minjiInfo.특별사항 === null) { // 특별사항이 없으면
console.log("특별히 알려드릴 사항은 없어요!"); // 없다고 말해줘요
} else { // 특별사항이 있으면
console.log(`특별사항: ${minjiInfo.특별사항}`); // 특별사항을 보여줘요
}
console.log("\n" + "=".repeat(50) + "\n"); // 예쁜 구분선을 그어줘요
// 이번에는 자바스크립트 정보 상자를 JSON 편지로 바꿔보기
const junhoInfo = {
이름: "박준호",
나이: 10,
학년: 5,
반: 3,
좋아하는과목: ["체육", "음악"],
취미: ["축구", "게임", "만화책읽기"],
가족구성: {
아버지: "박아빠",
어머니: "최엄마",
형제자매: ["여동생"]
},
반장경험: true,
특별사항: "축구부 주장"
};
// 자바스크립트 정보 상자를 JSON 편지로 바꾸기
const junhoInfoJSON = JSON.stringify(junhoInfo, null, 2); // 정보 상자를 예쁜 편지로 만들어요
console.log("준호의 정보를 JSON으로 변환한 결과:");
console.log(junhoInfoJSON); // 만들어진 편지를 보여줘요
// 다시 JSON을 정보 상자로 바꿔서 사용하기
const parsedJunhoInfo = JSON.parse(junhoInfoJSON); // 편지를 다시 정보 상자로 바꿔요
console.log(`\n안녕! 나는 ${parsedJunhoInfo.이름}이야!`); // 준호가 자기소개를 해요
if (parsedJunhoInfo.반장경험) { // 반장 경험이 있으면
console.log("나는 반장을 해본 경험이 있어!"); // 반장 경험을 자랑해요
}
console.log(`특별사항: ${parsedJunhoInfo.특별사항}`); // 특별사항을 말해줘요이 예제를 단계별로 살펴보면, 먼저 친구의 정보를 JSON 형태의 편지로 표현했어요. 그다음 JSON.parse()라는 기능을 사용해서 이 편지를 자바스크립트에서 사용할 수 있는 정보 상자로 바꿨습니다. 반대로 자바스크립트 정보 상자를 JSON.stringify()라는 기능을 사용해서 JSON 편지로 바꾸는 과정도 보여주었어요. 이렇게 JSON과 자바스크립트 정보 상자를 서로 바꾸는 것이 JSON의 핵심 능력입니다.
🔹 예제 2: 우리 학교 도서관 책 목록을 JSON으로 관리하기
두 번째 예제에서는 우리 학교 도서관의 책 정보를 JSON으로 관리하는 시스템을 만들어 보겠어요.
// 우리 학교 도서관 책 목록을 담은 JSON 편지
const libraryBooksJSON = `{
"도서관이름": "햇살초등학교 도서관",
"총책수": 1250,
"운영시간": {
"평일": "09:00 - 17:00",
"토요일": "09:00 - 12:00",
"일요일": "휴관"
},
"인기도서": [
{
"제목": "해리포터와 마법사의 돌",
"저자": "J.K. 롤링",
"장르": "판타지",
"페이지수": 320,
"대출가능": true,
"대출횟수": 127,
"평점": 4.8,
"위치": "2층 B구역"
},
{
"제목": "어린왕자",
"저자": "생텍쥐페리",
"장르": "동화",
"페이지수": 96,
"대출가능": false,
"대출횟수": 203,
"평점": 4.9,
"위치": "1층 A구역"
},
{
"제목": "과학실험 대백과",
"저자": "김과학",
"장르": "과학",
"페이지수": 280,
"대출가능": true,
"대출횟수": 89,
"평점": 4.6,
"위치": "3층 C구역"
}
],
"도서분류": {
"문학": 450,
"과학": 320,
"역사": 180,
"예술": 140,
"기타": 160
}
}`;
// JSON 편지를 자바스크립트 정보 상자로 바꾸기
const libraryData = JSON.parse(libraryBooksJSON); // 편지를 읽어서 정보 상자로 만들어요
// 도서관 정보 출력하기
console.log(`📚 ${libraryData.도서관이름}에 오신 것을 환영합니다!`); // 도서관에 인사해요
console.log(`총 ${libraryData.총책수}권의 책이 있어요.`); // 총 책 개수를 알려줘요
console.log("\n📅 운영시간:");
for (const day in libraryData.운영시간) { // 운영시간을 하나씩 꺼내서
console.log(` ${day}: ${libraryData.운영시간[day]}`); // 요일별 운영시간을 보여줘요
}
console.log("\n🌟 인기 도서 목록:");
libraryData.인기도서.forEach((book, index) => { // 인기 도서들을 하나씩 꺼내서
console.log(`\n${index + 1}. 📖 ${book.제목}`); // 책 제목을 보여줘요
console.log(` 저자: ${book.저자}`); // 책 저자를 알려줘요
console.log(` 장르: ${book.장르} | 페이지: ${book.페이지수}쪽`); // 장르와 페이지 수를 말해줘요
console.log(` 평점: ⭐ ${book.평점} | 대출 횟수: ${book.대출횟수}회`); // 평점과 대출 횟수를 보여줘요
console.log(` 위치: ${book.위치}`); // 책이 있는 위치를 알려줘요
if (book.대출가능) { // 대출이 가능하면
console.log(` 📗 대출 가능합니다!`); // 대출 가능하다고 말해줘요
} else { // 대출이 불가능하면
console.log(` 📕 현재 대출 중입니다.`); // 대출 중이라고 알려줘요
}
});
// 도서 분류별 통계 출력하기
console.log("\n📊 도서 분류별 현황:");
const totalBooks = Object.values(libraryData.도서분류).reduce((sum, count) => sum + count, 0); // 전체 책 수를 계산해요
for (const category in libraryData.도서분류) { // 도서 분류를 하나씩 꺼내서
const count = libraryData.도서분류[category]; // 각 분류의 책 수를 가져와요
const percentage = ((count / totalBooks) * 100).toFixed(1); // 백분율을 계산해요
console.log(` ${category}: ${count}권 (${percentage}%)`); // 분류별 통계를 보여줘요
}
// 대출 가능한 책 찾기
console.log("\n📚 지금 대출 가능한 인기 도서:");
const availableBooks = libraryData.인기도서.filter(book => book.대출가능); // 대출 가능한 책들만 골라내요
availableBooks.forEach(book => { // 대출 가능한 책들을 하나씩 꺼내서
console.log(` 📗 ${book.제목} - ${book.위치}`); // 책 제목과 위치를 보여줘요
});
console.log("\n" + "=".repeat(50) + "\n"); // 예쁜 구분선을 그어줘요
// 새로운 책 정보 추가하기
const newBook = {
제목: "코딩이 재미있어요",
저자: "프로그래머 선생님",
장르: "컴퓨터",
페이지수: 200,
대출가능: true,
대출횟수: 0,
평점: null, // 아직 평점이 없음
위치: "3층 D구역"
};
// 새 책을 인기도서 목록에 추가하기
libraryData.인기도서.push(newBook); // 새 책을 목록에 넣어줘요
// 새 장르가 있으면 도서분류에도 추가하기
if (!libraryData.도서분류[newBook.장르]) { // 새로운 장르면
libraryData.도서분류[newBook.장르] = 1; // 새 장르를 추가해요
} else { // 기존 장르면
libraryData.도서분류[newBook.장르]++; // 기존 장르 수를 늘려줘요
}
// 총 책 수 업데이트
libraryData.총책수++; // 총 책 수를 하나 늘려줘요
// 변경된 정보를 JSON으로 다시 바꾸기
const updatedLibraryJSON = JSON.stringify(libraryData, null, 2); // 업데이트된 정보를 편지로 만들어요
console.log("📖 새 책이 추가된 후의 도서관 정보:");
console.log(`총 책 수: ${libraryData.총책수}권`); // 새로운 총 책 수를 보여줘요
console.log(`새로 추가된 책: ${newBook.제목}`); // 추가된 책 제목을 알려줘요
// 업데이트된 도서 분류 확인하기
console.log("\n📊 업데이트된 도서 분류:");
for (const category in libraryData.도서분류) { // 업데이트된 분류를 하나씩 꺼내서
console.log(` ${category}: ${libraryData.도서분류[category]}권`); // 각 분류별 책 수를 보여줘요
}이 도서관 시스템 예제는 더욱 복잡하고 현실적인 JSON 데이터를 보여줘요. 단순한 정보뿐만 아니라 목록 안에 정보 상자가 들어있고, 정보 상자 안에 또 다른 정보 상자가 들어있는 구조를 볼 수 있어요. 또한 JSON 데이터를 자바스크립트에서 읽어와서 정보를 분석하고, 새로운 데이터를 추가한 후 다시 JSON으로 바꾸는 전체 과정을 경험할 수 있답니다.
🔹 예제 3: 날씨 정보 시스템 만들기
세 번째 예제는 실제 인터넷에서 받아올 수 있는 날씨 정보와 비슷한 JSON 데이터를 다루어 보겠어요.
// 날씨 정보 시스템에서 받아온 JSON 응답 데이터 (가상의 데이터예요)
const weatherResponseJSON = `{
"요청성공": true,
"응답코드": 200,
"메시지": "날씨 정보를 성공적으로 가져왔습니다",
"현재날씨": {
"지역": "서울특별시",
"측정시간": "2023년 10월 15일 오후 2시 30분",
"온도": {
"현재": 22,
"최고": 25,
"최저": 18,
"체감": 24,
"단위": "섭씨"
},
"날씨상태": {
"주요": "맑음",
"상세": "구름 조금",
"아이콘": "partly_sunny",
"구름정도": 20
},
"바람": {
"속도": 3.2,
"방향": "남서풍",
"단위": "m/s"
},
"습도": 60,
"기압": 1013,
"자외선지수": 7,
"미세먼지": {
"PM2.5": 15,
"PM10": 32,
"상태": "좋음"
}
},
"주간예보": [
{
"날짜": "2023-10-16",
"요일": "월요일",
"최고온도": 24,
"최저온도": 19,
"날씨": "흐림",
"강수확률": 30
},
{
"날짜": "2023-10-17",
"요일": "화요일",
"최고온도": 21,
"최저온도": 16,
"날씨": "비",
"강수확률": 80
},
{
"날짜": "2023-10-18",
"요일": "수요일",
"최고온도": 26,
"최저온도": 20,
"날씨": "맑음",
"강수확률": 10
}
],
"생활정보": {
"옷차림": "긴팔 셔츠나 얇은 가디건이 좋아요",
"우산": "필요 없어요",
"외출": "야외 활동하기 좋은 날씨예요",
"세차": "가능해요",
"빨래": "잘 마를 거예요"
}
}`;
// JSON 편지를 자바스크립트 정보 상자로 바꾸기
const weatherData = JSON.parse(weatherResponseJSON); // 날씨 편지를 읽어서 정보 상자로 만들어요
// 응답 성공 여부 확인하기
if (weatherData.요청성공) { // 날씨 정보를 성공적으로 받았으면
console.log("🌤️ 날씨 정보를 성공적으로 받아왔어요!"); // 성공 메시지를 보여줘요
console.log(`📍 지역: ${weatherData.현재날씨.지역}`); // 현재 지역을 알려줘요
// 현재 날씨 정보 표시하기
const current = weatherData.현재날씨; // 현재 날씨 정보를 꺼내요
console.log(`\n🌡️ 현재 날씨 (${current.측정시간}):`); // 측정 시간과 함께 제목을 보여줘요
console.log(` 온도: ${current.온도.현재}°C (체감온도: ${current.온도.체감}°C)`); // 현재 온도와 체감온도를 알려줘요
console.log(` 최고/최저: ${current.온도.최고}°C / ${current.온도.최저}°C`); // 최고온도와 최저온도를 보여줘요
console.log(` 날씨: ${current.날씨상태.주요} (${current.날씨상태.상세})`); // 날씨 상태를 자세히 알려줘요
console.log(` 바람: ${current.바람.방향} ${current.바람.속도}${current.바람.단위}`); // 바람 정보를 보여줘요
console.log(` 습도: ${current.습도}%`); // 습도를 알려줘요
console.log(` 자외선 지수: ${current.자외선지수}`); // 자외선 지수를 보여줘요
// 미세먼지 정보 표시하기
const dust = current.미세먼지; // 미세먼지 정보를 꺼내요
console.log(` 미세먼지: ${dust.상태} (PM2.5: ${dust["PM2.5"]}, PM10: ${dust.PM10})`); // 미세먼지 상태를 알려줘요
// 주간 예보 표시하기
console.log("\n📅 주간 날씨 예보:");
weatherData.주간예보.forEach((day, index) => { // 주간 예보를 하나씩 꺼내서
console.log(` ${day.요일} (${day.날짜}): ${day.날씨} ${day.최저온도}°C~${day.최고온도}°C (강수확률 ${day.강수확률}%)`); // 각 날의 날씨를 보여줘요
});
// 생활 정보 표시하기
console.log("\n👕 생활 정보:");
const lifeInfo = weatherData.생활정보; // 생활 정보를 꺼내요
console.log(` 옷차림: ${lifeInfo.옷차림}`); // 옷차림 추천을 보여줘요
console.log(` 우산: ${lifeInfo.우산}`); // 우산 필요 여부를 알려줘요
console.log(` 외출: ${lifeInfo.외출}`); // 외출 관련 정보를 보여줘요
console.log(` 세차: ${lifeInfo.세차}`); // 세차 가능 여부를 알려줘요
console.log(` 빨래: ${lifeInfo.빨래}`); // 빨래 관련 정보를 보여줘요
// 온도에 따른 추천 활동하기
const currentTemp = current.온도.현재; // 현재 온도를 가져와요
console.log("\n🎯 오늘의 추천 활동:");
if (currentTemp >= 25) { // 온도가 25도 이상이면
console.log(" 🏊♂️ 수영이나 물놀이하기 좋은 날씨예요!"); // 수영을 추천해요
} else if (currentTemp >= 20) { // 온도가 20도 이상이면
console.log(" 🚴♂️ 자전거 타기나 산책하기 좋은 날씨예요!"); // 자전거나 산책을 추천해요
} else if (currentTemp >= 15) { // 온도가 15도 이상이면
console.log(" 📚 공원에서 책 읽기 좋은 날씨예요!"); // 공원에서 책 읽기를 추천해요
} else { // 온도가 15도 미만이면
console.log(" 🏠 따뜻한 실내 활동을 추천해요!"); // 실내 활동을 추천해요
}
// 비 올 확률이 높은 날 찾기
console.log("\n☔ 우산이 필요한 날:");
const rainyDays = weatherData.주간예보.filter(day => day.강수확률 >= 50); // 강수확률이 50% 이상인 날을 찾아요
if (rainyDays.length > 0) { // 비올 날이 있으면
rainyDays.forEach(day => { // 비올 날들을 하나씩 꺼내서
console.log(` ${day.요일}: ${day.강수확률}% 확률로 ${day.날씨}`); // 각 날의 강수확률을 보여줘요
});
} else { // 비올 날이 없으면
console.log(" 이번 주에는 우산이 필요 없을 것 같아요!"); // 우산이 필요 없다고 알려줘요
}
// 가장 추운 날과 가장 더운 날 찾기
const temperatures = weatherData.주간예보.map(day => ({ // 주간 예보에서 온도 정보만 뽑아내요
요일: day.요일,
최고: day.최고온도,
최저: day.최저온도
}));
const hottestDay = temperatures.reduce((max, day) => // 가장 더운 날을 찾아요
day.최고 > max.최고 ? day : max
);
const coldestDay = temperatures.reduce((min, day) => // 가장 추운 날을 찾아요
day.최저 < min.최저 ? day : min
);
console.log(`\n🌡️ 이번 주 날씨 요약:`);
console.log(` 가장 더운 날: ${hottestDay.요일} ${hottestDay.최고}°C`); // 가장 더운 날을 알려줘요
console.log(` 가장 추운 날: ${coldestDay.요일} ${coldestDay.최저}°C`); // 가장 추운 날을 알려줘요
} else { // 날씨 정보를 받지 못했으면
console.error("😞 날씨 정보를 받아오는데 실패했어요."); // 실패 메시지를 보여줘요
console.error(`오류 코드: ${weatherData.응답코드}`); // 오류 코드를 알려줘요
}
console.log("\n" + "=".repeat(50) + "\n"); // 예쁜 구분선을 그어줘요
// 간단한 날씨 정보만 뽑아서 JSON으로 저장하기
const simplifiedWeather = { // 간단한 날씨 정보만 담을 새 상자를 만들어요
지역: weatherData.현재날씨.지역, // 지역 정보를 넣어요
현재온도: weatherData.현재날씨.온도.현재, // 현재 온도를 넣어요
날씨상태: weatherData.현재날씨.날씨상태.주요, // 주요 날씨 상태를 넣어요
오늘추천: weatherData.생활정보.옷차림, // 옷차림 추천을 넣어요
내일예보: weatherData.주간예보[0] // 내일 예보를 넣어요
};
const simplifiedJSON = JSON.stringify(simplifiedWeather, null, 2); // 간단한 정보를 JSON 편지로 만들어요
console.log("📝 간단 요약 JSON:");
console.log(simplifiedJSON); // 간단 요약 편지를 보여줘요이 날씨 정보 예제는 실제 인터넷 서비스에서 받을 수 있는 복잡한 JSON 데이터와 비슷한 구조를 보여줘요. 중첩된 정보 상자들과 목록이 섞여 있고, 다양한 데이터 종류(문자, 숫자, 참/거짓, null)가 모두 포함되어 있어요. 또한 받아온 JSON 데이터를 분석해서 유용한 정보를 뽑아내고, 필요한 부분만 다시 JSON으로 만드는 실용적인 활용법도 보여준답니다.
🎯 17단원까지 배운 내용 복습하기
18단원을 배우기 전에 그동안 배운 중요한 내용들을 복습해보겠습니다!
복습 문제 1: 클래스와 상속 활용하기 (15단원 복습)
// 동물 기본 클래스
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
// 기본 행동
speak() {
console.log(`${this.name}이(가) 소리를 냅니다.`);
}
// 정보 출력
getInfo() {
return `이름: ${this.name}, 나이: ${this.age}살`;
}
}
// 강아지 클래스 (Animal을 상속받음)
class Dog extends Animal {
constructor(name, age, breed) {
super(name, age); // 부모 클래스의 생성자 호출
this.breed = breed;
}
// 메서드 오버라이딩
speak() {
console.log(`${this.name}이(가) 멍멍 짖습니다! 🐕`);
}
// 강아지만의 특별한 행동
fetch() {
console.log(`${this.name}이(가) 공을 가져옵니다!`);
}
// 정보에 견종 추가
getInfo() {
return super.getInfo() + `, 견종: ${this.breed}`;
}
}
// 고양이 클래스 (Animal을 상속받음)
class Cat extends Animal {
constructor(name, age, color) {
super(name, age);
this.color = color;
}
// 메서드 오버라이딩
speak() {
console.log(`${this.name}이(가) 야옹 웁니다! 🐱`);
}
// 고양이만의 특별한 행동
purr() {
console.log(`${this.name}이(가) 그르렁거립니다~`);
}
// 정보에 색깔 추가
getInfo() {
return super.getInfo() + `, 색깔: ${this.color}`;
}
}
console.log("복습 문제 1 - 클래스와 상속:");
// 동물들 만들기
const buddy = new Dog("버디", 3, "골든 리트리버");
const whiskers = new Cat("수염이", 2, "회색");
// 정보 출력
console.log(buddy.getInfo());
console.log(whiskers.getInfo());
// 각자의 소리 내기
buddy.speak();
whiskers.speak();
// 특별한 행동하기
buddy.fetch();
whiskers.purr();
// 💡 해설: 15단원에서 배운 클래스와 상속을 활용해서 공통 기능은 부모 클래스에,
// 각자의 특별한 기능은 자식 클래스에 구현했습니다.복습 문제 2: 모듈 시스템 활용하기 (17단원 복습)
// math-utils.js 모듈을 시뮬레이션해보겠습니다
// (실제로는 별도 파일로 만들어야 해요)
// 간단한 계산 함수들을 export하는 모듈
const MathUtils = {
// 두 수를 더하는 함수
add: function(a, b) {
return a + b;
},
// 두 수를 곱하는 함수
multiply: function(a, b) {
return a * b;
},
// 배열의 평균을 구하는 함수
average: function(numbers) {
if (numbers.length === 0) return 0;
const sum = numbers.reduce((total, num) => total + num, 0);
return sum / numbers.length;
}
};
// 모듈을 사용해보기
const result1 = MathUtils.add(10, 20);
const result2 = MathUtils.multiply(5, 6);
const result3 = MathUtils.average([80, 90, 70, 85, 95]);
console.log("\n복습 문제 2 - 모듈 시스템:");
console.log(`10 + 20 = ${result1}`);
console.log(`5 × 6 = ${result2}`);
console.log(`평균 점수: ${result3.toFixed(1)}점`);
// 💡 해설: 17단원에서 배운 모듈 시스템을 활용해서 계산 기능들을 분리하고 재사용했습니다.
// export와 import를 통해 코드를 깔끔하게 정리할 수 있어요.🔄 JSON 사용 과정 정리
지금까지 배운 JSON 사용 과정을 차근차근 정리해 보겠어요.
첫 번째 단계는 JSON 모습 이해하기예요. 중괄호 안에 "이름": 값 형태로 정보를 정리하고, 목록은 대괄호로 표현한다는 기본 규칙을 익혀야 해요.
두 번째는 JSON 읽기 단계예요. JSON.parse()라는 기능을 사용해서 JSON 편지를 자바스크립트에서 사용할 수 있는 정보 상자로 바꾸는 방법을 배워야 해요.
세 번째는 정보에 접근하기예요. 바뀐 정보 상자에서 점 표기법이나 대괄호 표기법을 사용해서 원하는 정보에 접근하는 방법을 익혀야 해요.
네 번째는 JSON 쓰기 단계예요. JSON.stringify()라는 기능을 사용해서 자바스크립트 정보 상자를 JSON 편지로 바꾸는 방법을 배워야 해요.
다섯 번째는 오류 처리하기예요. JSON이 잘못된 형태일 때 발생하는 오류를 try-catch문으로 안전하게 처리하는 방법을 알아야 해요.
마지막으로는 실무에서 활용하기 단계예요. 웹 API, 파일 저장, 설정 관리 등 실제 상황에서 JSON을 어떻게 활용할지 이해해야 해요.
🧚♀️ 이야기로 다시 배우기: 편지 번역 센터
지금까지 배운 내용을 하나의 아름다운 이야기로 다시 정리해볼까요?
오래전, 여러 나라들이 흩어져 있던 시대가 있었어요. 각 나라마다 서로 다른 언어와 문자를 사용해서, 다른 나라와 소통하는 것이 매우 어려웠어요.
한국에서는 한글을, 중국에서는 한자를, 미국에서는 영어를 사용했거든요. 서로 편지를 보내고 싶어도 상대방이 이해할 수 없어서 늘 답답했답니다.
그러던 어느 날, 지혜로운 JSON 번역사가 나타났어요. 번역사는 모든 나라가 이해할 수 있는 공통 편지 쓰기 방법을 만들었어요. 이 편지 쓰기 방법에는 몇 가지 간단한 규칙이 있었습니다:
- 모든 내용은 이름표와 내용물로 구성한다
- 여러 내용을 담을 때는 특별한 상자({ })를 사용한다
- 목록을 만들 때는 특별한 주머니([ ])를 사용한다
- 내용이 없으면 '없음(null)'이라고 쓴다
이 규칙만 따르면, 어떤 나라에서든 다른 나라의 편지를 읽을 수 있었어요. 한국에서 이렇게 써서 보내면:
{
"보내는나라": "한국",
"받는나라": "미국",
"내용": "친구가 되고 싶어요",
"선물": ["김치", "한복", "태극기"],
"답장요청": true
}미국에서도 바로 이해할 수 있었거든요! 어느 나라에서 보낸 건지, 어떤 내용인지, 어떤 선물을 보내는지 한눈에 알 수 있었답니다.
가장 놀라운 점은 이 편지 쓰기 방법이 양방향으로 작동한다는 것이었어요. 다른 나라에서 받은 편지를 자기 나라 말로 번역할 수도 있고(JSON.parse()), 자기가 쓴 편지를 공통 편지 형태로 바꿔서 보낼 수도 있었답니다(JSON.stringify()).
덕분에 모든 나라들이 자유롭게 소통할 수 있게 되었고, 무역도 활발해지고, 친구도 많이 사귈 수 있게 되었어요.
우리가 배운 JSON도 이 편지 번역 센터와 똑같은 역할을 해요. 서로 다른 프로그래밍 언어나 시스템들이 같은 형식을 사용해서 정보를 주고받을 수 있게 해주는 거예요!
🧠 자주 하는 실수와 주의할 점
JSON을 사용할 때 초보자들이 자주 하는 실수들을 미리 알아두면 더 안전하게 JSON을 사용할 수 있어요.
❌ 실수 1: 작은따옴표 사용하기
// 이렇게 하면 안돼요 - JSON에서는 작은따옴표를 쓸 수 없어요
const wrongJSON = `{
'name': '철수',
'age': 10
}`;
// 이렇게 해야 맞아요 - JSON에서는 반드시 큰따옴표를 써야 해요
const correctJSON = `{
"name": "철수",
"age": 10
}`;
try {
JSON.parse(wrongJSON); // 오류 발생!
} catch (error) {
console.log("작은따옴표 때문에 오류가 났어요:", error.message);
}
try {
const result = JSON.parse(correctJSON); // 성공!
console.log("큰따옴표로 하니까 성공했어요:", result);
} catch (error) {
console.log("이상해요, 오류가 났어요:", error.message);
}이런 문제가 생기는 이유는 JSON이 매우 엄격한 규칙을 가지고 있기 때문이에요. 자바스크립트에서는 작은따옴표와 큰따옴표를 모두 사용할 수 있지만, JSON에서는 반드시 큰따옴표만 사용해야 해요.
❌ 실수 2: 맨 끝에 쉼표 넣기
// 이렇게 하면 안돼요 - 맨 끝에 쉼표가 있으면 오류가 나요
const wrongJSON2 = `{
"name": "영희",
"age": 11,
"hobbies": ["독서", "그림"],
}`; // 마지막 쉼표가 문제!
// 이렇게 해야 맞아요 - 마지막에는 쉼표를 쓰지 않아요
const correctJSON2 = `{
"name": "영희",
"age": 11,
"hobbies": ["독서", "그림"]
}`;
try {
JSON.parse(wrongJSON2); // 오류 발생!
} catch (error) {
console.log("마지막 쉼표 때문에 오류가 났어요:", error.message);
}
try {
const result = JSON.parse(correctJSON2); // 성공!
console.log("마지막 쉼표를 빼니까 성공했어요:", result);
} catch (error) {
console.log("이상해요, 오류가 났어요:", error.message);
}자바스크립트에서는 마지막에 쉼표를 넣어도 괜찮지만, JSON에서는 허용되지 않아요. 문장의 끝에 마침표를 찍듯이, JSON에서는 마지막 항목 뒤에 쉼표를 찍으면 안 돼요.
❌ 실수 3: undefined 값 사용하기
// 이렇게 하면 문제가 생겨요 - undefined는 JSON에서 사라져요
const objectWithUndefined = {
name: "민수",
age: 12,
nickname: undefined, // 이 값은 JSON에서 사라질 거예요
score: null // null은 괜찮아요
};
const jsonString = JSON.stringify(objectWithUndefined);
console.log("JSON으로 바뀐 결과:", jsonString);
// nickname이 사라진 걸 볼 수 있어요!
const parsedBack = JSON.parse(jsonString);
console.log("다시 상자로 바뀐 결과:", parsedBack);
console.log("nickname이 있나요?", "nickname" in parsedBack); // false
// 해결 방법: undefined 대신 null을 사용하기
const correctObject = {
name: "민수",
age: 12,
nickname: null, // null을 사용하면 JSON에 포함돼요
score: null
};
const correctJSON3 = JSON.stringify(correctObject);
console.log("올바른 JSON:", correctJSON3);이런 문제가 발생하는 이유는 JSON이 undefined 값을 지원하지 않기 때문이에요. 값이 없다는 것을 표현하고 싶을 때는 null을 사용해야 해요.
✏️ 연습 문제들을 풀어보세요
우리가 배운 내용을 손끝으로 확인해보는 시간이에요. 차분하게, 여러분만의 속도로 천천히 해보세요.
Ex1) 우리 반 급식 메뉴를 JSON으로 만들어보기
// 우리 반 급식 메뉴를 JSON으로 만들어보기
const weeklyMenuJSON = `{
"학교": "햇살초등학교",
"기간": "2023년 10월 3주차",
"메뉴담당": "김영양사",
"주간메뉴": {
"월요일": {
"주식": "쌀밥",
"국": "미소된장국",
"주반찬": "불고기",
"부반찬": ["김치", "콩나물무침", "계란말이"],
"후식": "요거트",
"칼로리": 650
},
"화요일": {
"주식": "카레라이스",
"국": "맑은야채국",
"주반찬": null,
"부반찬": ["단무지", "오이피클"],
"후식": "우유",
"칼로리": 580
},
"수요일": {
"주식": "짜장면",
"국": "계란국",
"주반찬": "탕수육",
"부반찬": ["김치", "양파절임"],
"후식": "사과",
"칼로리": 720
}
},
"알레르기정보": ["우유", "계란", "밀", "대두"],
"특별사항": "수요일 탕수육은 개별 포장됩니다"
}`;
// JSON을 정보 상자로 바꿔서 사용하기
const menuData = JSON.parse(weeklyMenuJSON); // JSON 편지를 읽어서 정보 상자로 만들어요
console.log(`🍽️ ${menuData.학교} ${menuData.기간} 급식 메뉴`); // 학교 이름과 기간을 보여줘요
console.log(`👩🍳 메뉴 담당: ${menuData.메뉴담당} 선생님\n`); // 메뉴 담당 선생님을 소개해요
// 각 요일별 메뉴 출력하기
for (const day in menuData.주간메뉴) { // 주간 메뉴를 하나씩 꺼내서
const menu = menuData.주간메뉴[day]; // 그 날의 메뉴 정보를 가져와요
console.log(`📅 ${day}:`); // 요일을 보여줘요
console.log(` 주식: ${menu.주식}`); // 주식을 알려줘요
console.log(` 국: ${menu.국}`); // 국을 알려줘요
if (menu.주반찬) { // 주반찬이 있으면
console.log(` 주반찬: ${menu.주반찬}`); // 주반찬을 보여줘요
} else { // 주반찬이 없으면
console.log(` 주반찬: 없음`); // 없다고 말해줘요
}
console.log(` 부반찬: ${menu.부반찬.join(", ")}`); // 부반찬들을 쉼표로 연결해서 보여줘요
console.log(` 후식: ${menu.후식}`); // 후식을 알려줘요
console.log(` 칼로리: ${menu.칼로리}kcal\n`); // 칼로리를 보여줘요
}
// 알레르기 정보 출력
console.log(`⚠️ 알레르기 주의 식품: ${menuData.알레르기정보.join(", ")}`); // 알레르기 정보를 쉼표로 연결해서 보여줘요
console.log(`📢 특별사항: ${menuData.특별사항}`); // 특별사항을 알려줘요
// 가장 칼로리가 높은 날 찾기
let highestCalorieDay = ""; // 가장 높은 칼로리 날을 저장할 변수를 만들어요
let highestCalories = 0; // 가장 높은 칼로리를 저장할 변수를 만들어요
for (const day in menuData.주간메뉴) { // 주간 메뉴를 하나씩 확인해서
const calories = menuData.주간메뉴[day].칼로리; // 그 날의 칼로리를 가져와요
if (calories > highestCalories) { // 지금까지의 최고 칼로리보다 높으면
highestCalories = calories; // 최고 칼로리를 업데이트해요
highestCalorieDay = day; // 그 날을 기록해요
}
}
console.log(`\n🔥 이번 주 가장 칼로리가 높은 날: ${highestCalorieDay} (${highestCalories}kcal)`); // 가장 높은 칼로리 날을 알려줘요이 연습문제를 통해 우리는 일상적인 정보도 JSON으로 잘 정리할 수 있다는 것을 배웠어요.
Ex2) 온라인 장난감 상점의 상품 정보를 JSON으로 만들어보기
// 온라인 장난감 상점의 상품 정보를 JSON으로 만들어보기
const toyStoreJSON = `{
"상점이름": "해피 토이 스토어",
"상점전화": "02-1234-5678",
"영업시간": "09:00 - 18:00",
"배송지역": ["서울", "경기", "인천"],
"상품목록": [
{
"상품코드": "TOY001",
"이름": "레고 우주선 세트",
"가격": 89000,
"재고": 15,
"연령대": "8세 이상",
"카테고리": "블록 장난감",
"특징": ["창의력 발달", "조립 놀이", "STEM 교육"],
"할인중": true,
"할인율": 20
},
{
"상품코드": "TOY002",
"이름": "인형 친구들",
"가격": 35000,
"재고": 8,
"연령대": "3세 이상",
"카테고리": "인형",
"특징": ["감정 발달", "역할 놀이"],
"할인중": false,
"할인율": 0
},
{
"상품코드": "TOY003",
"이름": "과학 실험 키트",
"가격": 125000,
"재고": 0,
"연령대": "10세 이상",
"카테고리": "교육 완구",
"특징": ["과학 학습", "실험 놀이", "호기심 자극"],
"할인중": false,
"할인율": 0
}
],
"배송비": {
"기본배송비": 3000,
"무료배송기준": 50000,
"당일배송": 5000
}
}`;
// JSON을 정보 상자로 바꾸기
const storeData = JSON.parse(toyStoreJSON); // JSON 편지를 읽어서 정보 상자로 만들어요
console.log(`🧸 ${storeData.상점이름}에 오신 것을 환영합니다!`); // 상점에 인사해요
console.log(`📞 문의전화: ${storeData.상점전화}`); // 상점 전화번호를 알려줘요
console.log(`🕒 영업시간: ${storeData.영업시간}`); // 영업시간을 보여줘요
console.log(`🚚 배송 가능 지역: ${storeData.배송지역.join(", ")}\n`); // 배송 가능 지역을 쉼표로 연결해서 보여줘요
// 상품 목록 표시하기
console.log("🛍️ 상품 목록:");
storeData.상품목록.forEach((product, index) => { // 상품들을 하나씩 꺼내서
console.log(`\n${index + 1}. ${product.이름} (${product.상품코드})`); // 상품 번호, 이름, 코드를 보여줘요
// 할인가 계산하기
let finalPrice = product.가격; // 최종 가격을 상품 가격으로 시작해요
if (product.할인중) { // 할인 중이면
finalPrice = product.가격 * (1 - product.할인율 / 100); // 할인된 가격을 계산해요
console.log(` 가격: ${product.가격.toLocaleString()}원 → ${finalPrice.toLocaleString()}원 (${product.할인율}% 할인!) 🔥`); // 원래 가격과 할인 가격을 보여줘요
} else { // 할인 중이 아니면
console.log(` 가격: ${finalPrice.toLocaleString()}원`); // 그냥 가격을 보여줘요
}
console.log(` 연령대: ${product.연령대}`); // 연령대를 알려줘요
console.log(` 카테고리: ${product.카테고리}`); // 카테고리를 보여줘요
console.log(` 특징: ${product.특징.join(", ")}`); // 특징들을 쉼표로 연결해서 보여줘요
// 재고 상태 표시하기
if (product.재고 > 0) { // 재고가 있으면
console.log(` 재고: ${product.재고}개 📦`); // 재고 개수를 보여줘요
} else { // 재고가 없으면
console.log(` 재고: 품절 😞`); // 품절이라고 알려줘요
}
});
// 배송비 정보 표시하기
console.log(`\n🚛 배송비 안내:`);
console.log(` 기본 배송비: ${storeData.배송비.기본배송비.toLocaleString()}원`); // 기본 배송비를 알려줘요
console.log(` 무료 배송: ${storeData.배송비.무료배송기준.toLocaleString()}원 이상 구매 시`); // 무료 배송 기준을 보여줘요
console.log(` 당일 배송: ${storeData.배송비.당일배송.toLocaleString()}원 (추가 요금)`); // 당일 배송 요금을 알려줘요
// 할인 중인 상품 찾기
console.log(`\n🎉 할인 중인 상품:`);
const saleItems = storeData.상품목록.filter(product => product.할인중); // 할인 중인 상품들만 골라내요
if (saleItems.length > 0) { // 할인 상품이 있으면
saleItems.forEach(product => { // 할인 상품들을 하나씩 꺼내서
const salePrice = product.가격 * (1 - product.할인율 / 100); // 할인 가격을 계산해요
console.log(` ${product.이름}: ${product.할인율}% 할인 (${salePrice.toLocaleString()}원)`); // 상품명과 할인 정보를 보여줘요
});
} else { // 할인 상품이 없으면
console.log(" 현재 할인 중인 상품이 없어요."); // 없다고 알려줘요
}
// 구매 가능한 상품 개수
const availableItems = storeData.상품목록.filter(product => product.재고 > 0); // 재고가 있는 상품들만 골라내요
console.log(`\n📊 구매 가능한 상품: ${availableItems.length}개 / 총 ${storeData.상품목록.length}개`); // 구매 가능한 상품 개수를 보여줘요이 온라인 상점 예제는 실제 쇼핑몰에서 볼 수 있는 정보 구조와 비슷해요.
🎉 이번 시간 배운 것들
이번 시간 우리가 함께 배운 내용들을 정리해보면, 먼저 JSON이 무엇인지 이해했어요. 전 세계 컴퓨터들이 사용하는 공통 언어처럼, 서로 다른 프로그램들이 정보를 주고받을 때 사용하는 특별한 편지 쓰기 방법이라는 것을 배웠어요.
둘째로는 JSON의 기본 규칙들을 배웠어요. 큰따옴표 사용하기, 마지막 쉼표 넣지 않기, 중괄호와 대괄호 올바르게 사용하기 등의 간단하지만 중요한 규칙들을 익혔어요.
셋째로는 다양한 실전 예제를 통해 JSON의 활용법을 익혔어요. 친구 정보, 도서관 시스템, 날씨 정보 등 실생활과 가까운 예제들로 JSON을 읽고 쓰는 방법을 체험해 보았어요.
넷째로는 17단원까지 배운 내용들을 복습했어요. 클래스 상속과 모듈 시스템을 다시 한번 연습하면서 기초를 탄탄히 다졌어요.
마지막으로는 자주 하는 실수들과 JSON을 더 안전하게 사용하는 방법을 알아보았어요. 이런 내용들을 기억하면 앞으로 JSON을 사용할 때 문제없이 잘 사용할 수 있을 거예요.
다음 시간에는 더 흥미진진한 프로그래밍 주제들이 기다리고 있어요. 오늘 배운 JSON을 꾸준히 연습해서 멋진 코딩 실력을 키워나가세요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| JSON의 기본 개념 | ✅ |
| JSON.parse()와 JSON.stringify() 사용법 | ✅ |
| JSON의 규칙과 형식 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 17단원까지 복습 내용 | ✅ |
📂 마무리 정보
오늘 배운 18.5.1 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'18. 똑똑한 코드 패턴 (디자인 패턴) > 18.5 JSON 다루기' 카테고리의 다른 글
| 18.5.3 JSON과 객체의 차이 - 데이터를 주고받는 두 가지 방법 (0) | 2025.07.28 |
|---|---|
| 18.5.2 JSON.stringify와 JSON.parse - 데이터 변환 도구 (0) | 2025.07.28 |