콜백함수(callback function)

문태주·2022년 7월 23일
0
post-thumbnail

이론 내용을 최대한 제하고 가려고 해도 쉽지가 않네요. 어려운 이론의 내용은 웬만하면 다루지 않으려고 하는데, 그만큼 이 비동기&개념이 중요합니다. 이번 시간에는 동기함수와 비동기함수를 설명해보겠습니다.

| 동기와 비동기

여러분이 빨래를 돌린다고 가정을 해봅시다. 세탁기에 세탁물을 넣고 세탁기가 완료된 후까지 기다렸다가, 건조기에 다시 돌려야 겠죠?

일단 세탁기를 돌리면 세탁이 완료될 때까지 세탁기 앞에 앉아서 기다린다고 생각해 봅시다. 엄청나게 비효율적이겠죠? 이것이 동기의 방식입니다.

반면 비동기의 방식대로 빨래를 한다면 세탁을 할 동안 게임이나 공부를 하다가 빨래가 끝나면 빨래를 다시 건조기에 넣을 수 있습니다. 훨씬 효율적이겠죠?

프로그래밍에서의 동기 방식을 코드를 한줄씩 한줄씩 순서대로 읽는 것입니다.

빨래 돌리기 //A
NodeJs 강의듣기 //B

위의 예시에서는 실행되는데 엄청 오래 걸리는 A코드를 다 실행하고 나서야 B 코드를 실행하는 것이죠.

반면 비동기프로그래밍에서는 무조건 코드를 한줄한줄 읽어내지 않습니다. 오래 걸릴 것 같은 코드(함수 등)를 따로 표시해두면 해당 코드는 백그라운드에 맡겨두고 계속해서 아래의 코드를 읽습니다.

(빨래 돌리기, 빨래 꺼내서 건조기 돌리기) //A
NodeJs 강의듣기 //B

위의 예시에서는 A코드를 만나면 A코드의 작업(빨래 돌리기)을 백그라운드에 맡기고, 계속해서 B코드를 실행합니다. 만약 A코드의 빨래 돌리기 작업이 끝나면, 미리 예약해둔 건조기 돌리기 작업을 실행합니다. 이를 Javascript에서는 콜백함수(callback function)이라고 부릅니다.

| 콜백함수(callback)

function 빨래(){
	빨래돌리기(), function(){ 건조기 돌리기() }
}
빨래();
console.log("노드 JS강의 듣기");

바로 위의 예시가 callback함수입니다. 빨래라는 이름으로 정의된 callback함수를 살펴봅시다. 함수의 {}에 구문이 2개가 옵니다.

편의상 {a,b}라고 하면 a는 정말 빨래를 하는 함수의 일반적인 로직이 들어있는 부분이고, b에는 새로운 함수가 정의됩니다. 그리고 이 b라는 함수는 a가 모두 끝났을 때 비로소 시행됩니다.

위 코드를 실행해보면, 우리는(인터프리터는) 먼저 빨래라는 함수를 만납니다.

빨래 돌리기는 오래 걸리는 작업이기 때문에 백그라운드로 일단 제쳐두고 그 아래의 코드인 console.log("노드 JS강의 듣기")를 실행합니다.

그리고 빨래돌리기()가 작업을 끝나면 그다음 함수, 즉 건조기를 돌리는 로직을 실행합니다.

| NodeJs와 callback함수

NodeJs에서 기본적으로 제공되는 모듈(fs, http 등 <- 따로 npm install 안해도 require할 수 있는 것들)에 딸려있는 함수들은 모두 callback함수를 통해서 비동기처리를 합니다. 그럼으로 callback 함수를 아는 것은 NodeJs 개발에 있어 필수적입니다.

| callback함수의 치명적인 결점

사실 callback함수에는 치명적인 결점이 있습니다.

세탁이 끝나면 건조기를 돌리고, 건조기가 끝나면 빨래를 개고, 빨래를 개면 빨래를 옷장에 넣는 로직을 작성한다고 가정해 봅시다. 그럼 아래와 같이 코드를 짤 수 있습니다.

function 빨래(){
	세탁(), function(){
    	건조(), function(){
        	빨래개기(), function(){
            	옷장에넣기()
            }
        }
    }
}

네, 아찔합니다. 가독성이 매우 떨어지죠? 사실 4가지 작업이 아닌 더 많은 작업이 다음과 같이 이루어질 수 있습니다. 이걸 우리는 callback hell(콜백헬)이라고 부릅니다.

인터넷에 콜백헬을 검색해 보시면 더욱 아찔한 예제들을 보실 수 있습니다.

이를 해결하기 위해 나온 새로운 es5, es6 문법으로 Promise와, async&await가 있습니다. 고로 다음 장에서는 Promise와 async&await를 배워보겠습니다.

TMI로 async&await에서 async는 asynchronus function, 즉 비동기 함수를 가리킵니다. 반면 동기 함수는 synchronus function이라고 불립니다.

profile
HTML 개발자

0개의 댓글