비동기적 프로그래밍(1) - 동기vs비동기, 콜백

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• <동기식 처리 모델 vs 비동기식 처리 모델>
• <비동기적 프로그래밍(1)- 콜백>
• 1. 자바스크립트의 비동기적 프로그래밍
• 2. 콜백
• 2-1) 스코프와 비동기적 실행
• 2-2) 오류 우선 콜백
• 2-3) 콜백 헬

 

<동기식 처리 모델 vs 비동기식 처리 모델>

동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다.

동기식 처리 모델

#동기식으로 동작 - 순차적으로 실행됨.

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  console.log('func2');
  func3();
}

function func3() {
  console.log('func3');
}

func1();

비동기식 처리 모델(Asynchronous processing model 또는 Non-Blocking processing model)은 병렬적으로 태스크를 수행한다. 즉, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다.

비동기식 처리 모델

#비동기식으로 동작 - 순차적으로 실행되지 않음.

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function() {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

 

<비동기적 프로그래밍(1) - 콜백>

1. 자바스크립트의 비동기적 프로그래밍

자바스크립트 애플리케이션은 단일 스레드에서 동작해 한 번에 한 가지 일만을 처리할 수 있다. 때문에 부드럽게 동작하는 소프트웨어를 만들기 위해서는 사용자의 입력뿐만 아니라 여러 문제를 비동기적 관점에서 생각해야 한다. 사용자 입력 외에, 비동기적 테크닉을 사용해야 하는 경우는 크게 세 가지가 있다.

• Ajax 호출을 비롯한 네트워크 요청
• 파일을 읽고 쓰는 등의 파일시스템 작업
• 의도적으로 시간 지연을 사용하는 기능(알람 등)

 

2. 콜백

• 특정 함수에 매개변수로 전달된 함수를 의미하고, 함수를 전달받은 함수안에서 호출된다. 간단히 말해 나중에 호출할 함수이다.
• 사용자 입력, Timeout 처리할 때 사용된다.
• 보통 익명 함수로 사용한다.
• 콜백함수를 이용하여 동작을 구현하면 처리가 끝날 때까지 기다리는 것이 아니라 처리가 끝나는 시점에서 함수를 호출한다. 즉, 정말로 필요할 때만 함수를 호출해서 효율이 좋고 웹사이트에서도 여러 가지 동작을 동시에 할 수 있다.

// 콜백 함수가 될 callback매개변수 설정
function plus(a, b, callback) {  
  var sum = a + b;
  callback(sum);
}  

// plus 함수에 익명 함수를 인자로 전달
plus(1, 2, function(result) {
  console.log(result);         
});

//출력
3

 

2-1) 스코프와 비동기적 실행

function countdown(){
    let i;
    for(i=5;i>=0;i--){
        setTimeout(function()){
            console.log(i===0?"Go":i);
        }, (5-i)*1000;
    }
}
countdown();

위 코드의 결과는 예상한 것처럼 5에서 카운트다운을 하는 것이 아니라, -1이 여섯 번 반복된다. 코드의 문제점은 i가 for문 밖에서 선언되어 for 루프가 실행을 마치고 i가 -1후에 콜백이 실행된다는 점이다. 이는 IIFE 또는 i를 for루프 선언부에서 선언하면 해결된다.

 

2-2) 오류 우선 콜백

• 오류 우선 콜백은 콜백과 관련된 에러를 처리할 방법의 표준으로 콜백의 첫 번째 매개변수에 에러 객체를 쓰면 된다.
• 오류 우선 콜백에서 가장 먼저 하는 일은 에러객체인 err가 참 같은 값이라면 파일을 읽는 데 문제가 있다는 뜻이므로 콘솔에 오류를 보고하고 즉시 빠져나오는 것이다.

#에러객체 = err
const fs = require('fs');

const frame = 'may_or_maynot_exist.txt'
fs.readFile(frame, function(err, date){
    if(err) return console.error('error message');
});

 

2-3) 콜백 헬 : 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제