[코작作] nodejs 콜백(callback) 비동기 처리 공부!

nodejs 콜백(callback) 비동기 처리 공부!

콜백.pdf

7.28MB

pdf로 보기

 

목표

• 자바스크립트 "비동기"에 대해 레퍼런스를 참고하여 개념을 알아 봅시다.
• 콜백으로 비동기를 처리하는 방법에 대해 간단한 예제를 만들어 보면서 공부합니다.

자바스크립트 비동기

• 아래 코드를 보고 콘솔에 어떻게 출력될 지 생각해 봅시다.

  //* 사용자로부터 str 을 받아 wait 이후에 콘솔로 출력해주는 함수
  const outpuStr = (str, wait) => {
    setTimeout(() => {
      console.log('output:', str);
    }, wait);
  };
  
  outpuStr('1', 1000);
  outpuStr('2', 500);
  outpuStr('3', 100);

• 1 → 2→ 3 순서대로 출력 되었을까요? 🤔

3→2→1 순으로 찍혔네요!

 

• 그러면 아래 코드는 콘솔에 어떻게 출력될까요?

  //* 사용자로보투 str 을 받아 wait 이후에 콘솔로 출력해주는 함수
  const outpuStr = (str, wait) => {
    setTimeout(() => {
      console.log('output:', str);
    }, wait);
  };
  
  console.log('start');
  outpuStr('1', 1000);
  console.log('end');

   

이번에도 순서대로 찍히지 않았네요 @.@

 

• 혹시 wait 시간 때문에 그런 것은 아닐까요? wait 을 0 으로 바꾸어 봅시다.🙃

  //* 사용자로부터 str 을 받아 wait 이후에 콘솔로 출력해주는 함수
  const outpuStr = (str, wait) => {
    setTimeout(() => {
      console.log('output:', str);
    }, wait);
  };
  
  console.log('start');
  outpuStr('1', 0);
  console.log('end');

   

변함이 없군요!

 

 

💡콘솔에 출력해 보면 3 → 2 → 1 & start → end → 1 로 찍히는 것을 알 수 있었습니다.
     왜 이렇게 작동하는 것일까요?
     그 이유는, 자바스크립트는 기본적으로 "싱글 스레드" 로 작동하는 언어이기 때문입니다!

 

• 자세한 내용은 뛰어난 내용을 담고 있는 레퍼런스들을 참고하면서 "싱글스레드, 이벤트루프, 비동기"에 대한 개념을 공부합시다.

자바스크립트 비동기 처리와 콜백 함수

자바스크립트 비동기 처리와 콜백 함수

[JS/Event Loop] 자바스크립트, 이벤트 루프(Event Loop)와 동시성(concurrency)에 대하여

[JS/Event Loop] 자바스크립트, 이벤트 루프(Event Loop)와 동시성(concurrency)에 대하여

https://www.youtube.com/watch?time_continue=622&v=8aGhZQkoFbQ&feature=emb_logo

자막을 켜서 보시면 됩니다

 

• 구글 검색을 해보면 좋은 자료들이 많이 있습니다. 영어로 된 자료도 볼까요? 😎
  
  

https://levelup.gitconnected.com/javascript-and-asynchronous-magic-bee537edc2da

Javascript and Asynchronous Magic — Explaining the JS Engine and Event Loop

 

콜백 비동기 처리

• 자바스크립트 비동기에 대한 개념은 익혀 보셨나요? 그러면 콜백으로 비동기를 처리하는 간단한 예제 코드를 만들어 봅시다.
• 그 전에 레퍼런스를 통해 확인했겠지만, 콜백 함수에 대해 간단하게 알아봅시다.

Callback function

const hello = (nameA, nameB) => {
  console.log(`Hello~ ${nameA}, ${nameB}`);
};

const inputName = callback => {
  const userA = 'sherlock';
  const userB = 'irene';

  callback(userA, userB);
};

 

크롬 웹콘솔에서 실행해 봤습니다~

 

• 함수의 매개 변수에 인자로 다른 함수를 넘겨줄 수 있는데, 그 넘겨주는 함수를 "콜백"이라고 합니다
• 위키 문서를 통해 좀더 엄격한(?) 의미로서의 콜백을 알아봅니다.

콜백

콜백 - 위키백과, 우리 모두의 백과사전

• 콜백은 아래 nodejs 문서에 나와있는 것처럼, 자주 사용하는 패턴이 있는 것 같습니다.

What are callbacks? | Node.js

// 이렇게 많이 사용하는 것 같아요~
function cbPattern(callback) {
  asyncFunction(function(err, data) {
    if (err) {
      return callback(err, null);
    }
    callback(null, data);
  });
}

• 그러면 위 비동기 처리 부분에서 봤던 코드를 순서대로 출력할 수 있게 처리해 봅시다.

