⏳
EPISODE 08
Promise · async/await · fetch · try/catch
비동기 프로그래밍
동기 vs 비동기, setTimeout/setInterval, Promise의 then/catch, async/await로 비동기 코드를 동기처럼, fetch API로 외부 데이터 가져오기, 그리고 try/catch 에러 처리를 익힙니다.
JavaScriptasync/awaitPromisefetch
소요 시간
⏱ 60~90분
난이도
📊 중급 입문
선수 조건
🎯 js-07
결과물
외부 API 호출과 에러 처리를 갖춘 동적 페이지
이 강의에서 배우는 것
- 1동기와 비동기의 실행 순서 차이를 설명한다
- 2Promise를 만들고 then/catch/finally로 처리한다
- 3async/await으로 가독성 좋은 비동기 코드를 작성한다
- 4fetch + response.json()으로 외부 데이터를 가져온다
- 5try/catch + throw로 에러를 안전하게 처리한다
1. 동기 vs 비동기
javascript
// 동기: 순서대로
console.log("1번");
console.log("2번");
console.log("3번");
// 1번 → 2번 → 3번
// 비동기: 완료 안 기다리고 다음으로
console.log("1번");
setTimeout(() => console.log("2번 (1초 후)"), 1000);
console.log("3번");
// 1번 → 3번 → 2번 (1초 후)2. setTimeout / setInterval
javascript
// 한 번 실행
const timerId = setTimeout(() => {
console.log("3초 후");
}, 3000);
clearTimeout(timerId);
// 반복 실행
const intervalId = setInterval(() => {
console.log("1초마다");
}, 1000);
setTimeout(() => {
clearInterval(intervalId);
}, 5000);3. Promise
javascript
const myPromise = new Promise((resolve, reject) => {
const success = true;
if (success) {
resolve("성공!");
} else {
reject("실패!");
}
});
myPromise
.then(result => {
console.log(result);
return result + " 처리 완료";
})
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("항상 실행"));4. async / await
Promise를 더 간결하게 작성하는 문법입니다.
javascript
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function main() {
console.log("시작");
await delay(1000);
console.log("1초 후");
await delay(1000);
console.log("2초 후");
}
main();5. fetch API
Promise 방식
javascript
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));async/await 방식 (권장)
javascript
async function loadData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP 오류: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("실패:", error.message);
}
}6. JSON.parse / stringify
javascript
const user = { name: "홍길동", age: 25 };
const json = JSON.stringify(user);
const parsed = JSON.parse(json);
// localStorage와 자주 사용
localStorage.setItem('user', JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem('user'));7. try / catch 에러 처리
javascript
async function risky() {
try {
const response = await fetch('https://invalid-url.xyz');
if (!response.ok) throw new Error(`서버 오류: ${response.status}`);
const data = await response.json();
return data;
} catch (error) {
console.error("오류:", error.message);
return null;
} finally {
console.log("작업 종료 (성공/실패 무관)");
}
}