[이론내용 정리]

---

Promise

const promise = new Promise((resolve, reject) => {
    // 성공: resolve(data)
    // 실패: reject(error)
});

• resolve → 성공 상태로 변경
• reject → 실패 상태로 변경

Promise의 3가지 상태

1. 대기 (Pending)
   → 아직 작업이 완료되지 않은 상태

2. 성공 (Fulfilled)
   → resolve()가 호출된 상태

3. 실패 (Rejected)
   → reject()가 호출된 상태

---

기본 사용 문법

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

    if (성공조건) {
        resolve("성공 결과");
    } else {
        reject("에러 메시지");
    }

});

promise
    .then((result) => {       // 성공 시 실행
        console.log("성공:", result);
    })
    .catch((error) => {       // 실패 시 실행
        console.error("실패:", error);
    });

Promise 예제 (대기 상태)

const promise = new Promise(() => {
    setTimeout(() => {
        console.log("hi");
    }, 3000);
});

console.log(promise);

resolve나 reject를 호출하지 않았기 때문에
→ 상태는 계속 Pending

성공 상태로 변경

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("hi");
        resolve();
    }, 3000);
});

setTimeout(() => {
    console.log(promise);
}, 3000);

PromiseResult가 undefined인 이유
→ resolve에 전달한 값이 없기 때문

resolve에 값 전달

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("hi");
        resolve("hello");
    }, 3000);
});

resolve("hello") → PromiseResult는 "hello"

reject 예제

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("hi");
        reject("reject");
    }, 3000);
});

reject 호출 시 → 상태는 Rejected

---

Async / Await

Promise를 더 깔끔하게 사용하기 위한 문법이다.

• async → 함수를 비동기 함수로 만든다
• await → Promise가 resolve될 때까지 기다린다
• await는 반드시 async 함수 내부에서만 사용 가능

기본 문법

async function 함수이름() {
    const result = await Promise객체;
    console.log(result);
}

async의 특징

async 함수는 항상 Promise를 반환한다.

async function test() {
    return {
        name: "gildong",
        id: "hong"
    };
}

console.log(test());

출력 결과는 Promise 객체

async + Promise 예제

async function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name: "gildong",
                id: "hong"
            });
        }, 2000);
    });
}

console.log(test());

async / await 실제 사용 예

async function run() {
    const result = await test();
    console.log(result);
}

run();

await는 Promise가 완료될 때까지 기다렸다가
resolve 값만 가져온다.

---

이벤트 전파 (캡처링 & 버블링)

이벤트가 발생하면 DOM 트리를 따라 전파된다.

이 과정을 이벤트 전파(Event Propagation) 라고 한다.

캡처링 단계 (Capturing Phase)

• 이벤트가 최상위 요소(document)에서 시작
• 이벤트 대상 요소까지 내려가는 단계

흐름:
document → html → body → ... → 이벤트 대상

타깃 단계 (Target Phase)

• 이벤트가 실제로 발생한 요소에서 실행되는 단계

버블링 단계 (Bubbling Phase)

• 이벤트 대상 요소에서 시작
• 부모 요소를 따라 위로 전파

흐름:
이벤트 대상 → 부모 → body → html → document

이벤트 전파 방지

stopPropagation()

이벤트가 상위 요소로 전달되는 것을 막는다.

element.addEventListener("click", function(event) {
    event.stopPropagation();
});

preventDefault()

기본 동작을 막는다.

예: 링크 클릭 시 이동 방지

element.addEventListener("click", function(event) {
    event.preventDefault();
});

---

정리

• Promise → 비동기 작업의 상태 관리
• 상태 → Pending / Fulfilled / Rejected
• then / catch → 결과 처리
• async / await → Promise를 더 간결하게 사용
• 이벤트 전파 → 캡처링 → 타깃 → 버블링
• stopPropagation → 전파 중단
• preventDefault → 기본 동작 제거

---

[실습내용 정리]

---

Promise() 함수(객체)

위의 코드는 "resolve, reject"를 받지 않은 상태이기 때문에 콘솔에서 현재 상태가 계속 pending으로 되어 있는것을 알 수 있다.

promise.then() 함수

promise.catch() 함수

.then().catch() 조합

---

Async/Await 함수

아래와 같이 호출 함수 또한 async/await 함수로 바꾸어 적어보면 시간을 기다리고 바로 결과값을 출력하는 것을 볼 수 있다.

---

버블링/캡쳐링