비동기 (Asynchronous)

Sinf·2021년 12월 3일
0

javascript

목록 보기
10/10
post-thumbnail

비동기

자바스크립트를 공부하면 비동기라는 익숙하지 않은 단어를 마주한다. 다른 언어에서 흔히 들을 수 없었던 이 단어는 무슨 뜻일까?

동기와 비동기

비동기의 국어사전적 의미는 앞에서 행하여진 사상이나 연산이 완료되었다는 신호를 받고 비로소 특정한 사상이나 연산이 시작되는 방식을 뜻한다.

잘 모르겠다.

위키피디아 영영사전에서의 비동기(asynchronous)의 의미는 (computing, communication) Having many actions occurring at a time, in any order, without waiting for each other로 소개되어있다.

한번에 발생하는 많은 행동들이 있을 때, 서로를 기다리지 않고 수행한다.

내가 이해한 동기와 비동기

동기

Client의 요청 후 Server는 요청에 대한 응답을 생성해 응답한다. 이 때, 응답까지 Client는 다른 동작 없이 대기한다.

동기적인 경우 요청 후 응답까지 대기시간이 존재한다.
한가지 요청과 응답이 수행된 이후에 다음 요청과 응답이 수행된다.

비동기

사전적 정의와 같이 비동기적인 경우 요청 이후 응답을 기다리지 않고 다음 요청을 보낸다.

요청과 요청 사이에 기다림이 적다.

웹사이트의 로딩같은 경우 모든 파일을 불러와 로딩하면 기다리는 시간이 많아진다. 요청을 분리해 여러 요청을 보내고 응답이 오는대로 화면을 구성한다면 기다리는 시간이 줄어드는 것 같은 느낌을 줄 수 있다.

아니 잠깐?

코드를 작성하다보면, 특정 코드의 실행 결과가 다음 코드에서 사용되는 경우가 있다. 만약, 비동기적으로 실행되는 A, B 코드가 존재할 때, B에서 A의 결과가 필요하다. 다른 언어에서 고민할 이유 없던 고민을 하게 되었다.

function A() {
  // 0초 후 10을 리턴, 비동기적 처리
  setTimeout(()=> {
    return 10;
  }, 0)
}

function B(num) {
  // num이라는 값을 받아와 0초 후 출력, 비동기적 처리
  setTimeout(() => {
    console.log(num);
  }, 0)
}

// 원하는 것은 10을 출력하는 것
var number = A();
B(number); // undefined

나열된 코드로 실행하게 되면, B는 A의 결과를 기다리지 않고, 실행된다. 그렇다면 B에서는 A의 결과 없이 진행되고, 정상적으로 동작하지 못한다. (아마 A의 결과에 대해 undefined라는 값으로 처리하게 될 것.)

우리는 A를 수행한 이후 B를 수행하고 싶다.
그 때, 콜백함수를 사용한다.

콜백함수 (Callback)

자바스크립트의 함수는 일급 객체임을 기억하자.
변수에 저장할 수 있고, 반환할 수 있고, 파라미터로 전달할 수 있다.

함수를 특정 함수의 파라미터로 전달해 함수를 호출한다.

function A(callback) {
  setTimeout(()=> {
    callback(10);
  }, 0)
}

function B(num) {
  setTimeout(() => {
    console.log(num);
  }, 0)
}

A(B); // 10

아마 이러한 코드를 짤 일은 없겠지만, A는 콜백함수를 파라미터로 받는다. 그리고 결과 값을 콜백함수에 전달한다.

결과, undefined가 아니라 원래 의도한 대로 10을 출력할 수 있다.

꼭 값을 전달하지 않더라도 특정 코드 이후에 실행되어야 할 코드를 콜백으로 전달할 수 있다.

다음엔?

자바스크립트에서 비동기를 처리하는 콜백함수를 봤다.
아마 콜백함수를 들어본다면 콜백 지옥에 대해서도 들을 것이다.

흔히 보는 짤

Promise와 async/await으로 탈출해보자.


참고

profile
주니어 개발자입니다. 🚀

0개의 댓글