동기/비동기, 콜백함수

1. 동기/비동기

• 필자가 자바스크립트의 문법에 대해 깊이있게 공부하려고 한 이유 중 하나가 바로 동기/비동기이다. Node Js를 통해 무언가를 만드는 과정에서 외부 코드를 읽으면 항상 async, await, then 등을 보았다. 이것들이 도대체 왜 쓰이는 가를 찾아보면 자바스크립트의 실행 과정에 있어서 동기와 비동기가 결합되어 있고, 일반적인 프로그래밍 언어와는 조금 다른 양상을 보인다는 것이다. 그렇다면 동기라는 건 과연 무엇일까? 비동기는 동기의 반댓말이니 동기의 뜻만 알면 될 것 같다.
• 파이썬이나 자바 등 우리가 평상 시 작성하는 코드는 위에서 부터 순차적으로 실행된다. 자바스크립트 또한 마찬가지로 위에서 부터 순서대로 한 줄씩 읽어가면서 코드가 실행된다. 즉, 자바스크립트는 동기식 처리이다. 동기란 말 그대로 순차적으로 실행된다는 뜻인데, 사전적 의미로는 동시, 동시에 일어나는 의미를 지닌다. 순서대로 실행되는 것인데 동시적이다? 머릿 속에서 모순이 발생한다. 그래서 이에 대한 해답을 찾고자 검색을 해보았고 다행히 좋은 글을 찾을 수 있었다.

https://evan-moon.github.io/2019/09/19/sync-async-blocking-non-blocking/

동기(Synchronous)는 정확히 무엇을 의미하는걸까?

• 이 게시글의 내용을 잠시 빌려 요약하자면, 동기란 어느 작업의 응답이 끝난 동시에, 다음 작업의 요청을 처리한다는 뜻으로 순차적으로 실행된다는 뜻이다. (위 게시글에 동기라는 단어에 대한 뉘앙스, 사전적 의미 등 자세한 내용이 담겨있습니다.)
• 언어라는 것은 쓰이는 곳에 따라 의미와 뉘앙스가 달라지기 때문에 프로그래밍 분야에서의 동기는 순차적으로 실행된다는 뜻으로 받아들이면 될 것 같다. (동기적이다, synchronous)

그렇다면 비동기적인(Asynchronous) 처리는 무엇일까? 동기적이지 않다는 뜻으로, 코드가 순차적으로 실행되지 않는다는 것이다. 한 줄이 실행되고 끝남과 동시에 다음 줄이 실행되는 것이 아니다. 첫 번째 줄이 실행되고, 두 번째 줄이 실행되는 것이 아니라 세 번째 줄이 먼저 실행될 수 있다는 뜻이다.

console.log(1);
setTimeout(()=>{ console.log(2) }, 1000);
console.log(3);

• 콘솔 창에 1이 출력되고, 1초가 지난 뒤 2가 출력되고 마지막으로 3이 출력되는 것을 원한다.
• 하지만 실제 출력 순서는 1->3->(1초 뒤)2 이렇게 된다. 이유는 setTimeout 함수가 비동기적으로 처리되기 때문에 우리가 원하던 동기적인 출력이 되지 않는다.
• setTimeout, addEventListener, ajax() 등등은 실행 즉시 바로 실행되지 않는다. 몇 초 뒤에 실행되거나, 어떤 버튼을 눌러야 실행되거나, 요청이 정상적으로 처리 됐을 때 실행이 된다. 만약 이러한 것들이 동기적으로 처리한다면 그 밑에 있는 코드들의 처리 속도에 지장이 생긴다. 자바스크립트는 기본적인 런타임 환경이 웹 브라우저이다. 최대한 사용자로 하여금 빠른 화면을 보여주어야 하기에 처리 속도가 빠른 것부터 해치우고 오래 걸리는 것을 나중에 처리하는 것이다. (제일 만만한 걸 먼저 해 버림)
  • 비동기 처리 메서드가 실행되지만, 안에 있는 콜백함수의 경우는 바로 실행되지 않는다. 실행 조건이 되는 도중에 이미 다음 코드가 실행이 되며, 실행 조건을 만족하였을 때 콜백함수 안에 있는 코드들이 실행이 된다.
• 따라서 브라우저는 위 함수들처럼 오래 걸리는 것들을 Web API라는 곳으로 따로 빼놓는다. 그리고 코드가 실행될 타이밍이 됐을 때(이벤트 리스너의 경우, 버튼을 눌렀을 때) 비로소 실행하게 된다. 따라서 위 예제 코드의 경우 2는 맨 마지막에 실행이 되는 것이다.

2. 콜백 함수

• 따라서 무언가를 순차적으로 실행하기 위해서 ( 특정 작업이 끝난 뒤 다음 순서로 실행시키는 것 ) 자바스크립트에 있는 특수한 기능 중 하나인 콜백 함수를 사용한다.

function 첫째함수(){
	console.log(1);
    }
    
function 둘째함수(){
	console.log(2);
    }
첫째함수();
둘째함수();

• 위의 경우, 첫째함수와 둘째함수가 순차적으로(동기적) 실행될까? 위처럼 단순히 값을 출력하는 경우라면 문제가 없겠지만, 앞서 설명한 Web API를 사용하는 함수들을 사용한다면 얘기가 달라질 것이다. 즉, 첫째함수가 실행이 오래 걸린다면, 브라우저는 둘째함수를 먼저 실행시킬 수도 있다.

function 첫째함수(콜백함수){
	console.log(1);
    콜백함수();
}

function 둘째함수(){
	console.log(2);
}

첫째함수(둘째함수); // 첫째함수를 실행시키고 둘째함수를 실행시킨다.
첫째함수(function(){
	console.log(2);
}); // 일반적인 콜백함수 사용 법

• 다음과 같이 함수 안에서 또 다른 함수를 실행시키는 방법을 사용한다면 순차적으로 실행할 수 있다.
• 이 때 콜백함수를 사용하는 방식은 동기,비동기와는 관련이 없으며 그저 함수를 사용하는 디자인 패턴 중 하나이다.
  • 단순히 콜백함수를 사용했다고 해서 동기적으로 처리되는 것은 아니다. 콜백함수 안에 오래 걸리는 함수가 또 있다면 실행순서가 바뀔 수 있다.

 

 

자료출처 : https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!