자바스크립트: 비동기 프로그래밍

 

 

 

안녕하세요 오늘은 자바스크립트의 비동기 프로그래밍에 대해서 알아보겠습니다.

 

자바스크립트는 싱글 스레드 언어이기 때문에, 비동기 프로그래밍을 통해 긴 작업을 백그라운드에서 처리하고,

 

그 완료 시점에 대한 알림을 받아 다음 작업을 진행 할 수 있습니다.

 

 

 

 

 

1. 콜백함수:

 

콜백함수는 다른 코드에 인수로 전달되는 함수입니다. 

 

이를 통해 해당 코드 내부에서 콜백함수를 필요한 시점에 호출 할 수 있습니다.

 

비동기 작업에서 콜백은 일반적으로 작업 완료 후 실행 되도록 예약됩니다.

 

function doSomethingAsync(callback) {
  setTimeout(function() {
    // 비동기 작업
    const result = 'Hello, world!';
    callback(result);
  }, 1000);
}

doSomethingAsync(function(result) {
  console.log(result); // "Hello, world!"
});

 

 

 

 

2. Promise:

 

Promise는 비동기 연산의 최종 완료 또는 실패를 나타내는 객체입니다. Promise가 성공적으로 해결되면 (flufilled),

 

그 결과 값을 사용하여 then 메서드 내의 콜백을 호출합니다.

 

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    const result = 'Hello, world!';
    resolve(result); // 성공적으로 해결된 경우
    // or 
    // reject('Error!'); // 실패한 경우
  }, 1000);
});

promise.then(function(result) {
  console.log(result); // "Hello, world!"
}).catch(function(error) {
   console.error(error);
});

 

 

 

 

 

3. async/await:

 

async/await 패턴은 Promise 기반의 비동기 코드를 동기식 방식처럼 보이게 만들어 줍니다.

 

async 키워드: 이 키워드가 붙은 함수는 항상 promise를 반환합니다.

 

await 키워드: async 함수 내부에서만 사용 가능하며,

promise의 결과값을 반환하기 위해 해당 promise가 해결될 때까지

실행을 일시 중지합니다.

 

async function doSomethingAsync() {
   const result = await new Promise((resolve, reject) => { 
       setTimeout(() => resolve('Hello, World!'), 1000)
   });
   console.log(result); //"Hello World"
}

doSomethingAsync();

위 예제에서 doSomethingAsync함수 내부의 코드 실행은 await 부분에서 일시 중지되었다가, Promise가 해결되면 다시 실행됩니다. 이를 통해 비동기 코드를 마치 동기 코드처럼 작성할 수 있습니다.

이 세 가지 패턴은 모두 비동기 작업을 처리하는 방법입니다. 각 패턴은 특정 상황에 따라 적합하게 사용될 수 있으며, 복잡한 비동기 로직을 보다 명확하고 관리하기 쉽게 만들어 줍니다.

 

다음에는 자바스크립트를 이용한 다양한 예제를 만들어보겠습니다. 

 

감사합니다.