동기(Synchronous) / 비동기(Asynchronous)

동기(synchronous) : 동시에 일어난다는 뜻으로 시작 시점과 완료 시점이 같은 상황

• 간단하고 직관적이지만 결과가 주어질 때까지 다른 작업이 불가능
• 단위처리(transaction)

비동기(asynchronous) : 동시에 일어나지 않는다는 뜻으로 시작 시점과 완료 시점이 같지 않은 상황

• 복잡하지만 결과가 주어지는 동안 다른 작업이 가능해 자원을 효율적으로 사용 가능
• 백그라운드 실행, 로딩 창 등의 작업
• 인터넷에서 서버로 Request를 보내고 Response를 기다리는 작업
• 큰 용량의 파일을 로딩하는 작업

Node.js는 non-blocking하고 비동기적으로 작동하는 런타임

동기 호출

callback in action

• 반복 실행되는 함수(iterator)
• 이벤트체 따른 함수(event handler)

❗️함수 실행을 연결하는 것이 아니라 함수자체를 연결해야 한다.

blocking vs. non-blocking

blocking : 요청에 대한 결과가 동시에 발생 ex)전화 : 하던 일을 멈추고 받아야 함

non-blocking : 요청에 대한 결과가 동시에 발생하지 않음 ex) 문자 : 확인 후, 나중에 답장 가능

비동기 함수 전달 패턴 1 : callback 패턴

비동기 함수 전달 패턴 2 : 이벤트 등록 패턴

비동기의 주요 사례

• DOM Elemnet의 이벤트 핸들러
  • 마우스, 키보드 입력(click, keydown 등)
  • 페이지 로딩(DOMContentLoaded 등)
• 타이머
  • 타이머 API(setTimeout 등)
  • 애니메이션 API(requestAnimationFrame)
• 서버에 자원 요청 및 응답
  • fetch API
  • AJAX(XHR)

Async JavaScript

Node.js : As an asynchronous event-driven JavaScript runtime

Callback

const getDataFromFile = function (filePath, callback) {
  return fs.readFile(filePath, { encoding: 'utf8', flag: 'r' }, (err, data) => {
    callback(err, data === undefined ? null : data);
  });
};

Promise

task 종료 .then task 실행

.catch로 에러 handling

return을 사용해 promise 헬 방지

Promise Chaining

const getDataFromFilePromise = (filePath) => {
  return new Promise((resolve, reject) => {
    const options = { encoding: "utf8", flag: "r" };
    fs.readFile(filePath, options, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};

async await

await을 통해 가독성 Up

const readAllUsersAsyncAwait = async () => {
  const usersStr = [
    await getDataFromFilePromise(user1Path),
    await getDataFromFilePromise(user2Path),
  ];
  return usersStr.map(JSON.parse);
};