[JavaScript 비동기] Node.js +5/31추가

❗️공부 중인 사람의 글입니다

✅ TIL

• Node.js 내장 모듈 사용하기
• 서드 파티 모듈 (3rd-party module) 불러오기
• fs.readFile 사용하기

---

1. Node.js란?

비동기 이벤트 기반 JavaScript 런타임이다.

2. Node.js 내장 모듈 불러오기

https://nodejs.org/dist/latest-v16.x/docs/api/
JavaScript 파일 최상단에 require 구문을 이용하여 빌트인 모듈을 불러온다.
(html 파일에서 script 태그를 이용하듯 Node.js에서는 require사용)

const fs = require("fs");  //file system 모듈을 불러온다

• fs 모듈은 파일을 읽거나 저장하는 기능 등을 제공한다.
  파일을 읽을 때 readFile 메서드 사용
  파일을 저장할 때 writeFile 메서드 사용

3. 3rd-party module 불러오기

Node.js의 공식 모듈이 아닌 모든 외부 모듈을 3rd-party module이라 한다.

//1. 터미널에서 npm install을 한다
npm install ____

//2. Node.js에서 require구문으로 불러온다.
const _ = require('____');

---

💡 fs.readFile 메서드 사용하기

: 비동기적으로 파일 내용 전체를 읽는다.

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

순서대로 3개의 인자 path, options, callback을 가진다.

• path : string | Buffer | URL | integer
  파일 이름을 작성한다.

fs.readFile('/abc', ... )

• [, options]: Object | string
  대괄호는 선택적 전달인자를 뜻한다.
  encoding, flag, signal을 필요에 따라 작성한다.

//1. options에 string을 입력할 경우, 파일을 읽을 인코딩을 작성한다.
fs.readFile('/abc', 'utf8' ...)

//2. options에 object을 입력할 경우, 정보를 담은 객체를 작성한다.
const option = {
  encoding : null,
  flag : 'r',
}

fs.readFile('/abc', option, ...)

• callback : Function
  파일을 읽은 뒤 콜백함수가 비동기적으로 실행된다.

fs.readFile('test.txt', 'utf8', (err, data) => {
  if (err) {
    throw err; // 에러를 던진다.
  }
  console.log(data);
});

에러가 발생하지 않으면 err은 null이 된다.
data(파일의 내용)에 문자열을 전달하거나 encoding을 입력하지 않을 경우 Buffer라는 객체가 전달된다.

---

fs 모듈 실습 과제

// 1. callback
const fs = require("fs"); 

const getDataFromFile = function (filePath, callback) {
  fs.readFile(filePath,'utf-8', (err, data) => {
    if (err) {
      callback(err, null);
    } else{
    callback(null, data);
    }
  })
};

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



//2. promise
const getDataFromFilePromise = filePath => {
  return new Promise(function(resolve, reject) {
    fs.readFile(filePath,'utf-8', (err, data) => {
      if (err) {
        reject(err);
      } else{
        resolve(data);
      }
    })
  })
};

getDataFromFilePromise('README.md').then(data => console.log(data));



//3. promise chaining
const readAllUsersChaining = () => {
  return new Promise(function(resolve, reject) {
    let result = [];
    getDataFromFilePromise(user1Path)
    .then((value) => {
      result.push(JSON.parse(value))
      return getDataFromFilePromise(user2Path)
    })
    .then((value) => {
      result.push(JSON.parse(value))
      resolve(result)
    })
  })
}
//더 줄이면
const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path).then(user1 => {
    return getDataFromFilePromise(user2Path).then(user2 => {
      return [JSON.parse(user1), JSON.parse(user2)];
    })
  });
}

readAllUsersChaining()



//4. Promise.all([..., ... ...])
const readAllUsers = () => {
  let val1 = getDataFromFilePromise(user1Path)
  let val2 = getDataFromFilePromise(user2Path)
  let result = [];
  return Promise.all([val1, val2]).then((values) => {
    for (let i of values) {
      result.push(JSON.parse(i))
    }
    return result;
  })
}
//더 줄이면
const readAllUsers = () => {
  return Promise.all([getDataFromFilePromise(user1Path), getDataFromFilePromise(user2Path)]).then(values => 
    [JSON.parse(values[0]), JSON.parse(values[1])])
}

readAllUsers()


//5. async / await
const readAllUsersAsyncAwait = async () => {
  let first = await getDataFromFilePromise(user1Path);
  let second = await getDataFromFilePromise(user2Path);
  let result = [];
  result.push(JSON.parse(first));
  result.push(JSON.parse(second));
  return result;
}
//더 줄이면
  let first = await getDataFromFilePromise(user1Path);
  let second = await getDataFromFilePromise(user2Path);
  return [JSON.parse(first), JSON.parse(second)];

readAllUsersAsyncAwait();

---

💡 Learn more...

Promise.all([...promises...])

: 2개 이상의 promise를 요소로 하는 배열을 매개변수로 받는다.
각 promise의 결과는 배열의 요소가 된다.

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(alert); // 프라미스 전체가 처리되면 1, 2, 3이 반환됩니다. 각 프라미스는 배열을 구성하는 요소가 됩니다.
//alert[1,2,3]

https://ko.javascript.info/promise-api

요소로 받은 promise 중 하나가 rejected 상태가 되는 경우, Promise.all이 반환하는 프라미스는 에러와 함께 바로 거부된다.
해당 promise의 .catch 메서드가 실행되고 그 결과가 Promise.all의 전체 결과가 된다.