Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210218_JavaScript09 async, await API, 강의완강

3 분 소요

JavaScript08

  • JavaScript에 대해 공부하기 위해서 유튜브 ‘드림코딩by엘리’ JavaScript 강의를 듣고 글을 쓰고 있다.(강의가 엄청 잘되 있으니 강의를 찾아보자!)




JavaScript async, await API

동기 vs 비동기

  • 동기 사용시 백엔드에서 가져올때 시간이 걸리고 기다려야해서 다음 코드를 진행 못해 사용자는 버벅거림(중간 로딩)을 볼 수 밖에 없음

  • 비동기를 사용해서 요청만 해놓고 기다리지 않고 다른 코드를 진행시켜 완료후에 요청한 결과를 전달함

// 동기 사용 
// raccon 표시까지 10초
function fetchUser() { 
    // do network request in 10 sec...
    return 'raccoon'
} 



// 비동기 사용(promise 사용)
// 일단 raccoon이 표시가 됨
function fetchUser() { 
    return new Promise((resolve, reject) => { 
        // do network request in 10 secs...
        resolve('raccoon'); 
    });
}
// promise사용시 꼭 resolve 나 reject로 마무리를 해줘야함 안그러면 계속 pending이고 result도 없음
const user = fetchUser(); 
user.then(console.log);
console.log(user);
  • promise chaning을 계속하면 난잡해질수 있음
  • async 와 await API을 쓰면 동기식 코드 작성 처럼 간편하게 도와줌
    • syntactic sugar :기존의 promise위에 간편한 API를 제공하는 async문 처럼 기존 기능에 간편한 API를 제공하는 것 (e.g class)




async API

  • clear style of using promise
  • promise가 무조건 나쁜건 아니고 상황에 따라 깔끔해 지거나 이해하기 쉬운(가독성 좋은) 코드로 쓰면 됨

  • async는 기존의 함수 선언에 붙여 사용하는데, 붙이면 그 함수안의 코드들을 promise로 만들어주기 때문에 비동기로 만들어 줌

  • Promise -> async

    • 모양만 async고 promise 생성이 생략된것 뿐임
function fetchUser() { 
    return new Promise((resolve, reject) => { 
        // do network request in 10 secs...
        resolve('raccoon'); 
    });
}

async function fetchUser() {
    // do network request in 10 sec...
    return 'raccoon';
}




await API

  • aysnc API를 통해 사용할때, 기본적으로 모두 promise 안에서 실행 되기 때문에 비동기 형태를 가지는데 부분적으로 동기가 필요한 상황도 있음.
  • 위의 이유 때문에 await를 통해 부분적으로 동기로 만들 수 있음.
  • await가 있는 코드는 해당 코드를 실행하여 결과가 나올때 까지 기다림
"producer part"
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
    await delay(2000); // await은 해당 코드가 끝날때 까지 기다려줌 즉, 비동기의 코드를 동기로 해줌
    // throw 'error';
    return '🍎';
}

"비동기를 동기로 활용할 때의 코드 형태"
function getBanana() { 
    return delay(3000)
    .then(() => '🍌');
}
         "VS"
async function getBanana() {
    await delay(1000); 
    return '🍌';
}
    // 위의 chaining 보다 아래 async에서 await를 통해 동기로 활용하여 사용하면 더 쉽게 이해 가능



"consumer part"
"비동기를 동기로 활용할 때의 코드 형태"
function pickFruits() {
    return getApple().then(apple => {
        return getBanana().then(banana => `${apple} + ${banana}`)
    });
}
               "VS"
async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
}
// async 안에서의 await 동기 표현이 더 깔끔함


  • 에러 처리
    • try , catch
async function pickFruits() {
    try {
    const apple = await getApple();
    const banana = await getBanana();
    } catch { 
        return 'error'
    } 
    return `${apple} + ${banana}`;
}




병렬 처리

  • 어차피 바나나, 사과 서로 연관이 안되있기 때문에
  • 기존 처럼 getApple, getBanana를 동기로 연결하면 시간이 많이 들음
  • 데이터 받아오는 것은 비동기를 통해 병렬로 처리하고 할당할때에만 동기로 만들음
  • 시간 절약 좋음
async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
}

async function pickFruits() {
    const applePromise = getApple(); // 병렬로 데이터 받고
    const bananaPromise = getBanana();
    const apple = await applePromise; // 활용할 변수 할당시에는 동기화 시킴
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;
}

pickFruits().then(console.log);




유용한 Promise APIs

  • Promise.All() : promise 배열 전달시 모든 promise들이 병렬적으로 다 받을때 까지 모아줌 (return promise 배열 형태)
  • Promise.race() : promise 배열 전달시 가장 먼저 값을 return 하는 promise만 return
function pickAllFruits() {
    return Promise.all([getApple(), getBanana()]) 
    .then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log);


function pickOnlyOne() {
    return Promise.race([getApple(), getBanana()]); 
}
pickOnlyOne().then(console.log)





노마드 코더 : 바닐라 자바스크립트


js

  • JS : 웹 페이지 내의 이벤트를 위해서 만들음 -> 점점 발전하면서 할수 있는 것이 많아짐 -> 영향력이 강해짐
  • 만들수 있는 것들 : 고퀄- 웹사이트, 웹앱, 모바일 어플리케이션, 비디오 게임, 데스크톱 앱
  • vscode도 js로 만들어짐
  • 모든 기기에는 브라우저가 존재하기 때문에 결국 js가 모두 깔려있고 활용가능해서 엄청난 영향력이다!
  • 리얼타임에도 강함




글을 마치며..

  • 일단 알고 있는 부분이 많아서, 문법은 빠르게 들으면서 보고 직접적으로 js를 통해 만드는 것들을 보고자 한다.
  • 유튜브 드림코딩의 엘리님 강의는 정말로 좋은 강의 였다~ 공짜인게 신기할정도로 잘 알려주셨다. 그동안 python 언어 django도 공부 했는데 django에서 사용되는 html을 보면서 나중에 페이지 내에서의 동적인 요소를 추가하는 방법을 알아보고자 js를 배우기로 했고 js에 대한 문법도 잘 익힌 것 같다. 하지만 js를 어디에서 어떻게 사용되어지는지 확실하게 감이 안와서 노마드 코더님의 강의를 보고자 했다.
  • 노마드 코더님의 강의는 클론 위주라서 프로젝트가 어느정도 들어가 있어서 언어 복습도 할겸 프로젝트에서 어떻게 쓰는지도 볼겸 들어보기로 하였다.
  • 배움에는 끝이 없다. 확실히, python도 정말 좋은 언어지만 javascript도 엄청난 언어 임을 다시금 느끼며 웹에 대한 전체적인 구조를 알아보면 좋을 듯 하다. 그리고 이를 통해서 프로젝트를 진행해 볼 예정이다.

참고