• Before code

  //* 사용자로부터 str 을 받아 wait 이후에 콘솔로 출력해주는 함수
  const outpuStr = (str, wait) => {
    setTimeout(() => {
      console.log('output:', str);
    }, wait);
  };
  
  outpuStr('1', 1000);
  outpuStr('2', 500);
  outpuStr('3', 100);
  // 3 -> 2 -> 1

   

• After code

//* 사용자로부터 str 을 받아 wait 이후에 콘솔로 출력해주는 함수
const outpuStr = (str, wait, callback) => {
  setTimeout(() => {
    console.log('output:', str);
    callback();
  }, wait);
};

const process = () => {
  console.log('start');
  outpuStr('1', 1000, () => {
    outpuStr('2', 500, () => {
      outpuStr('3', 100, () => {
        console.log('end');
      });
    });
  });
};

process();

 

순서대로 찍히네요!

 

• 순서대로 찍히는 것을 확인할 수 있습니다. 뭔가 더 복잡해졌네요🤭꼼꼼히, 코드를 다시 살펴보면서 공부합시다.🔥
• 콜백이 조금 익숙해졌다면, nodejs에서 대표적인 비동기 함수인 fs.readFile 을 통해 콜백을 좀더 활용해 봅시다.

fs.readFile 과 fs.readFileSync 다른 것입니다. 우리는 비동기 처리를 공부하고 있으므로 fs.readFile 을 사용합니다. (Sync 는 말 그대로 동기)

• 먼저 fs.readFile 을 사용해 봅시다.
  • 디렉터리에 foo.js 와 hello.txt 를 만들어 어떻게 작동하는 지 확인해 봅니다.

• foo.js
• hello.txt

⇒ hello.txt

안녕하세요? 만나서 반갑습니다.
콜백을 공부하고 있어요.

⇒ foo.js

const fs = require('fs'); 

fs.readFile('./hello.txt', (err, data) => {
  if (err) {
    console.log(err);
    return;
  }

  console.log(data.toString());
});

// $ node foo.js
// 안녕하세요? 만나서 반갑습니다.
// 콜백을 공부하고 있어요.

• fs.readFile 대충 이해가 가시죠? 그러면, 아래 문제를 풀어 보면서 콜백 활용을 익혀 봅시다!

• getSumFromFiles.js
• 100.txt
• 200.txt

⇒ 100.txt

100

⇒ 200.txt

200

⇒ getSumFromFiles.js

const fs = require('fs');

// 파일의 내용을 읽고 숫자로 바꾸어주는 함수입니다.
const getNumber = (filePath, callback) => {
  fs.readFile(filePath, (err, data) => {
    if (err) {
      callback(err, null);
      return;
    }

    const num = Number(data);
    callback(null, num);
  });
};

// 100.txt, 200.txt 각각의 숫자를 가져와서 더해주는 함수입니다.
const sumNumber = (filePathA, filePathB, callback) => {
  // Todo 여기에 코드를 작성해보세요
};

// 콘솔에 'sum: 300' 이 출력되어야 합니다.
sumNumber('./100.txt', './200.txt', (err, data) => {
  if (err) {
    console.log(err);
    return;
  }

  const result = `sum: ${data}`;
  console.log(result);
});

• 100.txt 와 200.txt 에서 각각 숫자를 가져와서, 그 값을 콘솔로 출력해주려고 합니다. Todo 부분에 코드를 작성해 봅니다~✏️(당연히 콜백으로 처리해야 합니다)

• 정답🌟
  (100 퍼센트 아래의 방식이 맞다는 것은 아닙니다 ^^)

    const fs = require('fs');
  
    const getNumber = (filePath, callback) => {
      fs.readFile(filePath, (err, data) => {
        if (err) {
          callback(err, null);
          return;
        }
  
        const num = Number(data);
        callback(null, num);
      });
    };
  
    const sumNumber = (filePathA, filePathB, callback) => {
      getNumber(filePathA, (err, data) => {
        if (err) {
          callback(err, null);
          return;
        }
        const numA = Number(data);
  
        getNumber(filePathB, (err, data) => {
          if (err) {
            callback(err, null);
            return;
          }
  
          const numB = Number(data);
          callback(null, numA + numB);
        });
      });
    };
  
    sumNumber('./100.txt', './200.txt', (err, data) => {
      if (err) {
        console.log(err);
        return;
      }
  
      const result = `sum: ${data}`;
      console.log(result);
    });

• 잘 푸셨나요? 저같은 초심자가 콜백을 이해하기는 쉽지 않은 것 같습니다. 하지만, 예제를 만들고 좋은 레퍼런스들을 보면서 꾸준히 공부하다 보면 실력은 쑥쑥 자랄 거라고 생각합니다 💯

#callback #콜백 #비동기 #싱글스레드