동기와 비동기 (Callback,Promise,Async)

wonkeunC·2021년 10월 19일
0

JavaScript

목록 보기
8/15
post-thumbnail

개념 이해하기 Why Async?

Client : 서버로 접속하는 컴퓨터 (우리가 사용하는 컴퓨터)
Server : 무언가 '서비스, 리소스' 따위를 제공하는 컴퓨터. (웹 서버, 게임서버 등)

  • Synchronous 동기적 | 동기적인 처리
  1. Client는 Server에 데이터를 요청한다.
  2. Server는 Client가 요청한 데이터를 데이터베이스에서 꺼내오기도 하고 데이터를 가공하는 작업을 수행한다.
  3. Server가 데이터를 작업하는 동안 Client는 아무것도 하지 않고 대기한다.
  4. Server가 작업을 완료하고 Client에게 데이터를 보내주면 그제서야 Client는 원래 하려던 작업을 수행을 시작한다.
  • Asynchronous 비동기적 | 비동기적인 처리
  1. Client는 Server에 데이터를 요청한다.
  2. Server은 Client가 요청한 데이터를 보내주기 위한 작업을 수행한다.
  3. Client는 요청한 데이터를 Server가 보내주지 않아도 하려던 작업을 계속 진행한다.
  4. Client는 요청한 데이터를 Server에게 받는 중에도 작업을 진행한다.


동기적으로 Task들을 처리한다고 했을 때 500ms의 긴 시간이 걸린다.
하지만 비동기적으로 Task를 처리했을 때
4가지 Task가 동시에 실행(요청)을 한다. 그중에서 가장 긴 시간이 걸리는 Task가 총 Total time으로 지정이 된다. 이전 기능이 다음 기능을 막지 않고 진행이 되기 때문에 Asynchronous none blocking이라고 부른다.


Synchronous 동기적으로 유튜브 페이지가 실행될 경우.

  • 비디오가 Loading... 일 때 우리는 초록색 박스에 있는 내용들을 이용할 수 없다.

Asynchronous 비동기적으로 유튜브 페이지가 실행될 경우.

  • 비디오가 Loading... 중이어도 초록색 박스 안에 있는 내용물을 이용할 수 있다. (일반적)

비동기를 제어할 수 있는 3가지

  1. CallBack
  2. Promise
  3. async/await

1. CallBack

📝
콜백 함수는 다른 코드의 인자로 넘겨주는 함수이다.
콜백 함수를 넘겨 받은 코드는 이 콜백 함수을 필요에 따라 적절한 시점에 실행할 것이다.
다시 말해서,

콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 동록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.
즉 콜백함수는 콜백함수라는 유니크한 문법적 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분이다.
대표적인 콜백 함수의 사용 예로는 자바스크립트에서 이벤트 핸들러 처리이다.

Async의 순서를 제어하고 싶은 경우 !

📝 예시 1

const printString = (string) => {
   setTimeout(
     () => {
       console.log(string)
     },
     Math.floor(Math.random() * 100) + 1
   )
}

const printAll = () => {
  printString("A")
  printString("B")
  printString("C")
}
printAll();

출력 결과 ->

설명 :
setTimeout 이라는 함수 안에 console.log(string)인 "A","B","C"를 실행도록 하였다.
그 후 const printAll() 함수는 "A","B","C" 순서대로 출력하도록 나열하였다. 하지만 Math.floor(Math.random() * 100) + 1 코드 때문에 "A","B","C"의 출력 순서는 랜덤하게 출력된다.

그렇기 때문에 순차적으로 제어하기 위해 CallBack을 사용한다.


Callback은 특정 일이 끝나면 나를 실행해줘 라는 의미를 가지고 있다.

const printString = (string, callback 🌿) => {
   setTimeout(
     () => {
       console.log(string)
       callback(); 🌿 여기서 callback함수를 실행만 한다 . 
     },
     Math.floor(Math.random() * 100) + 1
   )
}

const printAll = () => {
  printString("A", () => {  // "A"를 실행시키고 Callback () => 을 받아서 넘겨준다.
    printString("B", () => { // "A", Callback ()=> {"B"} A의 callback 함수 안에서 "B"를 실행시킨다.
      printString("C", () => {}) // "B", Callback () => {"C"} B의 callback 함수 안에서 "C"를 실행시킨다. 
    })
  })
}
printAll();

출력 결과 ->

이렇게 Callback을 사용하면 내가 원하는 비동기 Task인 printString() 함수의 순서를 지켜 갈 수 있다.

📝 예시 2

예시 1 코드는 callback 함수를 그냥 실행만 시켜줬다면 예시 2에서는 callback 함수를 인자로 넘겨줄 것이다.

⭐️ callback(err, data);

🧩 Callback error handling Design

