🗂️ 동기 / 비동기 처리

동기(Synchronous) 처리

요청한 작업이 순서대로 차례차례 실행되는 방식이다.
위에서 아래로 코드 실행한다.
느린 작업이 있으면 전체 흐름을 멈춘다.

console.log("1");
console.log("2");
console.log("3");

출력결과:

1  
2  
3

비동기(Asynchronous) 처리

요청한 작업이 바로 실행되지 않고, 기다리지 않고 다음 작업으로 넘어가는 방식이다.
특정 작업이 완료되기를 기달리지 않고, 다른 작업을 먼저 수행할 수 있다.
예) 웹에서의 데이터 요청/응답, 타이머, 이벤트 처리

console.log("1");

setTimeout(() => {
  console.log("2");
}, 1000); // 1초 후 실행

console.log("3");

출력결과:

1  
3  
2  ← 1초 뒤에 실행됨

비동기 처리 필요한 이유?

👉 사용자 경험이 매우 중요한 웹에서는 비동기로 처리하여 웹페이지를 멈추지 않게 해야한다!

비동기 처리 방법

방법	설명	예시
콜백 함수	완료되면 호출될 함수 전달	setTimeout(fn, 1000)
Promise	비동기 결과를 객체로 다룸	fetch().then(...)
async/await	비동기 코드를 동기처럼 작성	await axios.get(...)

📌 콜백 함수

함수에 "작업이 끝나면 실행할 다른 함수"를 인자로 전달하는 방식

// 1초 뒤에 실행될 콜백 함수를 전달
console.log("1");

setTimeout(() => {
  // 이 부분은 1초가 지나야 실행됨
  console.log("2 (1초 후 실행됨)");
}, 1000);

console.log("3");
// 1 → 3 → (1초 뒤) → 2 순서로 출력됨

✅ 장점
간단한 비동기 작업에 유용

❌ 단점
콜백 안에 콜백이 또 들어가면 콜백 지옥이 발생

doSomething(() => {
  doNext(() => {
    doMore(() => {
      console.log("콜백 지옥...");
    });
  });
});

📌 Promise

비동기 작업의 성공(resolve) 또는 실패(reject)를 담는 객체 .then()과 .catch()로 결과 처리

// fetch는 Promise를 반환함
fetch("https://jsonplaceholder.typicode.com/users")
  .then((res) => {
    // 서버 응답(res)을 JSON 데이터로 파싱
    return res.json();
  })
  .then((data) => {
    // 파싱된 데이터 출력
    console.log("성공:", data);
  })
  .catch((err) => {
    // 에러 발생 시 실행
    console.error("에러 발생:", err);
  });

✅ 장점
콜백보다 가독성이 좋음
.then() 체인으로 처리 순서를 제어 가능

❌ 단점
.then().then().catch() 체인이 길어지면 여전히 복잡

📌 async / await

Promise를 동기처럼 보이게 쓰는 문법
async 함수 안에서만 await 사용 가능

// async 키워드를 붙이면 이 함수 안에서 await 사용 가능
async function loadUser() {
  try {
    // fetch가 끝날 때까지 기다림 (await)
    const res = await fetch("https://jsonplaceholder.typicode.com/users");

    // 응답을 JSON으로 변환할 때까지 기다림
    const data = await res.json();

    // 최종 데이터 출력
    console.log("유저 데이터:", data);
  } catch (error) {
    // 중간에 에러가 발생하면 이 블록이 실행됨
    console.error("에러 발생:", error);
  }
}

// 위에서 정의한 함수 실행
loadUser();

✅ 장점
가독성 최고 (동기처럼 작성 가능)
try-catch로 에러 처리 간편

❌ 단점
async 함수 안에서만 await 사용 가능
병렬 처리(여러 작업 동시에)는 별도 처리 필요