31일차, 비동기 타이머API / fs 모듈

2021. 08. 31 화요일

1. Today's Key points!🔑

• Async Javascript
• 타이머 API
• fs모듈

2. 정리해보자!🧹

콜백함수란? 다른 함수의 전달인자로 넘겨주는 함수. 파라미터를 넘겨받는 함수는 콜백 함수를 필요에 따라 즉시 실행(synchoronously)할 수도 있고, 아니면 나중에(asynchoronously) 실행할 수도 있다.

타이머 관련 API : setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 / setInterval(callback, millisecond) 일정 시간의 간격을 가지고 함수를 반복적으로 실행 / clearInterval(timerId) 반복 실행중인 타이머를 종료 / setTimeout에 대응하는 clearTimeout 도 있음.

바로 sprint 과제를 복기해보자

3. Sprint과제 복기!🧐

👉🏻타이머 API

//promiseConstructor.js

//with resolve
const sleep = (wait) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('hello');
      }, wait);
  });
}

//with reject
const sleep = (wait) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('에러'));
      }, wait);
  });
}

//script.js
...
function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
  .then((value) => { //sleep함수 실행된 후에 실행
    console.log(value) //'hello'
    pauseVideo();
    displayTitle();
    return 'world'
  })
  .then((value) => {
    console.log(value); //'world'
    return sleep(500);
  })
  .then(highlightTitle)
  .then(sleep.bind(null, 2000))
  .then(resetTitle)
  .catch(err => {
    console.log(err);
  })
}
...

👉🏻fs모듈

-callback

fs.readFile('test.txt', 'utf8', (err, data) => {
  if (err) {
    throw err; // 에러를 던진다.
  }
  console.log(data);
});
//위의 내용은 fs.readFile 사용법이다.

const getDataFromFile = function (filePath, callback) {
  fs.readFile(filePath, 'utf-8', (err, data) => {
    if(err) callback(err, null); //에러이면 콜백의 첫번째인자에 err를 넣어준다.
    else callback(null, data); //에러가 아니면 콜백의 두번째 인자에 data를 넣어준다.
  })
};
//getDataFromFile 함수를 실행하면 filePath주소를 통해 파일을 받아오고, 에러가있으면 콜백함수 첫번째 인자에 err 파라미터를 전달하고, 에러가 없으면 data를 전달한다.

 

-Promise

const printString = (string) => {
  return new Promise((resolve, reject) => {
  setTimeout(() => { 
    console.log(string)
    resolve()}, 100)
  })
}

const printtAll = () => {
  printString("A")
  .then(() => {
    return printString("B")
  })
  .then(() => {
    return printString("C")
  })
}
//위 내용은 promise사용법이다.
//callback함수와 동일하게 작동하지만, promise를 사용하게 되면 .then을 통해서 callback hell을 방지할 수 있다.

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

-basicChaining

const path = require('path');
const { getDataFromFilePromise } = require('./02_promiseConstructor');

const user1Path = path.join(__dirname, 'files/user1.json');
const user2Path = path.join(__dirname, 'files/user2.json');

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path) // user1Path파일을 받아온다.
  .then((value) => JSON.parse(value)) // 그 다음 parsing을 해주고
  .then(user1 => { //파징된 데이터를 user1이라고 해준다.
    return getDataFromFilePromise(user2Path) // 그 다음 user2Path파일을 받아온다.
    .then(value => JSON.parse(value)) // 그 다음 parsing을 해주고
    .then(user2 => {
      return [user1, user2]; // 한 배열안에 chaning을 해줘서 리턴한다.
    })
  })
}

 

-PromiseAll

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]
//위는 Promise.all 사용법이다.

//promiseAll
const path = require('path');
const { getDataFromFilePromise } = require('./02_promiseConstructor');

const user1Path = path.join(__dirname, 'files/user1.json');
const user2Path = path.join(__dirname, 'files/user2.json');

const readAllUsers = () => {
  const user1 = getDataFromFilePromise(user1Path); //user1Path를 받아와서 user1에 할당시켜준다.
  const user2= getDataFromFilePromise(user2Path);
  return Promise.all([user1, user2]).then((value) => { //Promise.all을 사용해서 user1Path, user2Path를 한 배열에 담아준다.
    return value.map((el) => JSON.parse(el));
  })
}

-asyncAwait

const path = require('path');
const { getDataFromFilePromise } = require('./02_promiseConstructor');

const user1Path = path.join(__dirname, 'files/user1.json');
const user2Path = path.join(__dirname, 'files/user2.json');

const readAllUsersAsyncAwait = async() => { //async라는 표현을 해주어야 await을 사용할 수 있다.
  const user1 = await getDataFromFilePromise(user1Path);
  const user2 = await getDataFromFilePromise(user2Path);
  return [JSON.parse(user1), JSON.parse(user2)]
}