const somethingGonnaHappen = callback =>  {  waitingUntilSomethingHappens() ☘️ // setTimeout 처럼 무언가 끝날때 까지 기다린다.
  
  ☘️ // waitingUntilSomethingHappens() 가 잘 동작하면 if문을 동작한다.
if(isSomethingGood) {
  callback(null, something)
  ☘️ // callback에 (null, something)을 넣어준다. 
첫번째 null : err에 대한 값.
두번째 something : waitingUntilSomethingHappens()의 결과 값
}

☘️ // waitingUntilSomethingHappens() 가 오류일 경우
if(isSomethingBad) {
  callback(something, null)
☘️ // err에 대한 값을 첫번째에 넣어준다.
  }
}
🧩 Usage

somethingGonnaHappen((err, data) => {
  if(err) {
     console.log('ERR!!');
     return;
  }
  return data;
})

Callback의 단점

들여쓰기와 디버깅의 어려움
콜백 지옥 : javascript를 이용한 비동기 프로그래밍시 발생하는 고질적인 문제이다.
함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다.

그래서 나온게 Promise 이다.



2. Promise

promise는 기본적으로 콜백과 하는일 동일하다.하지만 아래와 같이 .then()을 호출한다.이는 연속적으로 메소드들을 호출할 수 있다는 장점이 존재한다.따라서 콜백과 기능은 동일하지만 훨씬 간결하고 가독성이 좋아진다.

📝

  • promise는 향후에 언젠가 값을 생산해내는 객체. 값을 받지 못하더라도 그 이유와 에러의 내용을 전달해준다. (resolve,reject)

  • Promise는 약속이다. Promise의 객체가 then() 함수에 넘겨진 파라미터(함수)를 단 한번만 호출하겠다는 약속이라고 생각하면 된다.

  • 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.

$.get('url 주소/products/1', function(response) {
  // ...
});

💡 Promise 기본예제 

promise는 기본적으로 resolve와 reject를 가진다.
resolve : 성공한 비동기 요청을 받아서 반환.
reject : 실패한 비동기 에러를 받아서 반환. 

let myFirstPromise = new Promise((resolve, reject) => { // Promise 생성

  setTimeout(function(){
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});

resolve가 되어서 나오는 값을 받아줘야 하는데 then이 사용된다. resolve --> then

reject가 되어서 나오는 에러 값은 catch이다. reject --> catch

Promise의 세 가지 상태

대기(pending): 비동기 처리의 결과를 기다리는 중
이행(fulfilled): 비동기 처리가 정상적으로 끝났고 결과값을 가지고 있음
거부(rejected): 비동기 처리가 비정상적으로 끝났음

  1. 비동기요청 시작이 들어가면 pending으로 들어간다.(진행중)

🧩 pending 후

  • 비동기요청 완료로 들어 갈 경우(resolve 상태) -> fulfilled -> .then

  • 비동기요청 실패로 들어 갈 경우(reject 상태) -> rejected -> .catch

🔥 then

.then은 프로미스에서 가장 중요하고 기본이 되는 메소드입니다.

promise.then(
  function(result) 
  function(error) 
);

.then의 첫 번째 인수는 프로미스가 이행되었을 때 실행되는 함수이고, 여기서 실행 결과를 받습니다.
.then의 두 번째 인수는 프로미스가 거부되었을 때 실행되는 함수이고, 여기서 에러를 받습니다.

프로미스가 성공적으로 이행된 경우 첫 번째 함수가 실행됩니다.

<let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

// resolve 함수는 .then의 첫 번째 함수(인수)를 실행합니다.
promise.then(
  result => alert(result), // 1초 후 "done!"을 출력
  error => alert(error) // 실행되지 않음
);

프로미스가 거부된 경우에는 두 번째 함수가 실행됩니다.

<let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// reject 함수는 .then의 두 번째 함수를 실행합니다.
promise.then(
  result => alert(result), // 실행되지 않음
  error => alert(error) // 1초 후 "Error: 에러 발생!"를 출력

작업이 성공적으로 처리된 경우만 다루고 싶다면 .then에 인수를 하나만 전달하면 됩니다.

let promise = new Promise(resolve => {
  setTimeout(() => resolve("done!"), 1000);
});

promise.then(alert); // 1초 뒤 "done!" 출력

🔥 catch

에러가 발생한 경우만 다루고 싶다면 .then(null, errorHandlingFunction)같이 null을 첫 번째 인수로 전달하거나 .catch(errorHandlingFunction)를 쓸 수 있습니다. .catch는 .then에 null을 전달하는 것과 동일하게 작동합니다. .catch(f)는 .then(null, f)과 같습니다.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// .catch(f)는 promise.then(null, f)과 동일하게 작동합니다
promise.catch(alert); // 1초 뒤 "Error: 에러 발생!" 출력

🔥 finally

finally() 는 Promise 가 resolve 되던 reject 되던 상관없이 지정된 함수를 실행합니다.
이를 통해 promise 의 결과에 상관없이 동작을 해야할 때 유용하게 구현할 수 있습니다.
해당 예시가 중간에 에러가 발생하고 이를 catch 로 잡아주었어도 finally 는 실행되어 end 를 출력합니다.

const promise = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "First");
});

