비동기 - UnderBar 라이브러리

[JS/Node] 비동기

Achievement Goals

  • 어떤 경우에 중첩된 callback이 발생하는지 이해
  • 중첩된 callback의 단점과 Promise의 장점 이해
  • Promise 사용 패턴을 이해
    • resolve, reject의 의미 / then, catch와의 관계 이해
    • Promise에서 인자를 넘기는 방법
    • Promise.all 의 사용법
  • async / await : keyword에 대해 이해 및 작동 원리 이해
  • Node.js의 fs 모듈 사용법을 이해

비동기

비동기의 이해

커피숍에서 먼저 주문한 손님1이 커피를 받을 때까지, 줄 서 있는 손님2는 주문 불가능

→ blocking : 하나의 작업이 끝날 때까지, 이어지는 작업을 “막기”

손님2는 손님1의 커피가 나온 후, 주문 가능 → 손님1의 주문 완료 시점 = 손님2의 주문 시작 시점

→ 동기적(synchronous) : 작업의 시작 시점과 완료 시점이 같은 상황

주문 과정을 효율적으로 변경하기

  • 커피 주문이 blocking 되지 않고, 언제든지 주문을 받을 수 있게 한다.
  • 커피가 완성되면 즉시 제공 : 손님1의 주문 완료 시점과 손님2의 주문 시작 시점이 같지 않아도 됨

→ 이러한 합리적인 대안으로 Node.js를 non-blocking하고 비동기적(asynchronous)으로 작동하는 런타임으로 개발함.

JavaScript의 비동기적 실행(Asynchonous execution)이라는 개념은 웹 개발에서 유용

  • 백그라운드 실행, 로딩 창 등의 작업
  • 인터넷에서 서버로 요청, 응담을 기다리는 작업
  • 큰 용량의 파일을 로딩하는 작업

⇒ 비동기적으로 작동되었을 때 효율적인 작업들

고차함수와 Callback

[고차함수, Higher order function]

  • 다른 함수를 인자로 전달받을 수 있음

  • 다른 함수를 리턴할 수 있음

  • 함수를 리턴하는 함수, 함수를 인자로 받는 함수 ⇒ 고차함수

  • 고차함수는 콜백 함수와 커리 함수의 상위 개념

    콜백 함수를 전달받은 caller 함수 = 함수 내부에서 이 콜백 함수를 호출(invoke) 가능

UnderBar

: 배열, 객체를 다루는 라이브러리.

underbar 라이브러리를 구현하며 자바스크립트 내장 메소드가 어떻게 callback 함수를 활용하는지 원리 이해하기.

모티브가 되는 라이브러리로 underscore.js, lodash 등

# 자바스크립트 배열 내장 메소드 [forEach / map / filter / reduce ]

  • forEach : 배열의 각 요소들을 개별적으로 반환
  • map : 모든 요소에게 동일한 행동 후 다시 반환
  • filter : 모든 요소 중 조건에 맞는 값들만 반환
  • reduce : 전달된 초기값을 기준으로 누적시켜 새로운 값 반환

# callback 함수를 전달하여 사용

값으로 전달된 함수는 내부적으로 호출될 수 있기 때문에, 원래 함수의 기본적인 동작 방법을 변경할 숭 있다.

함수가 다른 함수의 인자로 사용되어 그 함수의 내용을 바꿀 수 있는 것이 콜백(callback)함수.

콜백이 비동기처리에서 사용될 때, 시간이 오래 걸리는 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.

# closure 함수를 리턴하여 활용

내부함수가 외부함수의 내용에 접근할 수 있는 개념이다.

외부함수의 실행이 종료되어 외부함수가 소멸된 이후에도 외부함수의 범위(scope)에 접근할 수 있는 내부함수.

⇒ 자바스크립트에서 함수가 값으로 취급되어 함수를 parameter로도 받을 수 있고 [→Callback], return 할 수도 있다[→Closure].

# …(Spread Syntax)를 사용하여 인자의 개수 파악 및 인자에 접근

  • rest parameter : 개별의 요소들을 하나의 배열로 묶기 위해 사용
    • 매개변수 앞에 점 …을 붙여서 정의한 매개변수 ⇒ 묶인 요소들의 타입은 ‘배열’로 출력
  • spread syntax : 하나의 요소를 개별의 요소들로 펼치기 위해 사용
    • 배열, 문자열, 객체 등 Iterable Object를 각각의 요소로 펼칠 수 있다.