JavaScript 기초 - 동기 / 비동기 처리 이해

🌈 동기 / 비동기 처리 이해

🔥 동기적와 비동기적 처리

🔥 Promise 문법

1. 동기적와 비동기적 처리

• 동기적 처리(Syncronous) : 코드를 위에서부터 한줄 한줄씩 순차적으로 실행되는 프로세스
• 비동기적 처리(Asynchronous) : 먼저 실행된 코드의 결과와 상관없이 다음 동작을 병렬적으로 처리
• 대부분의 프로그래밍은 동기적 처리가 기본이나, 긴 시간이 소요되는 기능은 비동기적으로 작동할 수 있도록 처리해주어야 함
• 이에 JavaScript에서는 일부 기능에 대해 비동기적으로 처리 가능하도록 추가 기능을 제공함
• 대표적으로 오래 걸리는 처리들은 Rest API 요청, 데이터베이스 처리, 타이머, 암호화/복호화 등이 있고, 이런 작업들은 효율적을 위해 비동기적으로 처리

1) 비동기적 처리의 예시

• setTimeout() 함수 : 🔍 setTimeout((parameter) => { function body }, milliseconds)
• milliseconds 만큼 대기한 후, 함수를 실행
• 아래 예시는 setTimeout을 사용한 예시로, 아래 처럼 사용할 경우 병렬적으로 메뉴 문의와 주문 완료가 진행되어 주문이 받기 전에 메뉴가 접수되는 문제가 발생

console.log('어서오세요.');
setTimeout(()=>{
  console.log('어떤 메뉴로 준비해드릴까요?')
},2000) // 2초 뒤 메뉴 문의
console.log('주문이 완료되었습니다.')
// 어서오세요.
// 주문이 완료되었습니다.
// 어떤 메뉴로 준비해드릴까요?

• 이처럼 함수 호출 후, 결과값을 받지 않은 채로, 다음 코드가 병렬적으로 실행되기 때문에 프로세스의 문제가 생김
• 이를 해결하기 위해서는 콜백 함수를 이용해야 함

console.log('어서오세요.');
function setMenu(callback){
setTimeout(()=>{
  console.log('어떤 메뉴로 준비해드릴까요?')
  callback();
}, 2000);
}
function getMenu(){
console.log('주문이 완료되었습니다.');
}
setMenu(getMenu);
// 어서오세요.
// 어떤 메뉴로 준비해드릴까요?
// 주문이 완료되었습니다.

• 간단한 프로세스일 경우, 콜백함수로 해결할 수 있으나, 콜백함수를 코드의 깊이를 깊게 만들어 가독성이 떨어지기 때문에 Promise 문법을 사용

2. Promise 문법

• Promise 문법은 비동기처리를 할 때 발생하는 콜백함수의 단점(코드의 깊이에 의한 가독성 문제)을 극복하기 위해 만들어짐
• 이에 Promise 문법은 new Promise()로 객체를 생성한 뒤, 객체에서 resolve와 reject 함수를 사용해 비동기 처리를 실행함
• 이후, then메서드를 통해 처리가 성공하면 resolve, 실패하면 reject 함수를 호출하여 Promise 코드를 실행
• then 메서드를 연달아 작성할 수 있기 떄문에 콜백 지옥에서 벗어날 수 있음

// Promise 객체 생성
const promiseObj = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  setTimeout(() => {
    let num = 13;
    if (num >= 11) {
      /* 비동기 작업 성공 */
      resolve(num);
    } else {
      /* 비동기 작업 실패 */
      reject("error");
    }
  }, 1000);
});
// Promise 객체 호출
promiseObj.then(
  /* 비동기 작업 성공 */
  (num) => {
    console.log("success", num);
  },
  /* 비동기 작업 실패*/
  (err) => {
    console.log(err);
  }
); // success 13