promise
.then(result => console.log(result))
.finally(()=>console.log("end"));
// First 
// end

+ Promise.all

Pomise.all 은 실무에서 가장 많이 쓰이는 프로미스 메소드입니다.

Promise.all은 요소 전체가 프로미스인 배열을 받고 새로운 프로미스를 반환합니다. 배열 안 프로미스가 모두 처리되면 새로운 프로미스가 이행되는데, 배열 안 프로미스의 결과값을 담은 배열이 새로운 프로미스의 result가 됩니다. 만약 프로미스가 하나라도 거부되면 Promise.all은 즉시 거부되고 배열에 저장된 다른 프로미스의 결과는 완전히 무시됩니다.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); //[3, 42, "foo"]
});

Promise의 단점

Promis도 then과 catch를 통해서 값을 받아주게 되는데 복잡한 코드일 경우에는. then() 굉장히 많아질 수 있고 Callback Hell처럼 Promise Hell이 발생할 수 있다.
그래서 더 보완을 한 것이 Async/await이다.



3. Async/await

📝
async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. (Promise를 기반으로 만들어졌다.)
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

  • 비동기이지만 동기적으로 보이는 수법
  • 프로미스 객체를 반환하는 함수에만 사용할 수 있다.
function fetchItems(){
  return new Promise(function(resolve, reject){
   var items = [1,2,3];
    resolve(items)
  });
}

// 👇 new Promise() 객체를 반환하는 함수를 사용해주는 함수
async function logItems(){
 var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
}

⭐️ await는 promise 객체를 반환하는 함수에 사용할 수 있다.

function fetchItems() 가 new Promise() 객체를 반환하고 있다.

new Promise(resolve,reject) 객체는 (resolve,reject) 를 받아주고 resolve에서는
var items = [1,2,3]을 넣어주고 있다.
// 👇 new Promise() 객체를 반환하는 함수를 사용해주는 함수
async function logItems(){ // 함수 앞에 async를 붙여주고 
 var resultItems = await fetchItems(); // Promise 객체를 반환하는 함수인 fetchItems() 앞에다가는 await을 붙여준다.
  console.log(resultItems); // [1,2,3]
}

⭐️ await은 혼자 사용할 수 없고 async를 붙인 함수 안에서만 사용할 수 있다.
   await가 붙을 수 있는 함수는 new Promise()를 return 하는 함수에 await을 사용한다.

위 코드에서 await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then()등을 사용해야 했을 것이다. 하지만 async await 문법 덕택에 비동기에 대한 사고를 하지 않아도 되었다.

async/await 실용예제

async/await 문법이 가장 빛을 발하는 순간은 여러 개의 비동기 처리 코드를 다룰 때이다.
아래와 같이 각각 사용자와 할 일 목록을 받아오는 HTTP 통신 코드가 있다고 해보자.

function fetchUser() { 
  var url = 'https://jsonplaceholder.typicode.com/users/1'
  return fetch(url).then(function(response) {
    return response.json();
  });
}

function fetchTodo() {
  var url = 'https://jsonplaceholder.typicode.com/todos/1';
  return fetch(url).then(function(response) {
    return response.json();
  });
}

위 함수들을 실행하면 각각 사용자 정보와 할 일 정보가 담긴 프로미스 객체가 반환된다.

자 이제 이 두 함수를 이용하여 할 일 제목을 출력해보겠습니다. 살펴볼 예제 코드의 로직은 아래와 같다.

  1. fetchUser()를 이용하여 사용자 정보 호출

  2. 받아온 사용자 아이디가 1이면 할 일 정보 호출

  3. 받아온 할 일 정보의 제목을 콘솔에 출력

async function logTodoTitle() {
  var user = await fetchUser();
  if (user.id === 1) {
    var todo = await fetchTodo();
    console.log(todo.title); // delectus aut autem
  }
}

logTodoTitle()를 실행하면 콘솔에 delectus aut autem가 출력될 것이다. 위 비동기 처리 코드를 만약 콜백이나 프로미스로 했다면 훨씬 더 코드가 길어졌을 것이고 인덴팅 뿐만 아니라 가독성도 좋지 않는다. 이처럼 async await 문법을 이용하면 기존의 비동기 처리 코드 방식으로 사고하지 않아도 되는 장점이 생긴다.

profile
wonkeunC
개발자로 일어서는 일기
이전 포스트

Prototype, constructor(), super()

다음 포스트

Event Bubbling & e.stopPropagation() in Javascript, React

0개의 댓글