날짜

<aside> <img src="/icons/calendar_gray.svg" alt="/icons/calendar_gray.svg" width="40px" />

2026.02.07

</aside>

활동내용

1. 비동기 처리 이해하기

동기 vs 비동기

// 동기 (Synchronous): 순차적 실행
console.log("1");
console.log("2");
console.log("3");
// 결과: 1, 2, 3

// 비동기 (Asynchronous): 기다리지 않고 실행
console.log("1");
setTimeout(() => {
    console.log("2");
}, 1000);
console.log("3");
// 결과: 1, 3, 2 (1초 후)

２. Promise

// Promise 생성
const promise = new Promise((resolve, reject) => {
    const success = true;
    
    if (success) {
        resolve("성공!");
    } else {
        reject("실패!");
    }
});

// Promise 사용
promise
    .then(result => {
        console.log(result);  // "성공!"
    })
    .catch(error => {
        console.log(error);   // "실패!"
    })
    .finally(() => {
        console.log("완료");
    });

Promise 체이닝

function step1() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Step 1 완료");
            resolve(1);
        }, 1000);
    });
}

function step2(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Step 2 완료");
            resolve(value + 1);
        }, 1000);
    });
}

function step3(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Step 3 완료");
            resolve(value + 1);
        }, 1000);
    });
}

// 체이닝
step1()
    .then(result => step2(result))
    .then(result => step3(result))
    .then(result => console.log("최종 결과:", result));

３. async/await

Promise를 더 간결하게 사용하는 방법

// async 함수는 항상 Promise 반환
async function fetchData() {
    return "데이터";
}

// await는 async 함수 내에서만 사용
async function getData() {
    const result = await fetchData();
    console.log(result);
}

// 에러 처리
async function fetchUserData() {
    try {
        const response = await fetch("<https://api.example.com/user>");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("에러 발생:", error);
    }
}

４. Fetch API

서버와 데이터를 주고받음

GET 요청

// 기본 사용법
fetch("<https://jsonplaceholder.typicode.com/posts/1>")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// async/await 사용
async function getPost() {
    try {
        const response = await fetch("<https://jsonplaceholder.typicode.com/posts/1>");
        
        if (!response.ok) {
            throw new Error("HTTP 에러! status: " + response.status);
        }
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("에러:", error);
    }
}

POST 요청

async function createPost() {
    try {
        const response = await fetch("<https://jsonplaceholder.typicode.com/posts>", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                title: "새 게시글",
                body: "내용입니다",
                userId: 1
            })
        });
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("에러:", error);
    }
}

PUT/PATCH 요청 (수정)