javaScript. 비동기 처리와 Callback 함수

 

javaScript. (20) Event Listener / Callback

지난 포스팅에서 Callback에 대한 이해가 잘 안되는 것 같아

추가로 Callback에 대해 포스팅해보겠다.

---

 

 

콜백에 대해 설명하기에 앞서, 

비동기 처리가 무엇인지에 대해 먼저 알아보자.

 

비동기는 동기식에 반대되는 개념으로, 둘을 비교해보면 다음과 같다.

 

Syncronous (동기식)	요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식
Asynchronous (비동기)	요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식

 

 

1 / 동기식 처리

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  alert('You clicked me!');

  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});

위 예제에서 코드는 위 > 아래 순으로 진행된다.

 

1. <button> element를 참조함 (DOM에 미리 정의되어있음)

2. click 이벤트리스너를 만들어 버튼 클릭시 함수 실행.

>> arrow function. 매개변수는 없고,

alert기능 후에 <p>태그를 만들어 html문서에 페인트한다. 

 

ㅡ 여기서 alert 기능은 alert창이 닫히기 전까지 웹사이트는 '일시정지' 된다.

즉, alert 시점 이후부터의 렌더링이 일시중지되는 것이다.

(자바스크립트는 single thread이기 때문에 동시에 진행하지 못하고, 하나의 메인 스레드로 처리한다.)

 

>> alert는 실제 어플리케이션에선 거의 금기시된다. (위와 같은 이유로)

 

 

위와 같은 이유 때문에 (블로킹),

많은 웹 API 기능은 비동기 처리를 주로 사용한다.

특히, 외부 디바이스에서 어떤 리소스에 접근하거나 가져올 때 많이 사용한다.

 

2 / 비동기식 처리

- 크게 두가지 유형이 있다.

 

1. j-Query의 ajax

 

** AJAX 란?

 

 

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법

 

• 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
• 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
• 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest

+) Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있음.

 

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined

여기서 $.get()이 ajax 통신을 하는 부분이다.

 

https://domain.com에 

HTTP GET 요청을 날려 1번 product의 정보를 요청하는 코드. (get 요청은 뒤에 저렇게 /1과 같이 붙음)

 

그리고, 서버에서 받아온 데이터는 response인자에 담긴다.

tableData라는 변수에 그 값을 저장한다.

 

>> 그럼 이제 이 getData()를 호출하면 ??  ㅡ undefined가 나옴.

왜? 

$.get() 으로 데이터를 요청하고 기다지 않고 바로 return tableDate를 했기 때문.

(즉, 비동기식 처리를 했기 때문)

 

위와 같이 특정 로직이 실행이 끝날때 까지 기다리지 않고
이후의 코드를 먼저 실행하는 것이 바로 비동기 처리이다.

 

 

2. setTimeout() 

- WEB API의 한 종류이다.

💡 API(Application Programming Interface)
- 서버와 데이터베이스에 대한 출입구 역할.
- 어플리케이션과 기기가 원활하게 통신할 수 있도록 해줌.
- 모든 접속을 표준화 (기계나 OS와 무관)

>> private / public / partner API가 존재함.
private API를 이용할 경우, 코드의 작성방법을 표준화해서 빠른 프로세스 처리 가능. + S/W 통합, 협업 용이

- 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행함.

console.log('Hello');

setTimeout(function() {
   console.log('Bye');
}, 3000);

console.log('Hello Again');


// result : 'Hello' > 'Hello Again' >(3초후) 'Bye' 순으로

- setTimeout()을 먼저 실행하고 나서 'Hello Again'이 실행된 것임.

 

 

 

---

비동기 처리의 문제점 해결

- 콜백(callback)을 이용해서 해결할 수 있음.

 

기존 코드 > [더보기]클릭

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

- 위와 같이 콜백함수를 사용하면 특정 로직이 끝났을 때 원하는 동작 실행 가능.

- callbackFunc(response)를 해서, 서버에서 받은 데이터인 response를 콜백함수에 넘겨준다.

>> 여기서, callbackFunc는 getData 함수의 인자로 받는 함수임.

 

즉, 아래 실행부에서는 function(tableData) { console.log(tableData) } 에 해당하는 것이

콜백함수, 즉 함수의 인자로 들어가는 함수임.

 

 

- 우선 대기명단 작성하고 대기함 ㅡ 다시 전화받는 순간 = 콜백이 호출되는 순간임.

 

 

 

 

 

---

 

 

 

정리

 

 

• 콜백함수는 매개변수(parameter)로 함수를 전달받아, 함수 내부에서 실행하는 함수이다.
• 예> forEach의 경우에 함수안에 익명의 함수를 넣어 동작시킨다.

let number = [1, 2, 3, 4];

number.forEach(x => {         // forEach 함수(메서드)안에
    console.log(x * 2);       //  익명 함수가 존재 ㅡ forEach 안에서 실행
});

 

• 콜백함수는 이름이 없는 익명함수를 사용. (함수 내부에서 실행되므로 이름 필요 X)
• 화살표함수 (=>)를 쓰거나, function() { 내용 } 과같이 사용
• 함수를 콜백함수로 사용시, 함수의 이름을 넘겨줌(reference)

  function whatYourName(name, callback) {      // callback(함수)를 인자로 받음
      console.log(name);
      callback();             // 콜백 실행
  }
  
  
  function goodBye() { 
      console.log('goodbye!');
  }
  
  WhatYourName('yjin', goodBye);          //  name에 'yjin'전달, callback에 goodBye함수 전달
  
  
  결과 : 
  yjin 
  goodbye!​

  - 함수의 이름을 넘겨줘서 그 이름을 가진 함수가 실행되도록 하는 예제.  즉, callback이라는 파라미터를 ()로 호출을 하는데, 그 callback에 변수처럼 goodBye 함수를 인자로 넣은 것임.

 

 

this의 경우에는 콜백에서 사라진다.

따라서, call()과 apply()로 this를 보호하는 콜백을 만들어야한다.

 

 

javaScript. 콜백함수(Callback)

 

 

 

---

REFERENCE

 

• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Introducing

Introducing asynchronous JavaScript - Web 개발 학습하기 | MDN

• https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

Callback function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

• https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수