[JavaScript] 동기와 비동기란? Promise 객체와 async/await 정리

1. 동기와 비동기

구분	설명
동기 (Synchronous)	코드가 순서대로 실행. 앞 작업이 끝나야 다음 작업 시작
비동기 (Asynchronous)	앞 작업이 끝나기를 기다리지 않고 다음 작업 바로 실행

// 동기
console.log("1");
console.log("2");
console.log("3");
// 출력: 1 → 2 → 3 (순서 보장)

// 비동기
console.log("1");
setTimeout(() => console.log("2"), 1000);
console.log("3");
// 출력: 1 → 3 → 2 (2는 1초 후 실행)

💡 서버에 데이터를 요청할 때 응답을 기다리는 동안 아무것도 못 하면 사용자 경험이 나빠짐 → 그래서 네트워크 요청은 대부분 비동기로 처리

 

2. Promise 객체

• 비동기 작업의 완료 또는 실패를 처리하는 객체.
• fetch(), setTimeout() 등 비동기 함수에서 사용

const promise = new Promise((resolve, reject) => {
    const success = true;

    if (success) {
        resolve("성공!");  // fulfilled 상태로 전환
    } else {
        reject("실패!");   // rejected 상태로 전환
    }
});

1) Promise 객체 내부 속성

속성	의미
state	현재 상태 (pending / fulfilled / rejected)
value	결과값 (resolve / reject에 파라미터로 넘긴 값) → then / catch 콜백의 파라미터로 전달됨

state	의미	전환 조건
pending	대기 중 (아직 결과 없음)	Promise 생성 직후 초기 상태
fulfilled	성공	resolve() 호출 시
rejected	실패	reject() 호출 시

 

2) Promise 객체 메서드

메서드	실행조건	파라미터
.then(콜백)	fulfilled 상태일 때	resolve()에 넘긴 값
.catch(콜백)	rejected 상태일 때	reject()에 넘긴 값
.finally(콜백)	성공/실패 상관없이 항상 실행	없음

promise
    .then(result => {
        // resolve("성공!") 호출됐을 때 실행
        console.log(result);              // "성공!"
        return result + " 추가 처리";    // 다음 .then()으로 값 전달 가능
    })
    .then(result => {
        // 이전 .then()의 return 값이 넘어옴
        console.log(result);              // "성공! 추가 처리"
    })
    .catch(error => {
        // reject("실패!") 호출됐을 때 실행
        console.log(error);               // "실패!"
    })
    .finally(() => {
        // 성공이든 실패든 무조건 실행
        console.log("항상 실행");
    });

⚠️.then()은 체인으로 연결 가능 이전 .then()에서 return한 값이 다음 .then()의 파라미터로 전달됨

⚠️ .catch()는 체인 중간에 발생한 에러도 잡을 수 있음 .then() 여러 개를 연결하고 맨 마지막에 .catch() 하나만 써도 됨

 

3. async / await

• Promise 기반의 비동기 코드를 동기처럼 읽기 쉽게 작성하기 위한 키워드 (ES8)

 

1) async

• 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환
• 함수 안에서 await 사용 가능하게 해줌

async function sayHello() {
    return "안녕하세요";
}

sayHello().then(msg => console.log(msg)); // "안녕하세요"

 

2) await

• Promise가 처리될 때까지 기다렸다가 결과 반환
• 반드시 async 함수 안에서만 사용 가능

// then/catch 방식
fetch("<https://api.com/data>")
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));

// async/await 방식 ✅ (더 읽기 쉬움)
async function fetchData() {
    try {
        const res = await fetch("<https://api.com/data>"); // 기다림
        const data = await res.json();                   // 기다림
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

⚠️ await는 async 함수 안에서만 사용 가능 에러 처리는 try/catch로 감싸는 것이 권장됨