본문 바로가기
TIL/Node.js

Nodejs | 비동기, 콜백, Promise

by 홍차23 2019. 12. 11.

블로킹과 논블로킹 

  • 블로킹: Nodejs 프로세스에서 추가적인 자바스크립트 실행을 위해 자바스크립트가 아닌 작업이 완료될 때까지 기다려야 하는 상황이다. libuv 를 사용하는 Nodejs 표준 라이브러리 동기 메서드가 가장 대표적인 블로킹 작업이다. 
  • 논블로킹: 특정 로직의 실행이 끝날 때까지 기다리지 않고 나머지 코드를 먼저 실행하는 비동기 처리. 예를 들어 클라이언트에서 서버로 데이터를 요청했을 때 서버의 응답을 기다리며 다른 코드를 실행하지 않는다면 웹 애플리케이션이 실행되는 데 아주 오랜 시간이 걸리게 된다. 따라서 javascript 는 비동기 처리를 필요로 한다. 
    • 비동기의 문제점: 데이터를 요청하고 응답을 기다리지 않고 다음 코드를 실행하므로 결과가 undefined 로 나온다. 쉽게 말하면 "보노보노 너는 몇 살이니?"라고 물음을 던져놓고 대답이 돌아오기 전에 "아 그렇구나(초기값없음=undefined)" 자문자답해버리는 것. 그럼 수많은 웹 애플리케이션들이 어떻게 서버의 대답을 듣고 작동하는걸까? 답은 콜백함수다.

콜백함수

  • 콜백 함수: 어떤 이벤트가 발생한 후에 수행될 함수. 비동기 처리 방식의 문제점을 해결. 데이터가 준비된 시점에 작동.
    • 콜백의 문제점: 콜백지옥. 해결책은 promise, async 또는 콜백함수 분리.
  • Nodejs 표준 라이브러리의 모든 I/O 메서드는 논블로킹 비동기 방식을 제공하고 콜백 함수를 받는다. 일부 메서드는 블로킹 메서드도 가지는데 이 경우 이름 마지막에 Sync 가 붙는다.
const fs = require('fs');
const data = fs.readFileSync('/file.md'); //파일을 읽을 때까지 여기서 블로킹

Nonblocking 

const fs = require('fs');
fs.readFile('/file.md', (err,data)=>{
	if (err) throw err;
});

 

프로미스

참고: https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

  • Promise: 자바스크립트 비동기 처리에 사용하는 객체. 
  • ajax 통신 코드
function getData(callbackFunc) {
	$.get('url주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨준다.
    });
}

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

 

  • 프로미스 적용
function getData(callback) {
	return new Promise(function (resolve, reject) {
    $.get('url 주소/products/1', function (response) {
      resolve(response); //데이터를 받으면 호출
      });
    });
}

getData().then(function(tableData) { //getData() 실행이 끝나면 then() 호출
	console.log(tableData); //resolve() 결과값이 전달됨
});

promise 의 3가지 상태

  • pending
  • fullfilled
  • rejected

 

 

다음 공부할 것>

 

-자바스크립트 async 와 await 

https://joshua1988.github.io/web-development/javascript/js-async-await/

-Nodejs http 트랜잭션

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/

댓글