동기식 처리 모델 vs 비동기식 처리 모델

동기(Synchronous)

동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말함

요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결고가 주어져야한다.

 

사용자가 데이터를 서버에게 요청한다면 그 서버가 데이터 요청에 따른 응답을 사용자에게 다시 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야한다.

 

 

비동기식 처리 모델(Synchronous processting model)

 

예)

브라우저를 실행시키는 시간이 약 10분이 소모된다고 가정했을 시, 브라우저가 실행되는 10분이라는 시간 동안 사용자는 컴퓨터의 다른 프로그램들을 동작 시키지 못하며 브라우저가 켜지는 그 순간만을 계속 기다려야 한다.

이 시간이 10분읻든 100분이든 관계 없이 한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 계속 대기해야 한다.

 

키오스크를 이용하여 한 사람씩 결제하는 정도로 생각하면 될 듯

이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 한다.

자바스크립트는 동기적(synchronous)언어이다.

 

hoisting이 된 후 작성한 순서에 맞춰 동기적으로 실행된다.

*hoisting이란 
코드가 실행하기 전 var, function declaration이 제일 위로 올라간다.
변수 선언 / 함수선언 이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

 

 

 

---

비동기(Asynchronous)

비동기는 동시에 일어나지 않는다

요청한 결과는 동시에 일어나지 않을 것이라는 약속이다.

 

서버에게 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도 되며, 다른 외부 활동을 수행해도 되고

서버에게 다른 요청 사항을 보내도 상관없다.

 

자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer함수(setTimeout, setInterval),Ajax 요청은 비동기식 처리 모델로 동작한다.

비동기식 처리 모델(Asynchronous processing model)

 

🤔비동기 필요성

웹 페이지가 로딩되거나, 어떠한 동작(event) 하나가 30초 이상 걸린다라고 생각했을 때
동기적으로 하면 웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다.

사용자들은 빠른 응답을 주는 웹 사이트를 원하기 때문에 자바스크립트가 웹 사이트에서 동작할 때, 비동기적으로 동작할 수 있어야 한다.

 

⚙️비동기 동작 원리

1. Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API(혹은 백드라운드라고도 함)로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.
2. Web API에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 CallBack Queue에 Push된다.
3. 이제 Call Stack이 비었는지 이벤트 루프(Event Loop)가 확인을 하는데 만약 비어있으면, Call Stack에 CallBack Queue에 있는 콜백 함수를 넘겨준다(push)
4. Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다.

❗️Promise

비동기 동작을 다루는 하나의 패턴이다.

어떤 일의 진행 상태를 나타내는 객체로 진행 상태와 값이라는 속성을 가지고 있다.

 

진행상태 : pending -> fulfilled or rejected

resolve, reject는 함수이다.

const promise = new Promise((resolve, reject) => {
	//성공시
    resolve("성공");
    //실패시
    reject(new error("실패"));
    
});

promise
	.then(value => console.log(value))
    .catch(err => console.log(err))

 

❗️async

promise를 깔끔하게 사용할 수 있다.

new promise 객체를 사용하지 않아도 promise를 반환한다.

 

promise인 경우

function fetchUser() {
  //10초씩이나 걸리는 작업;
  return new Promise((resolve,reject)=>{
    resolve('나인');
  })
}

fetchUser().then((who)=>console.log(who))
console.log('두두등장');

 

 

async로 바꾼 경우

async function fetchUser() {
  // 10초씩이나 걸리는 작업;
  return '나인';
}

fetchUser().then((who)=>console.log(who));
console.log('두두등장');

 

❗️await

• async가 붙은 함수 내에서만 사용할 수 있다.
• 동기 함수든 비동기 함수든 앞에 붙일 수 있다.
• await 키워드를 앞에 붙이면 함수가 실행을 끝낼 때 까지 다음 코드는 동작하지 않는다.

Promise만 사용한 경우

// then으로 자꾸 콜백을 해야해요ㅠㅠ
fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

 

async / await를 사용한 경우

// await는 async가 붙은 함수 내에서만 쓸수 있다고 했죠?
async function myFetch() { 
  let response = await fetch('coffee.jpg'); // 오래 걸리니 기다려 주세요.
  let myBlob = await response.blob(); // 오래 걸리니 기다려 주세요.

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');

  image.src = objectURL;
  document.body.appendChild(image);
}

// 호출해볼까요.
myFetch()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

✔️동기와 비동기의 장단점

동기

장점 : 설계가 매우 간단하고 직관적이다.

단점 : 결과가 주어질 때까지 아무것도 못하고 대기해야함

 

비동기

장점 : 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행할 수 있다.

단점 : 동기식보다 설계가 복잡하다.

 

 

 

출처

Javascript 비동기 처리 [Promise, async, await]

 

동기와 비동기의 차이

 

Asynchronous processing model | PoiemaWeb