[Javascript] 동기? 비동기? promise? in javascript

studying  · 3 mins read

동기? 비동기?

동기(synchronization)란 동시에 일어난다는 뜻이다. 요청을 하면 시간이 적게 걸리든지 오래 걸리든지 요청한 자리에서 결과가 주어져야 한다.
javascript 엔진은 동기적으로 코드를 수행한다. 즉, 코드에서 위에서 아래로 순서대로 한 줄씩 수행되는데 수행된 후의 결과를 받은 후에 다음 아래 코드가 수행된다.
하지만 시간이 오래걸리는 코드를 비동기적인 처리를 하지 않으면 아주 비효율적이다.
한 줄이 끝나야 그 다음줄로 넘어가는 동기적인 처리를 하게되면 다음과 같은 상황이 발생한다.
백엔드에서 데이터를 가져온 후(10초가 걸린다고 하자) 웹 페이지가 렌더링된다고 할 때 사용자는 10초동안 빈 페이지를 보게 된다.
이러한 경우에서는 비동기식으로 처리할 수 있게 해야한다.

비동기(asynchronization)란 동시에 일어나지 않는다는 뜻이다. 요청을 하면 그 자리에서 결과가 주어지지 않고 결과가 주어지기 전에 다른 요청을 수행할 수 있다.
예를 들어, 서버와 통신하는 동안 다른 작업을 할 수 있게된다.

promise란?

javascript에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object이다.(javascript에 내장되어 있음)
비동기적인 것들을 수행할 때 callback함수 대신에 promise object를 통해서 비동기 코드를 깔끔하게 작성할 수 있다.
정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과값을 전달해주고, 문제가 발생했다면 에러를 전달해준다.

promise의 state

  1. pending: 비동기 처리가 아직 완료되지 않음
  2. fullfilled: 비동기 처리가 완료됨
  3. rejected: 비동기 처리 실패 -> 오류가 발생

사용 예시

promise(Producer) 만들기

const promise = new Promise((resolve, reject) => {
  // executer라는 callback함수
  // heavy work 수행 like network, read files ...
  setTimeout(() => {
    // case 1
    resolve("success!");
    // case 2
    reject(new Error("no network")); // Error라는 class는 js에서 제공하는 object중 하나
  }, 2000);
});

promise 만들자 마자 callback함수인 executer 함수가 호출됨(유의!!)
(사용자가 요구할 때만(예를들어 버튼 누를때만) 서버에서 file을 가져오게 할 때 위 코드처럼 promise를 만들면 불필요한 작업이 진행됨.)

Consumer(promise 사용자)은 then, catch, finally 이용해서 값을 받아올 수 있다.

promise
  .then((value) => {
    // 값이 정상적으로 처리된 경우
    console.log(value); // 'success!' 출력됨
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("항상 호출됨");
  });

prpmise chaining 예시

const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
  .then((num) => num * 2)
  .then((num) => num * 3)
  .then((num) => {
    // 새로운 promise를 return(다른 서버와 통신함)
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000);
    });
  })
  .then((num) => console.log(num))
  .catch((error) => console.log(error));

references

유튜브. (2020.06.18). 자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise프론트엔드 개발자 입문편 (JavaScript ES6) [비디오파일]. 검색경로 https://www.youtube.com/watch?v=JB_yU6Oe2eE