안녕하세요
3번째 웹 백엔드 file system과 call-back에 대해 알아볼 예정입니다~

👀 Call-back이란?

• 자바스크립트에서는 비동기 프로그래밍의 한 가지 방식으로 callback 패턴을 많이 사용
• 콜백 패턴은 비동기 작업이 길어질수록 콜백이 깊어지고, 또한 에러 핸들링 및 디버깅이 어려움

아래를 보시면 콜백 패턴으로 작성한 코드가 있습니다.

이렇게 call-back을 통해서 어떠한 비동기 로직이 끝났을 때 call-back 함수를 실행시킴으로써 비동기 작업이 완료되었을 때 call-back에서 작성한 어떠한 행동을 실행할 수 있게 됩니다.

// 1번 일꾼이 실행되고 나서 2번 일꾼을 실행, 그리고 2번 일꾼 실행 후 3번, 그 다음 4번 실행
/* --------------Start 콜백 지옥---------------- */
/* fs.readFile('readme.txt', 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log('1번 일꾼', data);

  fs.readFile('readme.txt', 'utf-8', (err, data) => {
    if (err) {
      throw err;
    }
    console.log('2번 일꾼', data);

    fs.readFile('readme.txt', 'utf-8', function (err, data) {
      if (err) {
        throw err;
      }
      console.log('3번 일꾼', data);

      fs.readFile('readme.txt', 'utf-8', (err, data) => {
        if (err) {
          throw err;
        }
        console.log('4번 일꾼', data);
      });
    });
  });
}); */
/* --------------End 콜백 지옥---------------- */

🤙 Promise란?

• resolve, reject를 수행
• 비동기 상태를 값으로 다룰 수 있는 객체
• 프로미스를 사용하면 비동기 프로그래밍을 할 때 동기 프로그래밍 방식으로 코드를 작성 가능
• promise를 사용하게 되면 resolve는 성공했을 때, reject는 에러가 발생 했을 때 첫 번째 인자로 어떠한 값을 넘길 수 있음
• resolve는 .then의 첫 번째 인자로, reject는 .catch의 첫 번째 인자로 들어감

async 함수를 실행하면 1초 후 첫 번째 인자에 "1초 후 실행"이 들어간 resolve가 실행이 된다.

이 인자는 .then의 첫번째 인자는 함수이고, 이 함수의 첫 번째 인자로 받아서 콘솔에 찍히게 된다.

위의 콜백 패턴으로 작성된 코드를 promise를 사용하여 다시 짜니 더 가독성 있고 효율적인 코드가 됩니다!

/* -------------------Start Promise를 사용하여 콜백지옥 살려보기---------------- */
/* const fs = require('fs').promises;

//promises라는 객체로 바꿔서 readfile은 알아서 resolve를 해주어서 잘 수행되면 then을 수행, data가 console로 실행
fs.readFile('readme.txt', 'utf-8')
  .then((data) => {
    console.log('1번', data);
    return fs.readFile('readme.txt', 'utf-8');
  })
  .then((data) => {
    console.log('2번', data);
    return fs.readFile('readme.txt', 'utf-8');
  })
  .then(function (data) {
    console.log('3번', data);
    return fs.readFile('readme.txt', 'utf-8');
  })
  .then((data) => {
    console.log('4번', data);
    return fs.readFile('readme.txt', 'utf-8');
  })
  .catch((err) => {
    console.log('error');
    throw err;
  }); */
/* ----------------End Promise를 사용하여 콜백지옥 살려보기------------- */

> call-back과 promise의 차이점

• callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없다.
  하지만 promise를 사용하면 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해진다.

프로미스를 사용하게 되면 프로미스 객체에 비동기가 처리된 결과값이 저장된다. 콜백의 경우 매번 비동기를 실행해야지 그 값을 사용(?)할 수 있지만 프로미스는 .then 메소드를 통해서 저장되어 있는 값을 원하는 때에 사용할 수 있다.

참고영상

자바스크립트의 비동기 방식
https://youtu.be/8aGhZQkoFbQ