본문 바로가기

BEB

[Week 4-2] JS/Node 비동기

 

출처: PoiemaWeb

시작하기 앞서...

  • 위 예시를 읽고, 아래 개념을 대략적으로 이해할 수 있다.
    • blocking / non-blocking
    • synchronous / asynchronous
  • callback 함수 전달 방법을 알고 있다.
  • method chaining(Array의 map, filter 등을 연결해서 쓰는 법)을 할 수 있다.

Achievement Goals

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

 

브라우저에서 사용할 수 있는 비동기 흐름은 타이머 혹은 DOM 이벤트와 관련된 상황으로 다소 한정적이지만, Node.js의 경우 많은 API가 비동기로 작성되어 있다. Node.js 소개 문서의 첫 단락은 Node.js의 정의부터 시작한다. Node.js는 "비동기 이벤트 기반 자바스크립트 런타임"이다.

Node.js는 로컬 환경에서 자바스크립트를 실행할 수 있는 자바스크립트 런타임이고 Node.js는 브라우저에서 불가능한 몇 가지 일이 가능하다. Node.js 모듈을 사용하는 방법을 먼저 학습하고, 이를 통해 비동기 상황을 연출하고 연습한다.

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

Node.js 내장 모듈 목록은 다음 링크에서 찾을 수 있다.

 

Node.js v14.17.0 Documentation

 

개발자는 자신이 이해하는 범위만큼 모듈을 사용할 수 있다. 예를 들어, DNS에 대한 지식을 알고 있다면, DNS 모듈 사용법 문서에서 관련 메소드를 사용할 수 있다. 당장 DNS가 무엇인지 모를 수는 있지만, 파일 시스템 모듈은 파일을 읽거나 저장하는 기능을 구현할 수 있도록 돕는다. 메소드 목록을 살펴보면, 파일을 읽을 때에 쓸법한 메소드 이름을 찾을 수 있다. 물론, 처음부터 필요한 메소드를 정확하게 찾는 일은 쉽지 않다.

파일을 읽을 때에는 readFile이라는 메소드가 적합하다. 파일을 저장할 때에는 writeFile을 쓰면 된다.

모든 모듈은 '모듈을 사용하기 위해 불러오는 과정'이 필요하다. 브라우저에서 다른 파일을 불러올 때에는 다음과 같이 <script> 태그를 이용했다.

<script src="불러오고싶은_스크립트.js"></script>

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

이제 node_modules에 underscore가 설치되었다. 이제 Node.js 내장 모듈을 사용하듯 require구문을 통해 underscore 를 사용할 수 있다.

const _ = require('underscore');

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

메소드 fs.readFile 은 비동기적으로 파일 내용 전체를 읽는다. 이 메소드를 실행할 때에는 인자 세 개를 넘길 수 있다.

  • path \<string> | \<Buffer> | \<URL> | \<integer>

path에는 파일 이름을 인자로 넘길 수 있다. 네 가지 종류의 타입을 넘길 수 있지만 일반적으로 문자열(<string>)의 타입으로 넘긴다.

 

다음은 /etc/passwd 라는 파일을 불러오는 예제다.

fs.readFile('/etc/passwd', ..., ...)
  • options \<Object> | \<string>

대괄호로 감싼 두 번째 인자 options는 넣을 수도 있고, 넣지 않을 수도 있다.

options는 객체 형태 또는 문자열로 넘길 수 있다. 문자열로 전달할 경우 인코딩을 넘긴다. 인코딩은 두 번째 예제를 참고. 두 번째 예제에서는 'utf8' 을 두번째 인자로 전달하는 것을 확인할 수 있다.

let options = {
  encoding: 'utf8', // UTF-8이라는 인코딩 방식으로 엽니다
  flag: 'r' // 읽기 위해 엽니다
}

// /etc/passed 파일을 옵션을 사용하여 읽습니다.
fs.readFile('/etc/passwd', options, ...) 
  • callback \<Function>
    • err \<Error>
    • data \<string> | \<Buffer>

콜백 함수를 전달한다. 파일을 읽고 난 후에 비동기적으로 실행되는 함수다.

콜백 함수에는 두 가지 파라미터가 존재한다.

에러가 발생하지 않으면 err 는 null 이 되며, data 에 문자열이나 Buffer 라는 객체가 전달된다. data 는 파일의 내용.

 

 

'BEB' 카테고리의 다른 글

[Week 5-2] HTTP/네트워크 실습  (0) 2022.03.31
[Week 5] HTTP/네트워크 기초  (0) 2022.03.30
[Week 4] 재귀함수  (0) 2022.03.22
[Week 3-3] React 기초  (0) 2022.03.16
[Week3-2] JS/Node 고차함수  (0) 2022.03.15