📘 13.5.3 에러 처리와 응용 - 문제 상황에서도 든든한 프로그램 만들기
여러분, 안녕하세요. 지난 시간까지 우리는 멀리 있는 서버에게 정보를 요청하고, 그 답장을 받아서 처리하는 방법을 차근차근 배워왔습니다. 하지만 세상일이 언제나 우리 뜻대로만 흘러가지는 않듯이, 인터넷 세상에서도 예상치 못한 일들이 일어나곤 해요.
때로는 인터넝이 갑자기 끊어지기도 하고, 서버 컴퓨터에 문제가 생기기도 하며, 우리가 잘못된 주소로 편지를 보내기도 하죠. 이런 순간들을 마주했을 때, 우리는 어떻게 해야 할까요?
오늘은 그런 예상치 못한 순간들을 따뜻하게 감싸 안는 방법을 배워보겠습니다. 비 오는 날 우산을 준비하듯, 프로그램도 혹시 모를 상황에 대비해야 해요. 문제가 생겨도 사용자가 당황하지 않고 "아, 이런 일이 있을 수도 있구나" 하며 이해할 수 있게 도와주는, 그런 배려 깊은 프로그램을 함께 만들어보아요.
🧠 새로운 단어들과 친해지기
문제를 다루는 일과 관련된 중요한 단어들을 쉽게 풀어서 설명해드릴게요.
| 단어 | 쉬운 설명 |
|---|---|
| 인터넷 연결 문제 | 인터넷이 끊어지거나 서버에 연결할 수 없는 상황을 의미해요. |
| 서버 응답 번호 | 서버가 우리의 요청을 받고 처리한 결과를 알려주는 숫자 코드예요. |
| 다시 시도하기 | 한 번 실패했을 때 포기하지 않고 다시 도전해보는 것을 말해요. |
| 시간 초과 | 정해진 시간 안에 답장이 오지 않으면 기다림을 그만두는 것이에요. |
서버 응답 번호는 마치 우체국에서 편지 배달 상황을 알려주는 것과 비슷해요. "배달 완료(200)", "주소를 찾을 수 없음(404)", "우체국에 문제 발생(500)" 같은 식으로 상황을 숫자로 전해주는 거죠.
✨ 문제 처리의 핵심 개념
문제 처리란 예상하지 못한 상황에 대비하는 따뜻한 준비와 같아요. 우리가 소중한 사람과 만날 약속을 할 때 여러 가지 상황을 생각해두는 것처럼, 프로그램도 혹시 모를 일들을 미리 생각해두는 거예요.
Fetch를 사용할 때 마주할 수 있는 어려움들은 크게 두 가지로 나뉘어요. 첫 번째는 인터넷 연결의 문제로, 마치 전화선이 끊어진 것처럼 아예 연결 자체가 어려운 경우예요. 두 번째는 서버 처리의 문제로, 전화는 연결되지만 상대방이 우리의 요청을 처리하는 과정에서 어려움이 생기는 경우예요.
좋은 문제 처리의 핵심은 사용자가 마음편히 이해할 수 있는 말로 상황을 전해주는 것이에요. "네트워크 에러가 발생했습니다" 같은 딱딱한 표현보다는 "인터넷 연결을 확인해주세요" 같은 친근한 말이 훨씬 따뜻하죠. 그리고 가능하다면 스스로 문제를 해결해주거나, 사용자가 쉽게 다시 시도할 수 있는 길을 열어주어야 해요.
재미있는 비유: 소풍날의 계획과 대비책
문제 처리를 더 쉽게 이해하기 위해 '소풍날의 계획과 대비책'으로 비유해볼게요.
소풍을 떠날 때 우리는 여러 가지 상황을 생각하며 준비하죠. 날씨가 맑으면 계획대로 야외에서 신나게 놀고, 비가 내리면 실내에서 즐거운 시간을 보내고, 버스가 고장 나면 다른 방법으로 이동하며, 목적지가 갑자기 문을 닫으면 근처의 다른 곳으로 발걸음을 옮기기도 해요.
문제 처리도 이와 같아요. 서버에서 정보를 잘 받으면 원래 계획대로 진행하고, 인터넷이 끊어지면 "연결을 확인해주세요"라고 부드럽게 알려주며, 서버에 문제가 있으면 조금 기다렸다가 다시 시도하고, 잘못된 주소로 요청했으면 "페이지를 찾을 수 없어요"라고 친절히 안내해줘요.
이처럼 문제 처리는 모든 상황에 마음을 준비한 세심한 소풍 계획과 같아요.
🎯 문제 처리를 하는 이유
프로그램에서 문제 처리가 왜 소중한지 함께 생각해보겠어요.
첫째로, 사용자의 마음을 편안하게 지켜주기 위해서예요. 문제 처리가 없으면 뭔가 잘못되었을 때 프로그램이 갑자기 멈추거나 이상하게 동작해서 사용자를 깜짝 놀라게 할 수 있어요. 좋은 문제 처리는 사용자가 무슨 일이 일어났는지 차근차근 이해하고 적절히 대응할 수 있게 도와줘요.
둘째로, 프로그램이 흔들리지 않고 안정적으로 동작하도록 하기 위해서예요. 인터넷 연결은 언제나 완벽하지 않고, 서버도 때로는 어려움을 겪을 수 있어요. 이런 상황에서도 프로그램이 계속 제 역할을 할 수 있도록 지켜주는 것이 문제 처리의 역할이에요.
셋째로, 문제 해결의 길잡이가 되어주기 위해서예요. 단순히 "문제가 발생했어요"라고 말하는 것보다는 "인터넷 연결을 확인하고 다시 시도해보세요" 같은 구체적인 안내를 드리면 사용자가 스스로 문제를 해결할 수 있어요.
⚙️ 기본 사용법 살펴보기
문제 처리의 기본적인 방법들을 차근차근 알아보겠어요.
// 기본적인 문제 처리 구조
async function safeDataFetch() {
try {
let response = await fetch('서버주소');
// 서버 응답 번호 확인하기
if (!response.ok) {
throw new Error(`문제가 생겼어요: ${response.status}`);
}
let data = await response.json();
return data;
} catch (error) {
console.log('문제가 발생했어요:', error.message);
return null; // 기본값 반환
}
}주요 서버 응답 번호들:
200: 성공적으로 처리됨
404: 요청한 페이지나 정보를 찾을 수 없음
500: 서버 내부에 문제가 발생함
503: 서버가 일시적으로 이용할 수 없음
문제 처리 순서:
1단계: try/catch로 문제를 감지해요.
2단계: 문제의 종류를 파악해요 (인터넷 연결/서버 처리/기타).
3단계: 사용자에게 이해하기 쉬운 메시지를 보여줘요.
4단계: 가능한 경우 자동으로 다시 시도하거나 대안을 제공해요.
🧪 예제로 익혀보기
이제 실제 예제를 통해 다양한 문제 처리 방법을 차근차근 배워보겠어요.
🔹 예제 1: 따뜻한 문제 메시지 전하기
첫 번째 예제에서는 사용자가 마음편히 이해할 수 있는 문제 메시지를 만드는 방법을 알아보겠어요.
// 사용자 친화적인 문제 메시지 만들기
async function getUserWithKindMessage(userId) {
try {
// 서버에서 사용자 정보 요청하기
let response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
// 서버 응답 번호에 따라 다른 메시지 보여주기
if (!response.ok) {
if (response.status === 404) {
throw new Error("그런 사용자는 없어요. 다른 번호로 시도해보세요!");
} else if (response.status === 500) {
throw new Error("서버에 문제가 있어요. 잠시 후 다시 시도해주세요!");
} else {
throw new Error("정보를 가져올 수 없어요. 인터넷 연결을 확인해주세요!");
}
}
let user = await response.json();
console.log("사용자 정보를 성공적으로 가져왔어요:", user.name);
return user;
} catch (error) {
// 따뜻한 메시지 보여주기
console.log("❌ " + error.message);
alert(error.message); // 사용자에게 알림
return null;
}
}
// 존재하지 않는 사용자로 테스트해보기
getUserWithKindMessage(999);이 과정을 차근차근 살펴보면, 먼저 서버에 요청을 보내고 답장의 상태 번호를 확인해요. 그다음 상태 번호에 따라 서로 다른 따뜻한 메시지를 준비하죠. 마지막으로 사용자가 쉽게 이해할 수 있는 말로 상황을 부드럽게 설명해줘요.
🔹 예제 2: 실패했을 때 다시 시도하기
두 번째 예제에서는 한 번 실패해도 포기하지 않고 다시 시도하는 마음을 배워보겠어요.
// 실패하면 다시 시도하는 함수
async function tryAgainOnFailure(url, maxTries = 3) {
for (let tryNumber = 1; tryNumber <= maxTries; tryNumber++) {
try {
console.log(`${tryNumber}번째 시도 중...`);
// 서버에 요청 보내기
let response = await fetch(url);
if (response.ok) {
console.log("✅ 성공했어요!");
return await response.json();
} else {
throw new Error(`서버에서 ${response.status} 문제가 발생했어요`);
}
} catch (error) {
console.log(`❌ ${tryNumber}번째 시도 실패:`, error.message);
// 마지막 시도가 아니면 잠시 기다렸다가 다시 시도
if (tryNumber < maxTries) {
console.log("2초 후에 다시 시도할게요...");
await new Promise(resolve => setTimeout(resolve, 2000));
} else {
console.log("모든 시도가 실패했어요 😢");
return null;
}
}
}
}
// 함수 사용해보기
tryAgainOnFailure('https://jsonplaceholder.typicode.com/posts/1');이 예제는 포기하지 않는 끈기를 보여줘요. 첫 번째 시도가 실패하면 2초 기다렸다가 다시 시도하고, 그래도 안 되면 또 기다렸다가 시도해요. 하지만 무작정 시도하지는 않고 최대 3번까지만 시도해서 무한 반복을 방지해요.
🔹 예제 3: 진행 상황 보여주기
세 번째 예제에서는 사용자에게 현재 상황을 따뜻하게 알려주는 방법을 배워보겠어요.
// 로딩 상태와 문제 상태를 보여주는 함수
async function showLoadingAndError(url) {
// 로딩 시작 알리기
console.log("🔄 정보를 불러오고 있어요...");
try {
// 실제 정보 요청하기
let response = await fetch(url);
if (!response.ok) {
throw new Error(`정보를 가져올 수 없어요 (문제 ${response.status})`);
}
let data = await response.json();
// 성공했을 때
console.log("✅ 정보를 성공적으로 가져왔어요!");
console.log("받은 정보:", data.title || data.name || "정보");
return data;
} catch (error) {
// 실패했을 때
console.log("❌ 문제가 생겼어요:", error.message);
// 사용자에게 상황 알리기
console.log("💡 해결 방법: 인터넷 연결을 확인하고 다시 시도해보세요!");
return null;
} finally {
// 성공하든 실패하든 항상 실행됨
console.log("🏁 작업이 완료되었어요!");
}
}
// 함수 사용해보기
showLoadingAndError('https://jsonplaceholder.typicode.com/posts/1');이 마지막 예제는 사용자와의 소통을 무엇보다 소중하게 생각해요. 로딩 중일 때는 기다려달라고 부드럽게 알리고, 성공하면 기쁜 마음을 표현하며, 실패하면 무엇을 할 수 있는지 친절히 안내해줘요. finally 부분은 성공하든 실패하든 항상 실행되어 작업이 끝났음을 따뜻하게 알려줘요.
🔄 문제 처리 과정 정리하기
지금까지 배운 문제 처리 과정을 자연스럽게 정리해보겠어요.
첫 번째 단계는 문제 감지하기예요. try/catch 문을 사용해서 문제가 생길 가능성이 있는 코드를 따뜻하게 감싸는 거죠. 두 번째는 문제 분류하기예요. 인터넷 연결 문제인지, 서버 처리 문제인지, 아니면 다른 문제인지 차근차근 파악하는 단계예요.
세 번째는 사용자 알림하기예요. 어려운 기술 용어 대신 사용자가 이해하기 쉬운 친근한 말로 상황을 부드럽게 설명해주는 것이 중요해요. 네 번째는 해결 방안 제시하기예요. 가능한 경우 자동으로 다시 시도하거나, 사용자가 할 수 있는 해결 방법을 친절히 안내해줘요.
마지막으로 대안 제공하기예요. 원래 계획이 실패했을 때 사용할 수 있는 기본값이나 다른 방법을 미리 준비해두는 거죠.
✏️ 연습문제로 개념 다지기
실제 상황에서 물이 흐르듯 자연스럽게 정보를 요청하고, 때로는 예상치 못한 순간들을 마주하기도 하죠. 그런 순간들이 왔을 때 우리는 어떻게 대응해야 할까요? 다양한 상황을 미리 경험해보며, 어떤 일이 생겨도 당황하지 않고 차분히 대처할 수 있는 마음을 기르는 시간입니다. 실패했을 때도 포기하지 않고 다시 시도하는 끈기, 사용자에게 상황을 따뜻하게 전해주는 배려, 그리고 언제나 희망을 잃지 않는 마음을 함께 연습해보아요.
이제 배운 내용을 연습문제를 통해 확실히 익혀보겠어요.
Ex1) 서버 응답 번호에 따라 "성공했어요!" 또는 "찾을 수 없어요!" 메시지를 보여주자
// 서버 응답 번호별로 다른 메시지 보여주기
async function checkStatusAndMessage(url) {
try {
// 서버에 요청 보내기
let response = await fetch(url);
// 응답 번호 확인해서 메시지 결정하기
if (response.status === 200) {
console.log("✅ 성공했어요! 정보를 잘 가져왔어요"); // 성공 메시지
return await response.json(); // 정보 돌려주기
} else if (response.status === 404) {
console.log("❌ 찾을 수 없어요! 주소를 확인해주세요"); // 404 메시지
} else if (response.status === 500) {
console.log("❌ 서버에 문제가 있어요! 잠시 후 다시 시도해주세요"); // 500 메시지
} else {
console.log("❌ 알 수 없는 문제가 생겼어요"); // 기타 문제 메시지
}
return null; // 실패 시 null 돌려주기
} catch (error) {
console.log("❌ 인터넷 연결을 확인해주세요"); // 연결 문제 메시지
return null;
}
}
checkStatusAndMessage('https://jsonplaceholder.typicode.com/posts/999');이 연습을 통해 상태 번호별로 적절한 메시지를 제공하는 방법을 익힐 수 있어요.
Ex2) 실패하면 3초 후 한 번 더 시도하는 "끈기 있는 함수"를 만들어보자
// 한 번 더 시도하는 함수
async function tryOnceMore(url) {
try {
console.log("첫 번째 시도를 해볼게요..."); // 첫 번째 시도 시작
let response = await fetch(url);
// 첫 번째 시도 성공 확인
if (response.ok) {
console.log("✅ 첫 번째 시도에서 성공했어요!");
return await response.json(); // 성공 시 정보 돌려주기
} else {
throw new Error("첫 번째 시도 실패"); // 실패 시 오류 발생
}
} catch (error) {
console.log("❌ 첫 번째 시도가 실패했어요. 3초 후 다시 시도할게요...");
// 3초 기다리기
await new Promise(resolve => setTimeout(resolve, 3000));
try {
console.log("두 번째 시도를 해볼게요..."); // 두 번째 시도 시작
let response = await fetch(url);
return await response.json(); // 두 번째 시도 결과 돌려주기
} catch (error) {
console.log("❌ 두 번째 시도도 실패했어요"); // 최종 실패
return null;
}
}
}
tryOnceMore('https://jsonplaceholder.typicode.com/posts/1');이 문제는 다시 시도하기 로직의 기본 개념을 연습하는 데 도움이 돼요.
Ex3) "로딩 중...완료!" 메시지를 보여주는 친절한 함수를 만들어보자
// 로딩 상태를 보여주는 함수
async function showProgress(url) {
// 시작 알림
console.log("🔄 로딩을 시작할게요..."); // 로딩 시작 메시지
try {
// 서버에 요청 보내기
let response = await fetch(url);
// 요청 성공 확인하기
if (response.ok) {
let data = await response.json(); // JSON으로 변환
console.log("✅ 로딩 완료! 정보를 성공적으로 가져왔어요"); // 성공 메시지
return data;
} else {
throw new Error("정보 로딩 실패"); // 실패 시 오류 발생
}
} catch (error) {
console.log("❌ 로딩 실패:", error.message); // 실패 메시지
return null;
} finally {
console.log("🏁 작업이 모두 끝났어요!"); // 완료 메시지 (항상 실행)
}
}
showProgress('https://jsonplaceholder.typicode.com/posts/1');이 연습문제를 통해 사용자에게 진행 상황을 알리는 방법을 익힐 수 있어요.
🤔 심화 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 문제 처리에 대한 이해를 확인해보겠어요.
Q1. 다음 코드에서 문제점을 찾고 개선 방법을 설명해보세요.
async function getData() {
try {
let data = await fetch(url).then(r => r.json());
return data;
} catch (error) {
return null;
}
}정답: 이 코드는 서버 응답 번호를 확인하지 않고, 문제가 발생해도 사용자에게 알리지 않아요.
해설: fetch()는 인터넷 연결 문제만 catch하고 서버 처리 문제(404, 500 등)는 잡지 않아요. 그래서 response.ok를 확인해야 하고, 문제가 발생하면 사용자에게 무슨 일이 일어났는지 알려줘야 해요. 또한 단순히 null을 돌려주는 것보다는 구체적인 문제 정보를 제공하는 것이 좋아요.
Q2. 문제 처리가 왜 중요한지 초등학생도 이해할 수 있게 설명해보세요.
정답: 문제 처리는 "외출할 때 우산을 챙기는 것"과 같아요. 비가 올 수도 있으니까 미리 우산을 준비하는 것처럼, 프로그램도 문제가 생길 수 있으니까 미리 대비책을 준비해두는 거예요.
해설: 인터넷은 항상 완벽하지 않아서 연결이 끊어지거나 서버에 문제가 생길 수 있어요. 이럴 때 문제 처리가 없으면 프로그램이 갑자기 멈추거나 이상하게 동작해서 사용자를 당황시킬 수 있어요. 하지만 미리 준비해두면 "인터넷 연결을 확인해주세요" 같은 친절한 안내를 할 수 있어요.
📝 이전 단원 복습하기
13.5.2에서 배운 JSON 응답 처리를 복습해볼까요?
복습 문제 1: JSON과 자바스크립트 객체의 차이점을 설명하고 변환 방법을 보여주세요.
정답: JSON은 문자열 형태의 정보 형식이고, 자바스크립트 객체는 실제로 사용할 수 있는 정보 구조예요.
async function jsonExample() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/users/1');
// JSON 문자열을 자바스크립트 객체로 변환
let user = await response.json();
// 변환된 객체에서 정보 접근
console.log("이름:", user.name);
console.log("이메일:", user.email);
return user;
} catch (error) {
console.log("JSON 처리 에러:", error);
return null;
}
}
jsonExample();해설: response.json()은 서버에서 받은 JSON 문자열을 자바스크립트 객체로 변환하는 과정이에요. 이 변환 과정도 Promise를 반환하므로 await가 필요해요.
복습 문제 2: 중첩된 JSON 데이터에 안전하게 접근하는 방법을 설명해보세요.
정답: 각 단계마다 존재 여부를 확인해야 해요.
async function safeJsonAccess() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/users/1');
let user = await response.json();
// 안전한 접근 방법 1: if문 사용
if (user.address && user.address.city) {
console.log("도시:", user.address.city);
} else {
console.log("도시 정보가 없습니다");
}
// 안전한 접근 방법 2: 기본값 설정
let city = user.address?.city || "도시 정보 없음";
console.log("도시:", city);
return user;
} catch (error) {
console.log("접근 에러:", error);
return null;
}
}
safeJsonAccess();해설: JSON에서 받은 데이터가 항상 예상한 구조를 가지는 것은 아니므로, 깊은 구조에 접근할 때는 각 단계마다 존재 여부를 확인하거나 기본값을 설정해야 해요.
지금까지 문제 처리와 응용에 대해 자세히 알아보았어요. 문제 처리는 단순히 문제를 막는 것이 아니라, 사용자와 따뜻하게 소통하며 더 나은 경험을 제공하는 소중한 기술이에요. 다음 시간부터는 이렇게 안전하게 가져온 정보를 활용해서 더 멋진 기능들을 만들어보겠어요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 에러 처리의 기본 개념 | ✅ |
| HTTP 상태 코드 이해 | ✅ |
| 재시도 로직 구현 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
🎯 추가 연습 문제들
조금 더 연습하고 싶은 분들을 위한 추가 문제들이에요!
추가 문제 1. HTTP 상태 코드별로 다른 메시지를 보여주는 함수를 만들어보세요.
// 답:
async function handleHttpStatus(url) {
try {
let response = await fetch(url);
if (response.status === 200) {
console.log("✅ 성공적으로 데이터를 가져왔습니다");
return await response.json();
} else if (response.status === 404) {
console.log("❌ 요청한 데이터를 찾을 수 없습니다");
} else if (response.status >= 500) {
console.log("❌ 서버에 문제가 있습니다");
} else {
console.log("❌ 알 수 없는 오류가 발생했습니다");
}
return null;
} catch (error) {
console.log("❌ 네트워크 연결에 문제가 있습니다");
return null;
}
}
handleHttpStatus('https://jsonplaceholder.typicode.com/posts/999');추가 문제 2. 실패 시 3초 후 재시도하는 간단한 함수를 만들어보세요.
// 답:
async function retryOnce(url) {
try {
console.log("첫 번째 시도...");
let response = await fetch(url);
if (response.ok) {
return await response.json();
} else {
throw new Error("첫 번째 시도 실패");
}
} catch (error) {
console.log("3초 후 재시도합니다...");
await new Promise(resolve => setTimeout(resolve, 3000));
try {
console.log("두 번째 시도...");
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log("모든 시도 실패");
return null;
}
}
}
retryOnce('https://jsonplaceholder.typicode.com/posts/1');추가 문제 3. 로딩 중일 때와 에러일 때 화면 상태를 바꾸는 함수를 만들어보세요.
// 답:
async function manageLoadingState(url) {
// 로딩 시작
console.log("🔄 로딩 중...");
try {
let response = await fetch(url);
if (response.ok) {
let data = await response.json();
console.log("✅ 로딩 완료");
return data;
} else {
throw new Error("데이터 로딩 실패");
}
} catch (error) {
console.log("❌ 로딩 실패");
return null;
}
}
manageLoadingState('https://jsonplaceholder.typicode.com/posts/1');추가 문제 4. 네트워크 에러와 HTTP 에러의 차이점을 설명해보세요.
답: 네트워크 에러는 인터넷 연결 자체에 문제가 있을 때 발생하고(연결 끊김, 서버 접속 불가), HTTP 에러는 서버와 연결은 되지만 요청 처리에 문제가 있을 때 발생합니다(404 찾을 수 없음, 500 서버 오류 등).
추가 문제 5. 다음 코드에서 문제점을 찾고 개선해보세요.
async function getData() {
try {
let data = await fetch(url).then(r => r.json());
return data;
} catch (error) {
return null;
}
}답: 에러 처리가 너무 단순하고 사용자에게 알리지 않습니다. 개선된 코드:
async function getData() {
try {
let response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: 데이터를 가져올 수 없습니다`);
}
return await response.json();
} catch (error) {
console.log("에러:", error.message);
alert("데이터 로딩에 실패했습니다: " + error.message);
return null;
}
}🔄 단계별 진행 과정 정리
지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.
1단계 과정: 요청 → 상태 확인 → 에러 분류 → 친절한 메시지 → 사용자 표시
2단계 과정: 1차 시도 → 실패 시 대기 → 2차 시도 → 반복 → 최종 결과
3단계 과정: 로딩 표시 → 데이터 요청 → 성공/실패 처리 → 상태 업데이트
📂 마무리 정보
오늘 배운 13.5.3 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'13. 시간을 다루는 마법 (비동기 처리) > 13.5 fetch로 데이터 불러오기' 카테고리의 다른 글
| 13.5.2 JSON 응답 처리하기 - 서버가 보내주는 정보 읽어보기 (0) | 2025.07.19 |
|---|---|
| 13.5.1 fetch - 인터넷에서 정보 가져오는 도구 (0) | 2025.07.19 |