섹션 21: 고급 자바 스크립트 개념 탐색 [56일차]

---

more-advanced-javascript.pdf

132.8 kB

---

동기와 비동기, 그리고 자바스크립트 비동기 처리의 모든 것

안녕하세요! 오늘은 동기와 비동기 작업, 콜백 함수, 프로미스, 그리고 async와 await에 대해 알아보겠습니다. 이 개념들은 자바스크립트에서 매우 중요하며, 특히 웹 개발에서 자주 마주치게 됩니다. 복잡해 보일 수 있는 이 내용들을 쉽게 이해할 수 있도록 차근차근 설명해 드릴게요!

동기 VS 비동기

• 동기(Synchronous): 작업이 순차적으로 실행되며, 한 작업이 끝나야 다음 작업을 시작할 수 있습니다.
• 비동기(Asynchronous): 특정 작업이 끝나기를 기다리지 않고, 다음 작업을 바로 시작할 수 있습니다. 이는 작업의 완료 여부와 상관없이 프로그램이 계속 실행될 수 있게 해줍니다.

콜백 함수(Callback Functions)

콜백 함수는 다른 함수에 인자로 전달되는 함수입니다. 비동기 작업을 처리할 때 주로 사용되며, 작업이 끝난 후에 실행되어야 할 코드를 포함합니다.

예시:

function fetchData(callback) {
  setTimeout(() => { // 비동기 작업 예시
    callback('데이터 가져오기 성공');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 데이터 가져오기 성공
});

프로미스(Promises)와 then()

프로미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. then() 메서드를 사용하면, 프로미스가 성공(resolve)했을 때의 결과를 다룰 수 있습니다.

예시:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터 가져오기 성공');
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // 데이터 가져오기 성공
});

Callback Hell

콜백 함수를 너무 많이 중첩하게 되면 코드의 가독성이 떨어지고 관리가 어려워지는 현상을 '콜백 지옥(Callback Hell)'이라고 합니다.

Async와 Await

async와 await는 프로미스 기반의 비동기 코드를 동기적으로 보이게 작성할 수 있게 해주는 문법입니다. async 함수는 항상 프로미스를 반환하며, await는 프로미스가 처리될 때까지 함수의 실행을 일시 중지시킵니다.

예시:

async function fetchData() {
  let data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터 가져오기 성공');
    }, 1000);
  });
  console.log(data); // 데이터 가져오기 성공
}

fetchData();

동기와 비동기 작업, 콜백 함수부터 프로미스, 그리고 async와 await까지 이해하면 자바스크립트에서 비동기 코드를 효율적으로 작성하고 관리할 수 있습니다. 이 개념들을 잘 숙지하시면, 복잡한 비동기 로직도 쉽게 다룰 수 있을 거예요!