[SEB FE] Section 2

Unit3 - [JS/Node] 비동기

• 고차함수 리뷰
• 비동기
• Node.js
• fetch API

---

고차함수 리뷰

고차 함수는 콜백 함수와 커링 함수의 상위 개념이다.

• 고차 함수는 전달인자(argument)로 함수를 넘겨줄 수 있다.

  • 고차 함수의 전달인자로 넘겨주는 함수를 콜백 함수(Callback function)라고 한다. 콜백 함수는 어떤 작업 중에 호출하는 경우가 많아서, 업무 중 걸려온 전화에 답신하는 전화를 나타내는 콜백이라는 이름이 붙여졌다.

• 고차 함수는 다른 함수를 리턴할 수 있다.

  • '함수를 리턴하는 함수'는 모양새가 특이한 만큼, 부르는 용어가 따로 있다. '함수를 리턴하는 함수'를 고안해 낸 논리학자 하스켈 커리(Haskell Curry)의 이름을 따, 커링 함수라고 한다. 따로 커링 함수라는 용어를 사용하는 경우에는, 고차 함수란 용어를 '함수를 전달인자로 받는 함수'에만 한정해 사용하기도 한다. 그러나 정확하게 구분하자면, 고차 함수가 커링 함수를 포함한다.

• '함수를 리턴하는 함수'와 '함수를 전달인자로 받는 함수' 모두 고차 함수이다.

• 즉, 고차 함수는 콜백 함수와 커링 함수의 상위 개념이다.

  콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있고, 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다. 특정 작업의 완료 후에 호출하는 경우는 이후에 충분히 접할 수 있다.

---

비동기

학습목표

• 어떤 경우에 중첩된 콜백(callback)이 발생하는지 이해할 수 있다.
• 중첩된 콜백(callback)의 단점, Promise의 장점을 이해할 수 있다.
• async / await 키워드에 대해 이해하고, 작동 원리를 이해할 수 있다.

개념학습

Memory Heap → Call Stack → Web APIs → Task Queue → Call Stack

자바스크립트 실행 순서 (콜스택)

자바스크립트는 기본적으로 동기적으로 실행이 된다.

• 자바스크립트 런타입 환경이라면 자바스크립트 엔진이 탑재되어 있다.
• 그래서 소스코드를 자바스크립트 엔진이 이해하고 번역해서 실행하게 된다.
• 소스코드에서 동적으로 객체를 생성하는 경우에 Memory Heap에 실행하게 된다.
• Call Stack이라는 곳이 있는데 Call Stack은 우리의 함수 실행 순서를 기억한다.
• 예를 들어 전역에서 C함수를 실행하면 C함수가 Call Stack에 들어오고 C에서 B함수를 호출하면 B도 Call Stack에 쌓인다.
• 반대로 B함수에서 반환이 된다면 들어온 순서대로 B함수, C함수 순으로 Call Stack에서 나가게 된다.
• 이를 통해 자바스크립트는 하나의 싱글 컨텍스트 스택을 가지고 있는 것을 알 수 있고 이것을 한번에 하나의 일만 처리를 할 수 있다고 볼 수 있다.
• 이것을 싱글 스레드(Single Thread)라고 한다.
• 자바스크립트는 기본적으로 동기적으로 실행이 된다.

콜백 비동기 사용해 보기

자바스크립트는 콜스택에 들어온 함수만 실행 할 수 있다.

• 자바스크립트를 비동기적으로 사용하기 위해서는 자바스크립트 런타임 환경에서 제공해주는(호스트 환경이라고도 한다.) 다양한 WebApIs(DOM API, setTimeout, setInterval, fetch, event listener)를 이용한다.
• 그래서 Web APIs를 호출할 때 우리가 원하는 콜백함수를 API에 던지면 내부적으로 비동기적인 일을 수행한다.
• 일이 다 끝나면 우리가 등록해놓은 콜백함수를 Task Queue에 넣게 된다.
• 그리고 자바스크립트 엔진에 Event Loop가 Call Stack과 Tack Queue를 감시하면서 Call Stack이 비어있을 때만 Task Queue에 있는 콜백함수를 Call Stack으로 가져오게 된다.
• 하지만 콜백함수를 무작위하게 쓰면 콜백지옥에 빠지기 때문에 Promise, async/await를 사용한다.

Promise

• new Promise()라는 인스턴스로 만들고 resolve()와 reject()라는 명령어를 이용한다.
• 다만 Promise Hell도 발생할 수 있다.

async/await

• async/await를 이용하면 작동하는 것은 Promise와 동일한데 코드를 표현하는 것을 동기적으로 쓸 수 있다.

---

Node.js

학습목표

• Node.js 내장 모듈을 사용할 수 있다.
• 서드 파티 모듈 (3rd-party module)을 활용할 수 있다.
• Node.js 공식 문서를 활용하여 fs.readFile을 이용할 수 있다.

개념학습

Node.js 내장 모듈을 사용하는 방법

• Node.js에서 다른 파일을 불러오는 require 구문

const fs = require('fs'); // 파일 시스템 모듈을 불러옵니다
const dns = require('dns'); // DNS 모듈을 불러옵니다

// 이제 fs.readFile 메서드 등을 사용할 수 있다.

3rd-party 모듈을 사용하는 방법

서드 파티 모듈(3rd-party module)은 해당 프로그래밍 언어에서 공식적으로 제공하는 빌트인 모듈(built-in module)이 아닌 모든 외부 모듈을 말한다.

예를 들어, Node.js에서 underscore는 Node.js 공식 문서에 없는 모듈이기에 서드 파티 모듈이다. underscore와 같은 서드 파티 모듈을 다운로드하기 위해서는 npm을 사용해야 한다.

• underscore 설치

npm install underscore

• require 구문을 통해 underscore를 사용
  • Node.js 에서는 자바스크립트 코드 상단에 require 구문을 이용하여 다른 파일을 불러올 수 있다.

const _ = require('underscore');

fs.readFile을 통해 알아보는 Node.js 공식문서 가이드

fs.readFile(path[, options], callback)

- path \<string> | \<Buffer> | \<URL> | \<integer>
- options \<Object> | \<string>
- callback \<Function>

fetch API

개요

비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청이다. 네트워크를 통해 이루어지는 요청은 그 형태가 다양하다. 그중에서 URL로 요청하는 경우가 가장 흔하다. URL로 요청하는 것을 가능하게 해주는 API가 바로 fetch API이다.

학습목표

• fetch에 대해 이해할 수 있다.
• fetch를 이용하여 데이터를 불러올 수 있다.

개념학습

fetch API

• fetch API는 특정 URL로부터 정보를 받아오는 역할을 한다.
• 이 과정이 비동기로 이루어지기 때문에, 경우에 따라 다소 시간이 걸릴 수 있다.
• 이렇게 시간이 소요되는 작업을 요구할 경우에 blocking이 발생하면 안 되므로, 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우는 경우도 있다.