동기와 비동기, callback 함수

동기(Synchronous)와 비동기(Asynchronous)

동기 : 순차적으로 작업을 처리하는, 하나의 처리가 끝나야 다음을 처리하는 형태
비동기 : 하나의 처리가 끝나기 전에 다른 처리를 할 수 있는 상태로, 즉 우리가 볼때는 두개의 처리가 동시에 되는 것처럼 느낄 수 있다.

이 둘을 비교하는 대표적 예시는 은행창구!

비동기는 업무별로, 작업 상황별로 창구가 나눠져있어 업무가 이루어지고,
동기는 그런 것 없이 모두 동일하게 순차적으로 작업을 처리한다.

동기/비동기를 고려해봐야 하는 이유는

1. 시간이 오래 걸리는 작업의 경우, 작업을 순차적으로 처리하게 되면 뒤의 작업이 오래 기다려야하는 상황이 올수도 있으며,
2. 동일한 자원을 사용하지 않는 작업을 순서대로 처리하게 되면 자원의 낭비가 발생하게 된다.

를 생각해볼 수 있다.

 

여러 상황에 맞게 액션을 동기/비동기로 처리해야할지 고민이 필요하다.

비동기 처리

지금 배우고있는 JavaSciprt 기준으로 설명해야겠다.

기본적으로 JavaScript는 동기 처리를 하지만, 사용자에 직접, 실시간 서비스하려면 비동기처리는 필수적이다.
이때 도와주는 Web API에 DOM(Document Object Model), AJAX, timeout 등이 있다.

출처 : https://ljtaek2.tistory.com/142

DOM

<div id="content"></div>

let content = document.getElementById("content");

AJAX

간단히 하면 비동기적으로 데이터를 주고받기 위해 사용되는 API
주로 사용되는 메서드

1. open(요청 방식, 요청 URL, 비동기 전송 여부) : 연결 요청 준비
2. send(데이터) : 요청 전송
3. setRequestHeader(인자, 값) : 같이 보낼 header 설정하는 것으로, 인증(로그인) 측면에서 중요하다.
4. abort() : 요청 취소

JSON 데이터를 요청해 받아오는 과정

let request = new XMLHttpRequest();
request.open("GET", "data.json");
request.send(보내고자 하는 데이터, 없으면 '');

let result = JSON.parse(request.responseText);
// result에 요청한 JSON 형식의 데이터

Timeout

setTimeOut(() => {
    // 여기 오는 작업은 비동기식으로 처리가 된다.
});

callback function

위와 같이 비동기식 처리를 한 후, 이어서 바로 호출되는 함수
즉, 상태 변화가 생기면 호출되는 함수이다.
비동기 처리는 언제 작업이 종료될지 알 수 없기에, 작업이 종료되면 다른 작업을 수행할 수 있도록 callback 함수를 등록할 수 있도록 한다.

window.addEventListener("load", (e) => {
  // 여기에 올 코드가 callback 함수
  // load ; 브라우저가 HTML에 있는 내용을 모두 먼저 읽고 메모리에 적재하면 callback 함수 호출
});

실습해본 코드는 github에 있다.