자바스크립트 비동기 처리 다루기 (Asynchronous call)

 

 

왜 비동기 처리가 필요한가?

 

자바스크립트 코드가 작성된 순서대로 실행되어야 하는 경우가 있고 그렇지 않은 경우가 있다.

예를 들어, 서버에 데이터를 요청한 후에 데이터가 포함된 화면을 출력하는 코드가 있다고 하자.

그런데 어떠한 문제가 발생하여 데이터를 불러오는데 오랜 시간이 걸리게 되면

데이터를 불러오는 코드에서 작업이 멈추게 되고 그 다음에 작성된 코드는 실행조차 되지 않는다.

 

이와 같이 모든 코드가 작성된 순서대로, 즉 동기적으로 처리된다면?

아마 웹 애플리케이션을 실행하는데는 수십 분이 소요될 것이다.

 

이럴 때 필요한 것이 코드가 작성된 순서대로 실행되지 않고,

특정 작업의 처리가 끝날 때 까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.

 

 

 

 

비동기 처리 Asynchronous call

 

자바스크립트는 기본적으로 코드를 동기적으로 처리한다.

즉, 작성된 순서대로 위에서 아래로 코드를 실행한다는 것이다.

하지만 모든 작업으로 동기적으로 처리한다면 하나의 작업이 끝날 때까지 기다리는 동안 

웹 애플리케이션은 중지된 상태가 되어버리고, 하나의 작업이 끝나야 비로소 그 다음 작업을 할 수 있다.

이렇게 되면 작업을 처리하는데 굉장히 많은 시간이 소요되고 웹 애플리케이션을 실행하는데 어려움이 있을 것이다.

 

그래서 자바스크립트는 작성된 코드들을 순서대로 처리하는 것이 아니라

비동기적으로 처리할 수 있도록 방법을 마련해줬다.

비동기 처리를 하면 흐름이 멈추지 않고 하나의 작업을 기다리는 동시에 다른 함수도 호출하여 작업을 진행할 수 있다.

예를 들어 데이터를 요청하는 과정이 조금 오래 걸린다 싶으면, 다른 화면을 미리 출력해놓을 수 있다.

 

즉, 자바스크립트 비동기 처리란 특정한 코드의 연산이 끝날 때 까지 기다리지 않고 다음 코드를 먼저 실행하는 것이다.

 

비동기 처리의 예시로는  setTimeout(), setInterval(), clearInterval() 과 같은 web API 가 있다.

▶ 참고: https://xiubindev.tistory.com/43

 

 

function asyncWork(callback) {
  setTimeout(() => {
    console.log('3초 후 이 작업을 실행해요');
    callback();
  }, 3000);
}

console.log('작업을 시작해요');
asyncWork(() => {
  console.log('작업이 끝났어요')
});
console.log('다음 작업을 시작해요');

 

위 코드는 비동기 처리를 보여주는 예시이다.

코드가 작성된 순서와 상관 없이 비동기적으로 처리가 되고 있다.

콘솔은 아래와 같이 찍힐 것이다.

 

작업을 시작해요
다음 작업을 시작해요
3초 후 이 작업을 실행해요
작업이 끝났어요

 

 

---

 

 

비동기 처리가 필요한 작업

 

1. Ajax Web API 요청

2. 파일 읽기

3. 암호화, 복호화

4. 작업 예약

 

 

비동기 작업을 처리할 때는 콜백함수, Promise, async/await 등을 사용하게 된다.

 

 

 

 

참고

• MDN
• CAPTAIN PANGYO_Post