Medium - JavaScript; What the heck is a Callback?

25 Sep 2019 in Trend

Trend 파악을 Medium 기고문 요약 포스팅 - 자바스크립트: 대체 콜백이 뭘까요?; 6분안에 간단한 예제로 콜백의 기본에 대해 배우고 이해해봅시다.

Callbacks — image via unsplash

Preface

안녕하세요 저는 브랜든입니다. 저는 codeburst.io를 만들었고 초보자들에게 웹 개발의 내부적인 이해도를 높이고자 예제와 기사를 쓰고 있습니다. 만약 여러분이 정말 웹 개발에 깊게 몸을 던질 준비가 되었다면 해당 링크를 참고하세요. Best Courses for Learning Full Stack Web Development

What is a Callback?

Simply put: 콜백은 다른 함수의 실행이 끝난 뒤 실행될 예정인 함수입니다. 그래서 이름이 “콜 백”입니다.

More complexity put: 자바스크립트에서 함수들은 객체입니다. 이 때문에 함수들은 함수를 매개변수로 받을 수 있으며 다른 함수를 리턴할 수 있습니다. 이런 함수들은 higher-order functions라고 부릅니다. 함수에 매개변수로 전달되는 모든 함수는 callback 함수라고 불립니다.

매우 긴 설명이군요, 간단한 예제를 통해 좀 더 알아봅시다.

Why do we need Callbacks?

매우 중요한 이유중에 하나는 자바스크립트는 이벤트 driven 언어이기 때문입니다. 이 말은 response가 오는 것을 기다리는 것 대신에 자바스크립트는 다른 이벤트들을 listen하며 계속 실행됩니다. 기본 예제를 봅시다.

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

여러분의 짐작대로 first함수가 먼저 실행되고 second함수가 그 다음에 실행됩니다. 콘솔의 로그는 다음과 같습니다.

// 1
// 2

여기까지는 모두 좋군요.

그러나 만약 first함수가 즉시 실행될 수 없는 코드들을 포함하고 있으면 어떻게 될까요? 예를들어 응답을 기다려야만 하는 API 리퀘스트를 요청하면 어떻게 될까요? 이 상황을 재현하기 위해 우리는 setTimeout을 사용할 것입니다. 이 자바스크립트 함수는 지정된 시간이 흐른뒤에 함수를 호출합니다. 우리는 API 요청을 시뮬레이션 하기위해 500밀리초를 지연시킬 것입니다. 우리의 코드는 다음과 같습니다.

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

지금 여러분이 setTimeout()이 어떻게 동작하는지 이해하는 것은 중요하지 않습니다. 집중해야 할 것은 console.log(1);의 위치가 500밀리초 후로 옮겨졌다는 것입니다. 그럼 이 함수를 실행시키면 어떻게 될까요?

first();
second();
// 2
// 1

우리가 first함수를 먼저 호출했어도 로그를 보면 second함수 뒤에 로그가 찍힌 것을 알 수 있습니다.

이것은 자바스크립트가 우리가 원하는 순서대로 함수를 호출하지 않은 것이 아니고 자바스크립트가 first의 응답을 기다리지 않고 second를 실행한 것이기 때문입니다.

그래서 이걸 왜 보여줬을까요? 왜냐하면 여러분은 하나의 함수 다음에 또 다른 함수를 호출한다고 그 순서대로 실행되지 않기 때문입니다. 콜백을 사용하면 특정 코드가 끝나고 나서야 다른 코드가 실행되도록 보장할 수 있습니다.

Create a Callback

좋습니다. 그럼 콜백을 만들어봅시다!

먼저 크롬 개발자 콘솔을 여시고 다음의 함수 정의를 콘솔에 타이핑하세요!

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

우리는 doHomework함수를 만들었습니다. 우리의 함수는 subject 변수 하나를 받고 우리가 그것을 가지고 작업을 할 것입니다. 함수 호출부분을 콘솔에 다음과 같이 작성해주세요.

doHomework('math');
// Alerts: Starting my math homework.

이제 우리의 콜백을 추가할 차례입니다. 우리의 doHomework()함수에 마지막 매개변수로 callback을 전달할 수 있습니다. 콜백함수는 우리가 doHomework를 호출할 때 두번째 매개변수로서 정의됩니다.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

보시는 바와같이 여러분이 타이핑을 하면 두 개의 알림을 받을 것입니다. ‘starting homework’알림과 그 다음에 ‘finished homework’알림입니다.

그러나 콜백 함수는 항상 호출 시에만 정의할 필요가 없습니다. 다음과 같이 코드 어디에서나 정의할 수 있습니다.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

이 예제도 이전의 예제와 정확히 동일한 결과를 가집니다 그러나 설정 방식이 조금 다르죠.

A real world example

지난 주에 저는 38줄의 코드로 트위터 봇을 만드는 법에 대해 기사를 작성했습니다. 해당 기사의 코드가 작동하는 이유는 트위터 API 덕분입니다. 여러분이 API를 요청할 때 여러분은 해당 응답을 기다리고 난 후에야 작업이 가능합니다. 다음은 실제로 쓰이는 멋진 콜배개 예제입니다. 요청부분은 다음과 같습니다

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get은 단순히 우리가 트위터의 리퀘스트를 요청했다는 것입니다.
이 요청에는 세 개의 매개변수가 있습니다. ‘search/tweets’는 우리의 요청에 대한 수단이고 params는 우리의 검색 매개변수이고 그 뒤에 익명의 함수가 우리의 콜백입니다.

콜백은 우리의 다음코드가 실행되기 전에 서버로부터 응답을 기다려야 하기때문에 매우 중요합니다. 우리는 API 요청이 성공적으로 끝났는지 아닌지 우리는 알 수가 없습니다. 그래서 기다려야 하죠. 트위터가 응답을 하면 우리의 콜백이 호출될겁니다. 트위처는 우리에게 err객체나 response객체를 전달할 것입니다. 우리의 콜백함수에서 if()르르 사용해서 우리의 요청이 성공했는지 아닌지 구분할 수 있습니다.

You made it

수고하셨습니다. 여러분은 이제 (이상적으로는) 콜백이 무엇이고 어떻게 동작하는지 아셨을 겁니다. 하지만 이건 콜백에 대한 빙산의 일각이고 배워야 할게 아직 많습니다!

Summary

자바스크립트에서 콜백을 쓰는 이유,
API 요청 시 응답을 받고나서 다음 함수를 실행시키도록 보장해야 하므로 콜백을 사용한다.
하나의 함수가 끝나길 기다렸다가 다음 함수를 실행하기 위해서는 콜백을 써야한다.

Medium - JavaScript; What the heck is a Callback?

Preface

What is a Callback?

Why do we need Callbacks?

Create a Callback

A real world example

You made it

Summary

CS-Wanderer

Error

Preface

What is a Callback?

Why do we need Callbacks?

Create a Callback

A real world example

You made it

Summary

Templates (for web app):

Error