동기(Syncronous)와 비동기(Asynchronous) 처리, 그리고 Callback

 

동기(Syncronous)와 비동기(Asynchronous)

 

링크 참고 : https://poiemaweb.com/js-async

Asynchronous processing model | PoiemaWeb

 

 

동기(Syncronous)와 비동기(Asynchronous) 예시와 Callback 함수

 

링크 참고 : https://blog.naver.com/webdeveloping/222197193276

[Javascript] 동기/비동기 처리와 callback

 

핵심

 

JavaScript의 DOM 이벤트와 타이머 함수, Ajax 요청은 비동기(Asynchronous) 처리 모델로 동작한다는 점을 잊지 말자.

 

일전에 Spring 프레임웍 내부에서 코드를 짜던 중, Sheet 내부의 데이터를 가져와 특정 값이 'A'(예시)인 값의 일부 데이터를 변경하는 작업이 있었다. 순차적으로 순서도를 떠올리며 코딩을 작성했는데, 이상하게도 계속해서 Sheet 내부의 row 갯수를 세는 것에 실패했다. 1000 여개 이상의 row가 세어저야 할 것을, 아무리 count를 진행해도 0이 출력됐다. 놓친 점이 무엇인지 파악해보니, Sheet 내부의 각각의 row를 불러오는데 Ajax요청을 통해 진행했다. 한 마디로 비동기(Asynchronous) 처리 모델로 동작했기 때문에 내가 생각했던 동기(Syncronous) 모델, 즉, 순차적 처리 모델과는 다른 상황이 발생했다. 비동기 처리 모델(Ajax)로 Sheet를 불러왔기 때문에, Sheet를 불러온 뒤 내 생각대로 바로 다음에 작성한 row를 세는 함수가 순차적으로 진행되지 못했다.

 

 

동기(Syncronous)와 비동기(Asynchronous) 요약

 

동기는 직렬형 작업 처리 모델입니다. 작업은 순차적으로 시행되며 하나의 작업이 끝나기까지 다음 작업은 대기하게 됩니다. 예를 들어 DB에 SQL문을 날려서 데이터를 받아올 때에는 데이터를 받아오기까지 다른 작업들은 수행되지 않습니다.

 

비동기는 병렬형 작업 처리 모델입니다. 작업이 종료되지 않은 상태라도 대기하지 않고 다음 작업을 수행합니다. 예를 들어 JavaScript의 DOM 이벤트와 타이머 함수, Ajax 요청은 비동기 처리 모델로 동작합니다.

 

(출처 : 고슴도치개발자님의 14.동기 / 비동기 설명)

 

 

Callback 함수 요약

 

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 말합니다.

콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있습니다.

 

function callbackTest(t) { // 콜백함수
    t();
}

function callbackSentence() {
    console.log('콜백함수를 호출 중');
}

console.log('---- 콜백 함수 호출 전 ----');

callbackTest(callbackSentence);

console.log('---- 콜백 함수 호출 후 ----');

undefined는 Chrome console에서 작성하느라 발생한 단어이니 신경쓰지 말자.

위의 코드는 동기적으로 처리되는 코드(=순차적으로 진행)입니다.

즉, 일반 콜백 함수의 경우 비동기가 아닌 동기적으로 작동하게 됩니다.

반대로 비동기 콜백 함수를 사용하는 경우는 다음과 같습니다.

 

console.log('---- 콜백 함수 호출 전 ----');

setTimeout(print, 3000);

console.log('---- 콜백 함수 호출 후----');

function print() {
    console.log('출력합니다.');
}

undefined는 Chrome console에서 작성해서 발생한 단어이므로, 신경쓰지 말자.

 

(출처 : 새콤하고달콤님의 자바스크립트(JavaScript) 콜백 함수(callback function)와 사용 이유)