비동기 처리의 이해

• 동기적(Synchronous) 처리
  한 작업이 끝나야 다른 작업이 시작된다.
  동시에 여러 작업을 처리할 수 없다.
  
  

• 동기적 처리의 예시
  work() 라는 작업이 끝난 뒤에 다음 작업이 진행된다.

function work() {
  const start = Date.now();
  for (let i =0; i < 1000000000; i++) {

  }
  const end = Date.now();
  console.log(end - start + 'ms');
}

work();
// 루프가 1,000,000,000번 돌고 작업이 얼마나 걸렸는지 알려준다.
// 409ms(계속 값이 바뀐다)
console.log('다음작업');
// work() 라는 작업이 끝난 후에 '다음작업'이 출력됨 - 동기적 처리

• 비동기적(Asynchronous) 처리
  동시에 여러 작업을 처리할 수 있다.
  기다리는 동안 다른 함수를 호출할 수 있다.
  
  

• 비동기적 처리의 예시
  setTimeout을 이용하면 setTimeout으로 설정한 작업이 백그라운드에서 실행기되 때문에 기존 코드의 흐름을 막지 않고 동시에 다른 작업들을 진행할 수 있다.

function work() {
  setTimeout(() => {
    const start = Date.now();
    for (let i =0; i < 1000000000; i++) {

    }
    const end = Date.now();
    console.log(end - start + 'ms');
  }, 0);
  // 0으로 설정했지만 실제로는 4ms 이후에 실행된다.
}

console.log('작업 시작');
// 가장 먼저 출력된다.

work();
// 마지막으로 출력된다.
// 비동기적 처리

console.log('다음 작업');
// 두 번째로 출력된다.

• callback 함수
  만약 work 함수의 작업이 끝난 다음 어떤 작업을 처리하고 싶다면 callback 함수를 이용하면 된다.
  callback 함수란, 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출해주는 것을 의미한다.

function work(callback) {
  // work함수에 callback 함수를 파라미터로 전달해준다.
  setTimeout(() => {
    const start = Date.now();
    for (let i =0; i < 1000000000; i++) {}
    const end = Date.now();
    console.log(end - start + 'ms');
    
    callback();
    //작업이 끝난 후에 callback 함수를 호출한다.
  }, 0);
}

console.log('작업 시작');
// 가장 먼저 출력된다.

work(() => {
  console.log('작업이 끝났어요');
});
// callback 함수에 실행문을 넣어준다.
// work 함수가 작업된 후에 '작업이 끝났어요'가 출력된다.

console.log('다음 작업');
// 두 번째로 출력된다.

• 비동기적으로 처리하는 주요 작업들
  - Ajax Web API 요청: 만약 서버쪽에서 데이터를 받아와야 할 때는 요청을 한 후 서버에서 응답할 때까지 기다려야 하기 때문에 비동기적으로 작업하게 된다.
  - 파일 읽기: 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리한다.
  - 암호화/복호화: 암호화/복호화를 할 때는 어느정도 시간이 걸리는 경우가 있기 때문에 비동기적으로 처리한다.
  - 작업 예약: 단순히 어떤 작업을 일정 시간 후에 스케쥴링 해야 하는 상황에는, setTimeout을 사용하여 비동기적으로 처리한다.