TIL(20210727) - 비동기(callback, promise, asyncAwait)

🎁 Today

- javascript 비동기 호출, callback 학습

- Promise, async/await 학습

- Node.js 내장모듈 사용법 학습

🤔 Learned

비동기 콜백함수 사용법

const delay = (wait, callback) => {
  setTimeout(callback, wait);
}

function runCallback() {
  resetTitle();
  playVideo();

  delay(1000, () => {
    pauseVideo();
    displayTitle();

    delay(500, () => {
      highlightTitle();

      delay(2000, resetTitle);
    });
  });
}

Promise 사용법

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

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

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then((param) => {
      console.log(param);
      pauseVideo();
      displayTitle();
      return "world!!!" + param;
    })
    .then((param) => {
      console.log(param);
      sleep(500);
    })
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle)
    .catch(err => {
      console.log(err);
    })
}

 

async/await 사용법

async function runAsync() {
  resetTitle();
  playVideo();

  await sleep(1000);
  pauseVideo();
  displayTitle();

  await sleep(500);
  highlightTitle();

  await sleep(2000);
  resetTitle();
}

 

Node.js - fs 모듈 사용법

const fs = require('fs');

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

 

---

비동기 호출에 대해 학습하면서 느낀 점

많이 복잡하고 어렵지만 이제야 제대로 된 프로그래밍을 배우는 것 같다. 

복습을 확실하게 하지 않고 넘어간다면 나중에 많이 힘들어질 것 같은 파트다.

 

+ 자료구조 공부 미뤄둔 것 해야 하는데 이번 주 중에 해결 해야 할 것 같다.

 

🌈 Tomorrow

- 비동기 복습 

- 토이, 자료구조 밀린 것 조금씩 하기