[javascript] 비동기

비동기 프로그래밍이란 실행 시간이 오래 걸리는 함수를 실행할 때, 해당 함수의 작업이 종료되는것을 기다리지 않게 하는 기술이다.

자바스크립트에서는 일부 함수, 예를 들어,

• fetch(). 다른 서버에 HTTP 요청을 보냄.
• getUserMedia(). 사용자의 미디어에 접근(권한 요청 필요)
• setTimeOut(). 지정한 시간만큼 대기

처럼 시간이 오래 걸리는 동작이 있기 때문에, 이 때 비동기 프로그래밍이 유용하게 사용될 수 있다.

비동기함수

비동기함수 setTimeout()은 인자로 숫자 하나를 받으며, 해당 수 ms만큼 작업을 지연시킨다.

console.log("프로그램 실행")
// 이 함수의 첫 번째 인자로 들어가는 빈 함수는 '콜백'이라고 하는데, 이에 대해서는 후술.
setTimeout(() => {}, 3000) // 3000ms = 3초
console.log("프로그램 종료")

그러나 이를 실행해보면 첫 번째 출력과 두 번째 출력 사이에 3초간의 지연이 생기지 않음을 확인할 수 있다.

자바스크립트에선 기본적으로 비동기 함수가 종료될 때 까지 기다리지 않기 때문인데, 이를 통해 비동기 함수가 실행되는 동안 여러 작업이 가능하다.

그렇다면 비동기함수의 종료까지 대기해야 할 경우는 어떻게 처리할까?

콜백

자바스크립트에선 어떤 함수의 인자로 함수를 전달하는 것이 허용된다.

function A(func) {
	console.log("결과: ", func(1, 2))
}

function B(n, m) {
	return n + m
}

A(B)

이경우 B함수는 A함수의 '콜백'이라고 부르며, 함수의 실행 시점을 프로그래머의 의도에 맞게 조정할 수 있다.

비동기함수는 대체로 해당 함수가 종료된 시점에 실행될 콜백 함수를 인자로 전달받을 수 있다.

setTimeout() 예제의 경우는 3초 대기 후 결과를 출력하려면,

console.log("프로그램 실행")
setTimeout(() => {
	console.log("프로그램 종료")
}, 3000) // 3000ms = 3초

이런 식으로 콜백함수로 출력문을 실행하는 함수를 등록하여야 한다.(출력함수를 그대로 등록하는것이 아님에 유의)

Promise

두 번째로, 콜백 함수를 사용하지 않고 작업이 완료된 후 실행할 작업을 Promise 기반 방식으로 작성할 수 있다.

비동기함수는 실행시 결과를 바로 반환하지 않는 대신 작업 상태를 표현한 객체, Promise형을 반환한다.

이 Promise는 현재 작업 상황에 관한 세 가지 상태를 가진다.

• PENDING(작업 대기)
• REJECT(작업 실패)
• RESOLVE(작업 성공)

그리고 이 Promise 객체는 정적메서드 .then()와 .catch() .finally()를 구현하는데, 콜백 함수를 인자로 받아 각각 작업이 성공했을 때, 실패했을 때, 작업이 끝났을 때 실행한다.

예를들어, 파일을 읽어오는 fs 모듈의 readFile이란 함수의 경우,

fs.readFile(filename)
  .then((content) => {
    // 파일을 읽을 때 수행할 작업
    console.log(content);
  })
  .catch((err) => {
    throw err;
  });

이와 같이 사용할 수 있다.

내부적으론 다음과 같이 구현된다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const isSuccess = true;
  if (isSuccess) {
    resolve("성공");  // 성공적으로 작업 완료 시 호출
  } else {
    reject("실패");  // 작업 실패 시 호출
  }
});

Async/Await

마지막으로, 가장 최신 문법이자 사용하기 간편한 방법이다.

비동기 함수를 사용하는 어떤 함수 앞에 async 키워드를 붙이고, 해당 비동기 함수 앞에 await 키워드를 붙이면 해당 비동기함수가 종료될 때 까지 기다리며, 동기함수처럼 실행된다.

const fs = require('fs').promises;

async function readFile(filename) {
  const content = await fs.readFile(filename);
  console.log(content.toString());
}

readFile('./text.txt')