[Javascript] 동기 vs 비동기

Lacey·2023년 4월 6일

JavaScript frontend udemy 한입크기로잘라먹는리액트

basic-javascript

목록 보기

2/3

아래 글은 <한입 크기로 잘라 먹는 리액트> 강의를 참고한 내용입니다.
한입 크기로 잘라 먹는 리액트(React.js)

📌 동기 vs 비동기

✔️ 동기

블로킹 방식이라고 하기도 하며, 먼저 작성된 코드를 다 실행하고 나서 뒤에 작성된 코드를 실행하는 것을 말한다.
동기적 처리는 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 올 스탑되기 때문에, 전반적인 흐름이 느려진다.

💻 예시코드

function one(){
	return 1;
}

function two(){
	return one() + 1;
}

function three(){
	return two() + 1;
}

console.log(three());

✔️ 비동기

논블로킹 방식이라고 하기도 하며, 동기적 작업의 단점을 극복하기 위해 여러 개 작업을 동시에 처리하는 것을 의미한다.
즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행한다.

💻 예시코드

function asyncAdd(a, b, cb){
	setTimeout(()=>{
    	const res = a + b;
      	cb(res);
    }, 3000);
}

asyncAdd(1, 3, (res) => {
	console.log("결과: ", res);
})

✔️ Promise

promise는 비동기 작업의 결과 값을 반환하는 객체이다. 최종 결과가 아닌, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'을 반환한다.

- 비동기 작업의 3가지 상태

Pending(대기): 처리가 안된 상태
Fulfilled(성공): 연산이 성공적으로 완료되어 프로미스 결과값을 반환한 상태
Rejected(실패): 연산이 실패한 상태

💻 예시코드

function isPositiveP(num) {
  const executor = (resolve, reject) => {
    setTimeout(() => {
      if (typeof num === "number") {
        //성공 -> resolve
        resolve(num >= 0 ? "양수" : "음수");
      } else {
        //실패 -> reject
        reject("주어진 값이 숫자형이 아닙니다.");
      }
    }, 2000);
  };

  const asyncTask = new Promise(executor);
}

const result = isPositiveP(101);

result
  .then((res) => {
    console.log("작업성공: ", res);
  })
  .catch((err) => {
    console.log("작업실패: ", err);
  });