LEVEL 12 QUEST

비동기 프로그래밍 & API 호출

비동기 프로그래밍 & API 호출 — DevFoil 바이브코딩 Stage 3, Lv.12

동기 vs 비동기 프로그래밍

식당 비유로 이해하기

동기(Synchronous): 주문한 음식이 나올 때까지 줄서서 기다림. 앞 사람 음식이 안 나오면 뒷사람도 계속 대기.

비동기(Asynchronous): 주문하면 번호표 받고 자리에 앉아서 기다림. 음식 준비되면 호출. 그 사이에 다른 일 가능.

웹에서 서버에 데이터를 요청하면 응답까지 시간이 걸립니다. 그동안 화면이 멈추면 안 되겠죠? 그래서 비동기 프로그래밍이 필수입니다.

// 동기 코드 — 위에서 아래로 순서대로 실행
console.log("1. 시작");
console.log("2. 중간");
console.log("3. 끝");
// 출력: 1 → 2 → 3

// 비동기 코드 — 기다리는 동안 다음 코드 실행
console.log("1. 시작");
setTimeout(() => {
    console.log("2. 2초 뒤 실행");
}, 2000);
console.log("3. 바로 실행");
// 출력: 1 → 3 → (2초 후) 2

콜백 지옥 (Callback Hell)

비동기 작업을 연속으로 처리할 때 콜백 함수가 점점 깊어지는 문제입니다. 이것을 해결하기 위해 Promise와 async/await가 만들어졌습니다.

fetch() API — 서버에 데이터 요청하기

fetch()는 JavaScript의 기본 HTTP 요청 도구

fetch()는 웹 서버에 데이터를 요청하고 응답을 받는 내장 함수입니다. 외부 API에서 날씨 정보, 뉴스, 환율 등 다양한 데이터를 가져올 수 있습니다.

// fetch() 기본 사용법
fetch("https://api.example.com/data")
    .then(response => response.json())  // JSON으로 변환
    .then(data => {
        console.log(data);              // 데이터 사용
    })
    .catch(error => {
        console.error("에러:", error);  // 에러 처리
    });

// fetch의 흐름:
// 1. fetch("URL") → 서버에 요청 보냄 (Promise 반환)
// 2. .then(response => response.json()) → 응답을 JSON으로 파싱
// 3. .then(data => ...) → 파싱된 데이터 사용
// 4. .catch(error => ...) → 에러 발생 시 처리

Promise (프로미스)

"미래에 결과를 알려주겠다"는 약속 객체입니다. 성공하면 .then()으로, 실패하면 .catch()로 처리합니다. fetch()는 Promise를 반환합니다.

🔒

여기까지는 미리보기입니다

비동기 프로그래밍 & API 호출
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)