비동기 Ch 2. Node.js와 fetch API

비동기 Ch 2. Node.js와 fetch API

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

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

들어가기 전

Node.js는 "비동기 이벤트 기반 Javascript 런타임" 입니다.
모듈이란 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위를 의미합니다.

1. Node.js 모듈 사용법

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

Node.js에서는 JavaScript 코드 가장 상단에 require 구문을 이용하여 다른 파일을 불러올 수 있습니다.

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

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

참고로 파일 시스템 모듈은 파일을 읽거나 저장하는 기능을 구현할 수 있도록 돕습니다. 예를 들어 파일을 읽을 때는 readFile이라는 메서드가 적합하고 파일을 저장할 때는 writeFile이라는 메서드가 적합합니다.

• 3rd-party 모듈을 사용하는 방법
  서드 파티 모듈(3rd-party module)은 해당 프로그래밍 언어에서 공식적으로 제공하는 빌트인 모듈(built-in module)이 아닌 모든 외부 모듈을 일컫습니다. 따라서 underscore와 같은 서드 파티 모듈을 다운로드하기 위해서는 npm을 사용해야 합니다.

npm install underscore

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

const _ = require('underscore');

2. fs.readFile

메서드 fs.readFile은 로컬에 존재하는 파일을 읽어옵니다.
아래의 내용은 fs.readFile의 공식 API 문서를 참고하여 정리했습니다.
fs.readFile(path [,options], callback)
fs.readFile메서드는 비동기적으로 파일 내용 전체를 읽습니다.
이 메서드는 세 개의 전달 인자를 받습니다.

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

• path \ <string>| <Buffer>| <URL>|<integer>
path에는 파일 이름을 전달인자로 받습니다. 네 가지 종류의 타입을 넘길 수 있지만 일반적으로 문자열(<string>)의 타입을 받습니다.
  다음은 'etc/passwd'라는 파일을 불러오는 예제입니다.

fs.readFile('/ets/passwd', ..., ... )

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

• options \ <Object> | <string>
options는 문자열 또는 객체 형태로 받을 수 있습니다. 문자열로 전달할 경우 인코딩을 받습니다. 밑의 예제에서는 utf-8을 두 번째 전달인자로 받는 것을 확인할 수 있습니다.
  아래는 options을 문자열로 받을 때 인코딩을 받는다는 공식문서 내용입니다.

  If options is a string, then it specified the encoding

// 문자열로 전달하는 경우
// /etc/passwd 파일을 'utf8'을 사용하여 읽습니다.
fs.readFile('/ets/passwd', 'utf8', ... )

// 객체로 전달하는 경우
let options = {
	encoding: 'utf8', // utf8 인코딩 방식으로 엽니다.
  	file: 'r' // 읽기 위해 엽니다.
}
fs.readFile('/ets/passwd', options, ... )

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

• callback\ <Function>
  • err | <Error>| <AggregateError>
  • data | <string> | <Buffer> 콜백 함수를 전달합니다. 파일을 읽고 난 후에 비동기적으로 실행되는 함수입니다.
    콜백 함수에는 두 가지 매개 변수가 존재합니다. 에러가 발생하지 않으면 err는 null이 되며, data에 문자열이나 Buffer라는 객체가 전달됩니다. data는 파일의 내용입니다.
    data에 문자열이 전달되기 위해서는 위 options에 utf-8 인코딩 방식을 명시해줘야합니다. 그렇지 않으면 Buffer라는 객체가 전달됩니다.
    아래는 공식 문서에 언급된 설명입니다.

    If no encoding is specified, then the raw buffer is returned

const fs = require("fs");

const getDataFromFile = function (filePath, callback) {
  fs.readFile(filePath, "UTF-8", (err, data) => {
    if (err) {
      return callback(err, null);
    }
    return callback(null, data);
  });
};

getDataFromFile("../README.md", (err, data) => console.log(data));

---

3. fetch API

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

fetch API는 특정 URL로부터 정보를 받아와서 Promise 타입의 객체를 반환합니다. 이 과정은 비동기 로 이뤄집니다. 반환된 객체는 API 호출이 성공했을 경우 응답(response)객체를 resolve하고, 실패했을 경우에는 예외(error)객체를 reject합니다.

let url =
  "https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스";
fetch(url)
  .then((response) => response.json()) 
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

하지만 fetch로는 데이터를 바로 사용할 수 없습니다. fetch를 사용할 때는 두 단계를 거쳐야 합니다. 먼저 올바른 url로 요청을 보내야 하고, 바로 뒤에 오는 응답에 대해 json()을 해줘야합니다.
fetch API 응답(response) 객체는 json() 메서드를 제공하고 있고, JSON 형태의 응답을 자바스크립트 객체로 변환합니다.