📘 13.5.2 JSON 응답 처리하기 - 서버가 보내주는 정보 읽어보기
안녕하세요, 여러분. 지난 시간에 우리는 서버에게 정보를 요청하는 방법을 배웠습니다. 마치 멀리 있는 친구에게 편지를 보내는 것처럼, 서버에게 "정보를 보내주세요"라고 부탁했지요.
이제는 서버가 보내준 답장을 어떻게 읽고 이해하는지 알아볼 차례입니다. 서버가 보내주는 정보는 JSON이라는 특별한 형식으로 되어 있어요. 마치 정리정돈이 잘 된 책장처럼, 각각의 정보가 체계적으로 정리되어 있답니다. 이 소중한 정보를 어떻게 읽어서 우리가 원하는 내용을 찾아내는지 함께 배워보겠습니다.
🧠 새로운 단어들과 친해지기
JSON으로 된 정보를 다루기 위해 꼭 알아야 할 단어들을 차근차근 설명해드리겠습니다.
| 단어 | 의미 |
|---|---|
| JSON | JavaScript Object Notation의 줄임말로, 정보를 주고받을 때 사용하는 표준 형식입니다. |
| 번역하기 | 문자로 된 JSON 정보를 자바스크립트가 이해할 수 있는 객체로 바꾸는 과정입니다. |
| 정보 찾기 | 객체 안에 들어있는 특정 정보를 꺼내어 사용하는 방법입니다. |
| 깊은 구조 | 폴더 안에 또 다른 폴더가 들어있는 것처럼, 객체 안에 객체나 배열이 들어있는 구조입니다. |
JSON은 "JavaScript Object Notation"의 줄임말이지만, 이제는 모든 프로그래밍 언어에서 사용하는 공통 언어가 되었습니다. 마치 전 세계 사람들이 사용하는 영어처럼 널리 쓰이고 있답니다.
✨ JSON의 핵심 개념
JSON은 서버와 우리 사이의 공통 언어라고 생각하면 됩니다. 서버가 우리에게 정보를 보낼 때, 그냥 아무렇게나 보내면 우리가 이해하기 어렵겠지요? 그래서 서로 약속한 형식이 바로 JSON입니다.
JSON의 가장 큰 특징은 규칙적이고 체계적이라는 점입니다. 마치 도서관의 책이 분류번호에 따라 정리되어 있는 것처럼, JSON 안의 정보도 이름표를 달고 깔끔하게 정리되어 있어요. 덕분에 우리는 "이름이 뭐예요?", "나이는 몇 살이에요?"처럼 질문하면서 원하는 정보를 쉽게 찾을 수 있습니다.
또한 JSON은 유연한 구조를 가지고 있어서, 간단한 정보부터 복잡한 정보까지 모두 담을 수 있어요. 한 사람의 기본 정보부터 시작해서, 그 사람의 친구 목록, 취미, 주소 등 모든 것을 하나의 JSON 안에 체계적으로 정리할 수 있습니다.
따뜻한 비유: 정리정돈의 달인이 만든 책상 서랍
JSON을 더 쉽게 이해하기 위해 '정리정돈의 달인이 만든 책상 서랍'에 비유해보겠습니다.
이 책상 서랍은 참으로 체계적으로 만들어져 있습니다. 각 서랍에는 이름표가 붙어있고, 서랍을 열면 또 작은 칸들로 나뉘어져 있지요. 예를 들어 "학용품" 서랍을 열면 "연필", "지우개", "자" 칸이 있고, "간식" 서랍을 열면 "과자", "사탕", "음료수" 칸이 있는 식입니다.
JSON도 마찬가지입니다. "사용자 정보"라는 큰 서랍 안에 "이름", "나이", "주소"라는 작은 칸들이 들어있고, "주소" 칸을 열면 또 "도시", "구", "동"이라는 더 작은 칸들이 들어있는 구조랍니다.
정리정돈의 달인처럼, JSON은 모든 정보를 찾기 쉽게 체계적으로 정리해서 우리에게 전달해줍니다.
🎯 JSON 응답을 처리하는 이유
서버에서 받은 JSON 응답을 제대로 처리해야 하는 이유들을 알아보겠습니다.
첫째로, 정확한 정보 뽑아내기가 필요합니다. 서버가 보내준 JSON에는 우리가 원하는 정보와 필요 없는 정보가 섞여 있을 수 있어요. 마치 큰 상자에 여러 물건이 들어있는 것처럼, 우리는 그 중에서 정말 필요한 것만 골라내야 합니다.
둘째로, 안전한 정보 처리가 중요합니다. 때로는 서버에서 예상과 다른 정보를 보내거나, 일부 정보가 빠져있을 수도 있어요. 이럴 때를 대비해서 안전하게 정보를 처리하는 방법을 알아야 합니다.
셋째로, 사용자가 더 편하게 느끼게 하기 위해서입니다. JSON 정보를 잘 처리하면 사용자에게 필요한 정보만 깔끔하게 보여줄 수 있어요. 마치 도서관에서 원하는 책만 골라서 정리해주는 친절한 사서님처럼, 우리도 사용자에게 딱 필요한 정보만 보여줄 수 있습니다.
⚙️ 기본 사용법 살펴보기
JSON 응답을 처리하는 기본적인 방법을 알아보겠습니다.
// JSON 응답 받기와 처리하기
async function processJSON() {
try {
let response = await fetch('서버주소');
let data = await response.json(); // JSON을 자바스크립트 객체로 번역
// 정보 사용하기
console.log(data.이름);
console.log(data.나이);
} catch (error) {
console.log('문제가 생겼어요:', error);
}
}JSON 정보에 접근하는 방법:
점 찍기 방법: data.name, data.age처럼 점(.)을 사용해서 정보에 접근합니다.
대괄호 방법: data['name'], data['age']처럼 대괄호를 사용해서도 접근할 수 있어요.
순서로 접근: data.friends[0]처럼 순서가 있는 정보에 접근할 수 있습니다.
깊게 들어가기: data.address.city처럼 서랍 안의 서랍에 접근할 수 있어요.
🧪 예제로 익혀보기
실제 예제를 통해 JSON 응답 처리를 자세히 배워보겠습니다.
🔹 예제 1: 사용자 정보 JSON 받아서 처리하기
첫 번째 예제에서는 서버에서 받은 사용자 정보를 어떻게 처리하는지 알아보겠습니다.
// 사용자 정보 가져와서 처리하기
async function getUserInfo() {
try {
// 서버에서 사용자 정보 요청하기
let response = await fetch('https://jsonplaceholder.typicode.com/users/1');
// JSON을 자바스크립트 객체로 번역하기
let user = await response.json();
// 기본 정보 꺼내서 사용하기
console.log("사용자 이름:", user.name);
console.log("사용자명:", user.username);
console.log("이메일:", user.email);
// 깊은 구조의 주소 정보 접근하기
console.log("살고 있는 도시:", user.address.city);
console.log("우편번호:", user.address.zipcode);
} catch (error) {
console.log("사용자 정보를 가져오는 중 문제가 생겼어요:", error);
}
}
// 함수 실행하기
getUserInfo();이 과정을 단계별로 살펴보면, 먼저 서버에 사용자 정보를 요청하고, 받은 응답을 JSON에서 자바스크립트 객체로 번역합니다. 그다음 점 찍기 방법을 사용해서 원하는 정보들을 하나씩 꺼내어 사용하지요. 마치 정리된 서랍에서 필요한 물건을 하나씩 꺼내는 것과 같습니다.
🔹 예제 2: 게시글 목록 JSON 처리하기
두 번째 예제에서는 여러 개의 게시글이 담긴 배열 형태의 JSON을 처리해보겠습니다.
// 게시글 목록 가져와서 처리하기
async function getPostList() {
try {
// 서버에서 게시글 목록 요청하기
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
// JSON 배열을 자바스크립트 배열로 번역하기
let posts = await response.json();
// 총 게시글 개수 확인하기
console.log("총 게시글 개수:", posts.length);
// 처음 3개 게시글만 처리하기
for (let i = 0; i < 3; i++) {
let post = posts[i];
console.log(`${i+1}번째 게시글:`);
console.log(" 제목:", post.title);
console.log(" 작성자 번호:", post.userId);
console.log(" 내용 미리보기:", post.body.slice(0, 30) + "...");
console.log("---");
}
} catch (error) {
console.log("게시글을 가져오는 중 문제가 생겼어요:", error);
}
}
// 함수 실행하기
getPostList();이 예제에서는 배열 형태의 JSON을 어떻게 처리하는지 배웁니다. 먼저 전체 개수를 확인하고, 반복문을 사용해서 각 게시글의 정보를 하나씩 처리해요. 마치 책장에서 책을 하나씩 꺼내서 제목과 내용을 확인하는 것과 같습니다.
🔹 예제 3: 안전하게 JSON 정보 처리하기
세 번째 예제에서는 예상과 다른 정보가 올 때를 대비해서 안전하게 처리하는 방법을 알아보겠습니다.
// 안전하게 JSON 정보 처리하기
async function safeDataProcessing() {
try {
// 서버에서 정보 요청하기
let response = await fetch('https://jsonplaceholder.typicode.com/users/1');
let user = await response.json();
// 안전하게 정보 꺼내기 (정보가 없으면 기본값 사용)
let name = user.name || "이름 정보 없음";
let email = user.email || "이메일 정보 없음";
// 깊은 구조 정보도 안전하게 접근하기
let city = "도시 정보 없음";
if (user.address && user.address.city) {
city = user.address.city;
}
// 결과 출력하기
console.log("이름:", name);
console.log("이메일:", email);
console.log("도시:", city);
} catch (error) {
console.log("정보 처리 중 문제가 생겼어요:", error);
}
}
// 함수 실행하기
safeDataProcessing();이 마지막 예제는 매우 중요합니다. 서버에서 항상 완벽한 정보를 보내주는 것은 아니기 때문에, 정보가 없을 때를 대비해서 기본값을 준비해두는 것이 좋아요. 마치 우산을 준비해두는 것처럼, 예상치 못한 상황에 대비하는 거예요.
🔄 JSON 응답 처리 과정 정리하기
지금까지 배운 JSON 응답 처리 과정을 자연스럽게 정리해보겠습니다.
첫 번째 단계는 JSON 응답 받기입니다. fetch()를 사용해서 서버에서 정보를 요청하고 응답을 받는 과정이지요.
두 번째는 JSON 번역하기입니다. response.json()을 사용해서 문자열 형태의 JSON을 자바스크립트가 이해할 수 있는 객체로 번역합니다.
세 번째는 정보 구조 파악하기입니다. 받은 정보가 어떤 구조로 되어 있는지, 어떤 정보들이 들어있는지 확인하는 단계예요.
네 번째는 안전한 접근하기입니다. 점 찍기 방법이나 대괄호를 사용해서 원하는 정보에 접근하되, 정보가 없을 때를 대비해서 안전하게 처리합니다.
마지막으로 정보 활용하기 단계입니다. 추출한 정보를 화면에 보여주거나, 다른 처리에 사용하는 과정이지요.
✏️ 연습문제로 개념 다지기
이제 우리가 함께 만들어가는 연습의 시간입니다. 마치 새로운 악보를 익히는 연주자처럼, 차분하게 하나하나 연습해보겠습니다. 완벽하지 않아도 괜찮습니다. 천천히, 우리만의 속도로 나아가면 됩니다.
이제 배운 내용을 연습문제를 통해 확실히 익혀보겠습니다.
Ex1) 사용자 정보에서 이름과 전화번호만 골라서 "○○님의 전화번호는 ○○○입니다"라고 출력해보자
// 사용자의 이름과 전화번호 정보 가져오기
async function getUserContact() {
try {
// 2번 사용자 정보 요청하기
let response = await fetch('https://jsonplaceholder.typicode.com/users/2');
// JSON을 객체로 번역하기
let user = await response.json();
// 이름과 전화번호 꺼내기
let userName = user.name;
let userPhone = user.phone;
// 친근한 메시지로 출력하기
console.log(`${userName}님의 전화번호는 ${userPhone}입니다`);
} catch (error) {
console.log("연락처 정보를 가져오는 중 문제가 생겼어요:", error); // 문제 발생 시 처리
}
}
getUserContact();이 연습을 통해 JSON에서 특정 정보만 선택해서 가져오는 방법을 익힐 수 있습니다.
Ex2) 게시글 목록에서 제목만 모아서 "1. ○○○ 2. ○○○" 형태로 보여주자
// 게시글 제목들만 모아서 출력하기
async function getPostTitles() {
try {
// 모든 게시글 정보 요청하기
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
// JSON 배열로 번역하기
let posts = await response.json();
console.log("게시글 제목들:");
// 처음 5개 게시글의 제목만 반복 출력하기
for (let i = 0; i < 5; i++) {
console.log(`${i+1}. ${posts[i].title}`); // 순서와 제목 출력
}
} catch (error) {
console.log("제목을 가져오는 중 문제가 생겼어요:", error); // 문제 발생 시 처리
}
}
getPostTitles();이 문제는 배열 형태의 JSON에서 특정 속성만 반복해서 처리하는 방법을 연습하는 데 도움이 됩니다.
Ex3) 사용자 주소를 안전하게 가져와서 "○○님은 ○○시에 살고 있어요!" 출력해보자
// 주소 정보 안전하게 가져오기
async function getAddressInfo() {
try {
// 3번 사용자 정보 요청하기
let response = await fetch('https://jsonplaceholder.typicode.com/users/3');
// JSON을 객체로 번역하기
let user = await response.json();
// 이름 정보 안전하게 가져오기
let userName = user.name || "사용자";
// 깊은 구조의 주소 정보 안전하게 접근하기
if (user.address && user.address.city) {
let cityName = user.address.city; // 도시 이름 꺼내기
console.log(`${userName}님은 ${cityName}시에 살고 있어요!`); // 친근한 메시지 출력
} else {
console.log(`${userName}님의 주소 정보가 없어요`); // 주소 정보 없을 때 처리
}
} catch (error) {
console.log("주소 정보를 가져오는 중 문제가 생겼어요:", error); // 문제 발생 시 처리
}
}
getAddressInfo();이 연습문제를 통해 깊은 구조 정보에 안전하게 접근하는 방법을 익힐 수 있습니다.
🤔 심화 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 JSON 처리에 대한 이해를 확인해보겠습니다.
Q1. 다음 코드에서 문제점을 찾고 그 이유를 설명해보세요.
async function processData() {
let response = await fetch(url);
let data = await response.json();
console.log(data.user.profile.email);
}정답: data.user나 data.user.profile이 존재하지 않을 수 있는데 바로 접근하고 있어서 문제가 발생할 수 있습니다.
해설: JSON 정보는 항상 예상한 구조대로 오는 것이 아닙니다. 깊은 구조의 객체에 접근할 때는 각 단계마다 존재 여부를 확인해야 해요. if (data.user && data.user.profile) { ... }처럼 안전하게 접근하거나, || 연산자를 사용해서 기본값을 설정해야 합니다.
Q2. JSON과 자바스크립트 객체의 차이점을 초등학생도 이해할 수 있게 설명해보세요.
정답: JSON은 "정보를 주고받기 위한 편지 형식"이고, 자바스크립트 객체는 "우리가 실제로 사용하는 정보"입니다.
해설: JSON은 문자열 형태로 된 정보 형식이고, 자바스크립트 객체는 프로그램에서 실제로 사용할 수 있는 정보 구조입니다. 마치 편지(JSON)를 받아서 내용을 이해하고 메모장(객체)에 정리해서 사용하는 것과 같아요. response.json()은 편지를 메모장으로 옮겨 적는 과정이라고 할 수 있습니다.
📝 이전 단원 복습하기
13.5.1에서 배운 fetch 기본 사용법을 복습해볼까요?
복습 문제 1: fetch의 기본 사용법을 설명하고 간단한 예제를 만들어보세요.
정답:
async function basicFetch() {
try {
// 1단계: 서버에 요청
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
// 2단계: 응답 상태 확인
if (response.ok) {
// 3단계: JSON으로 변환
let data = await response.json();
console.log("받은 데이터:", data);
return data;
} else {
console.log("요청 실패:", response.status);
}
} catch (error) {
// 4단계: 에러 처리
console.log("네트워크 에러:", error);
}
}
basicFetch();해설: fetch는 항상 Promise를 반환하므로 await나 then을 사용해야 하고, response.json()도 Promise를 반환하므로 await가 필요합니다. 또한 네트워크 에러와 HTTP 에러를 모두 처리해야 해요.
복습 문제 2: fetch를 사용할 때 자주 하는 실수 2가지를 말해보세요.
정답: 1) response.json()에 await를 빼먹는 실수 2) response.ok를 확인하지 않고 바로 JSON 변환을 시도하는 실수
해설: 첫 번째 실수는 Promise 객체가 출력되게 만들고, 두 번째 실수는 404나 500 같은 HTTP 에러를 제대로 처리하지 못하게 만듭니다. 항상 각 단계를 안전하게 처리하는 것이 중요해요.
지금까지 JSON 응답 처리에 대해 자세히 알아보았습니다. JSON은 서버와 우리 사이의 소통 언어이므로, 이를 잘 다루는 것은 웹 개발에서 매우 중요합니다. 다음 시간에는 이렇게 처리한 정보를 화면에 어떻게 멋지게 표시하는지 배워보겠어요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| JSON의 기본 개념 | ✅ |
| JSON 응답 처리 방법 | ✅ |
| 안전한 데이터 접근 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 친구들을 위한 추가 문제들입니다!
추가 문제 1. 사용자 정보에서 이름과 전화번호만 출력하는 함수를 만들어보세요.
// 답:
async function getUserContact() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/users/2');
let user = await response.json();
console.log("이름:", user.name);
console.log("전화번호:", user.phone);
return {
name: user.name,
phone: user.phone
};
} catch (error) {
console.log("연락처 정보 로딩 실패:", error);
return null;
}
}
getUserContact();추가 문제 2. 게시글 목록에서 제목만 모아서 배열로 만드는 함수를 작성해보세요.
// 답:
async function getPostTitles() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
let posts = await response.json();
let titles = [];
for (let i = 0; i < Math.min(posts.length, 5); i++) {
titles.push(posts[i].title);
}
console.log("게시글 제목들:", titles);
return titles;
} catch (error) {
console.log("제목 추출 실패:", error);
return [];
}
}
getPostTitles();추가 문제 3. 중첩된 주소 정보를 안전하게 추출하는 함수를 만들어보세요.
// 답:
async function getAddressInfo() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/users/3');
let user = await response.json();
let address = "주소 정보 없음";
if (user.address && user.address.street && user.address.city) {
address = `${user.address.street}, ${user.address.city}`;
}
console.log("주소:", address);
return address;
} catch (error) {
console.log("주소 정보 추출 실패:", error);
return "주소 정보 없음";
}
}
getAddressInfo();추가 문제 4. JSON에서 중첩된 데이터에 안전하게 접근하는 방법을 설명해보세요.
답: 각 단계마다 존재 여부를 확인해야 합니다. user.address && user.address.city처럼 논리 연산자를 사용하거나, try/catch로 에러를 처리하고, 없는 경우를 대비해서 기본값을 설정해야 합니다.
추가 문제 5. 다음 코드에서 문제점을 찾고 수정해보세요.
async function processData() {
let response = await fetch(url);
let data = await response.json();
data.users.forEach(user => console.log(user.name));
}답: data.users가 배열인지 확인하지 않았습니다. 수정된 코드:
async function processData() {
let response = await fetch(url);
let data = await response.json();
if (data.users && Array.isArray(data.users)) {
data.users.forEach(user => console.log(user.name));
} else {
console.log("사용자 데이터가 없습니다");
}
}🔄 단계별 진행 과정 정리
지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.
1단계 과정: API 호출 → JSON 파싱 → 기본/중첩 데이터 접근 → 정보 출력
2단계 과정: 배열 JSON 받기 → 길이 확인 → 반복문으로 개별 처리 → 결과 출력
3단계 과정: JSON 받기 → 안전한 접근 → 기본값 설정 → 화면 업데이트
📂 마무리 정보
오늘 배운 13.5.2 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'13. 시간을 다루는 마법 (비동기 처리) > 13.5 fetch로 데이터 불러오기' 카테고리의 다른 글
| 13.5.3 에러 처리와 응용 - 문제 상황에서도 든든한 프로그램 만들기 (0) | 2025.07.19 |
|---|---|
| 13.5.1 fetch - 인터넷에서 정보 가져오는 도구 (0) | 2025.07.19 |