목차

• 비동기 프로그래밍이란?
• 콜백 함수
• Promise와 async/await
• 브라우저 이벤트 처리

비동기 프로그래밍이란?

일반적인 동기 프로그래밍은 순차적으로 작업이 실행되지만, 비동기 프로그래밍은 작업의 실행 순서와 완료 시점이 보장되지 않는다. 대부분의 웹 애플리케이션에서는 비동기 작업을 통해 서버와의 데이터 통신, 파일 읽기/쓰기, 타이머 이벤트 등을 처리한다.

콜백 함수

콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수이다. 대표적인 예시로는 setTimeout 함수가 있으며, 다음은 setTimeout 함수를 사용한 콜백 함수의 예시이다.

setTimeout(function() {
  console.log('이 메시지는 3초 후에 출력됩니다.');
}, 3000);

Promise와 async/await

Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체로, ES6에서 도입되었다. 다음은 Promise를 사용한 비동기 작업 예시이다.

function getData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (작업 성공) {
      resolve(결과);
    } else {
      reject(에러);
    }
  });
}

getData()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

async/await는 Promise를 좀 더 간결하고 가독성있게 사용할 수 있도록 하는 ES8의 기능이다. 아래는 async/await를 사용한 예제이다.

async function processData() {
  try {
    let result = await getData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

processData();

브라우저 이벤트 처리

웹 애플리케이션에서 사용자의 상호작용은 이벤트를 통해 처리된다. 자바스크립트를 사용하여 이벤트를 처리하기 위해서는 addEventListener 메서드를 주로 사용한다.

document.getElementById('myButton').addEventListener('click', function() {
  console.log('버튼이 클릭되었습니다.');
});

이렇게하여 비동기 프로그래밍의 이해와 브라우저 이벤트 처리에 대해 알아보았습니다. 더 자세한 내용을 학습하고 싶다면 MDN 웹 문서(https://developer.mozilla.org/)를 참고하시기 바랍니다.