📚 1. 동기적 처리와 비동기 처리란 무엇인가?

• 동기(synchronous) : 앞의 일이 끝나야 다음일을 처리할 수 있다.
• 비동기(asynchronous) : 각자의 일을 처리하고 서로에게 영향을 주지 않는다.

사진 참고 : https://velog.io/@hyksmine/call-back..-i4k1xple94

 

✔️ 동기적으로 작업을 처리한다면?

• 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다.
• 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있다.

 

✔️ 비동기적으로 작업을 처리한다면?

• 흐름이 멈추지 않기 때문에 동시에 여러 가지 작업을 처리할 수도 있다.
• 기다리는 과정에서 다른 함수도 호출할 수도 있다.

 

✔️ 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);
}

console.log('작업 시작!');
work();
console.log('다음 작업');

• 첫 번째 파라미터에 넣는 함수를 두 번째 파라미터에 넣은 시간(ms 단위)이 흐른 후 호출해준다.
  • 두 번째 파라미터가 0일 경우, 실제로 4ms 이후에 실행된다.
• setTimeout을 사용하면 정한 작업이 백그라운드에서 수행되기 때문에 기존의 코드 흐름을 막지 않고 동시에 다른 작업을 진행할 수 있다.

 

✔️ 콜백 함수

동기적으로 함수간의 실행 순서를 잡아주는 작업을 하는 함수

function work(callback) {
  setTimeout(() => {
    const start = Date.now();
    for (let i = 0; i < 1000000000; i++) {}
    const end = Date.now();
    console.log(end - start + 'ms');
    callback();
  }, 0);
}

console.log('작업 시작!');
work(() => {
  console.log('작업이 끝났어요!')
});
console.log('다음 작업');

• 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출을 해주는 것

 

✔️ 비동기적으로 처리하는 작업들

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

 

💡 참고
비동기 작업을 다룰 때 Promise, async/await 문법을 사용하여도 처리할 수 있다.

 

 

📚 2. Promise

✔ 프로미스란?
비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6에 도입된 기능

 

✔ Promise 만들기

const myPromise = new Promise((resolve, reject) => {
  // 구현
})

• Promise는 성공할 수도 있고, 실패할 수도 있다.
• 성공할 때, resolve를 호출
• 실패할 때, reject를 호출

ex)

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error());
  },1000);
});

myPromise
	.then(n => {
		console.log(n);
	})
	.catch(error => {
  		console.log(error);
	});

• 작업이 끝나고 나서 또 다른 작업을 해야할 때, Promise뒤에 .then(...)을 붙여서 사용하면 된다.
• 실패했을 경우 reject를 사용하고, .catch 를 통하여 실패했을 시 수행할 작업을 설정할 수 있다.

 

 

📚 3. async/await

async/await 문법은 ES8에 해당하는 문법, Promise를 더욱 쉽게 사용할 수 있게 해준다.

 

✔ 기본적인 사용법

function sleep(ms){
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function process(){
  console.log('안녕하세요');
  await sleep(1000); // 1초 쉬고
  console.log('반갑습니다');
}

process();

• async/await 문법을 사용할 때, 함수를 선언할 때 함수의 앞부분에 async키워드를 붙여준다.
• Promise의 앞부분에 await을 넣어주면 해당 프로미스가 끝날때까지 기다렸다가 다음 작업을 수행할 수 있다.