JS의 핵심! : Promise와 async 그리고 await

YouTube Link
	자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)
	https://youtu.be/tJieVCgGzhs
	자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)
	https://youtu.be/JB_yU6Oe2eE
	자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)
	https://youtu.be/aoQSOZfz3vQ

---

동작원리 :  자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)

브라우저는 한줄한줄 읽는다. (파싱(parsing)은 구문 분석이다.) -> 따로 다시 글을 포스팅할 예정이다.

---

 

---

promise : 자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)

---

화살표기법에 완벽한 이해가 없어 보인다. 왜 {}를 사용하면 문제인지 아직 정확히 이유룰 모르겠다. 따라서 이후에 빠르게 화살표기법에 대한 강의를 들을 필요가 있다.

{}가 있는 것과 없는 것의 차이는 바로 함수의 선과 연관이 있다. 왜 함수 표현식을 사용하면 return을 가지지 않고 바로 반환 값을 바로 변수에 담을 수 있기 때문이다. 따라서 위의 코드가 정상적으로 실행이 되기 위해 수정한 코드는 아래와 같다.

const getHen = () => {

  const value = new Promise((resolve, reject) => {

    setTimeout(() => resolve(`Chicken`), 1000);

  })

  return value;

}

const getEgg = hen => {

  const value = new Promise((resolve, reject) => {

    setTimeout(() => resolve(`${hen} => Egg`), 1000);

  })

  return value;

}

const cook = egg => {

  const value = new Promise((resolve, reject) => {

    setTimeout(() => resolve(`${egg} => meal`), 1000);

  })

  return value;

}

getHen()//

  .then(getEgg)

  .then(hen => getEgg(hen))

  .then(egg => cook(egg))

  .then(meal => console.log(meal));

return문을 넣으면 실행이된다. 물론 위의 함수도 화살표이지만 대괄호('{}')를 통해서 함수의 선언을 했기 때문에 return을 사용해야 한다. 따라서 대괄호가 있는 함수선언하고 Promise .then을 사용하면 반환값(return)이 없기때문에 undefined값이 출력되며 Promise는 오류가 난다. 아래 예시 코드와 콘솔을 참고하자

retunr이 없는 반환 되지 않은 함수는 undefined이다.

 

---

Promise 실습 코드 : new Promise

'use strict'

//1.producer : 수행하고 싶은 기능들

const promise = new Promise((resolve, reject) => {

  console.log('doing something..')

  setTimeout(() => {

    //resolve('ellie', console.log('ellie'));

    reject(new Error('no network'));

  }, 2000);

});

//2.consumers:then, catch, finally

//resolve가 되면 then에 넘겨 받아 다음 구문이 실행

promise

  .then(value => {

    console.log(`value : ${value}`);

  })

  .catch(error => {

    console.log(error);

  })

  .finally(() => {

    console.log('finally')

  })

//3. Promise chaining

const fetchNumber = new Promise((resolve, reject) => {

  setTimeout(() => resolve(1), 1000);

});

fetchNumber

  .then(num => num * 2)

  .then(num => num * 3)

  .then(num => {

    return new Promise((resolve, reject) => {

      setTimeout(() => resolve(num - 1), 1000);

    });

  })

  .then(num => console.log(num));

//4.Error Handling

const getHen = () =>

  new Promise((resolve, reject) => {

    setTimeout(() => resolve(`Chicken`), 1000);

  })

const getEgg = hen =>

  new Promise((resolve, reject) => {

    // setTimeout(() => resolve(`${hen} => Egg`), 1000);

    setTimeout(() => reject(new Error(`error! ${hen} => Egg`)), 1000);

  })

const cook = egg =>

  new Promise((resolve, reject) => {

    setTimeout(() => resolve(`${egg} => meal`), 1000);

  })

getHen()

  .then(getEgg)

  .catch(error => {

    return 'bread';

  })

  // .then(hen => getEgg(hen))

  .then(egg => cook(egg))

  .then(meal => console.log(meal));

Promise - JavaScript | MDN

++여기서 더 깊은 Promise를 알아보기 위해선 다음 글인 Promise+Plus 포스팅을 확인하자.

' new Promise()를 반환하고 있지만, 해당 Promise를 반환하지 않고 있기 때문에 외부에서 이 Promise를 사용할 수 없습니다.' 이 말이 이해가 안가.. new Promise()안엔 return이 없는걸 근데 어떤걸 반환한다는 거지?

new Promise()는 Promise 객체를 생성합니다. Promise 객체는 비동기 작업의 결과를 나타내는데, 작업이 성공적으로 완료되면 resolve 콜백을 호출하고 결과값을 전달하고, 작업이 실패하면 reject 콜백을 호출하고 에러를 전달합니다. 위의 코드에서 new Promise((res) => { res("res"); })는 res("res")를 실행하여 "res"라는 값으로 성공적으로 완료된 Promise 객체를 생성하고 있습니다. 하지만 이 Promise 객체를 반환하지 않고 있기 때문에, 외부에서 이 Promise 객체를 사용할 수 없습니다. 따라서, 이 Promise 객체를 반환하도록 수정해야 합니다. 예를 들어 아래와 같이 Promise 객체를 반환하는 함수를 만들 수 있습니다. 이렇게 하면, print() 함수를 호출하여 반환되는 Promise 객체를 다른 함수나 변수에 할당하여 사용할 수 있습니다.

 
Promise+Plus 포스팅에 "new Promise()를 반환하고 있지만, 해당 Promise를 반환하지 않고 있다"의 의미가 무엇인지 파헤쳐보자! 

JS의 핵심 Promise+Plus

---

YouTube Link
	자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6)
	https://youtu.be/e_lU39U-5bQ

Arrow함수 실습 코드

const btn = document.querySelector('#btn');

const arrow = () => console.log("Hello Arrow");

const arrow_0 = () => { console.log("Hello arrow_@@") }

btn.addEventListener('click', arrow);

btn.addEventListener('click', arrow_0);

const add0 = (a, b) => a + b;

const add1 = (a, b) => { a + b };

---

async&await : 자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)

---

비동기	서로 다른일이 동시에 일어난다.(병렬성에 가깝다.)
동기	서로가 될 수 없고 오로지 하나로 묶여 있어서 작업이 순차적일 수 밖에 없다.
스레드(Thread)	프로세스 내에서 실행되는 작은 작업 단위를 말합니다. 각각의 스레드는 독립적인 실행 경로를 가지고 있으며, 하나의 프로세스 내에서 여러 개의 스레드를 생성하여 병렬적으로 작업을 처리할 수 있습니다. 스레드는 작업 공간(Thread Context)을 가지고 있으며, 이 공간은 스레드가 실행될 때 생성되고, 스레드가 종료될 때 소멸됩니다. 이 작업 공간에는 스레드의 실행 상태를 유지하기 위한 레지스터 값, 스택, 동적 할당된 메모리 등이 저장됩니다.

async를 사용하면 promise를 사용하지 않아도 promise가 적용이 된다.

---

async.js 코드 리뷰

console.log("async");

//1.async

//normal function

/*function fetchUser() {

  return 'ellie'

}*/

//promise function

/*function fetchUser() {

  return new Promise((resolve, reject) => {

    resolve('ellie');

  })

}*/

//promise function2

function fetchUser() {

  return new Promise((resolve) => {

    resolve('ellie');

  })

}

//async function

/*async function fetchUser() {

  return 'ellie';

}*/

const user = fetchUser();

user.then(console.log);

// console.log(user);

 

기본적으로 우리는 new Promise를 생성해서 하는 아주 기본적이 형태이다. 딱히 크게 다룰 부분은 없어보인다.

---

async_0.js 코드 리뷰

console.log("async_0");

//1.async

//async function

async function fetchUser() {

  return 'ellie';

}

const user = fetchUser();

user.then(console.log);//이렇게 표기가 되는 것.. 어떻게 되는거지?

// console.log(user);

//2.await

//setTimeout으로 변경해서 해보기

function delay(ms) {

  return new Promise(resolve => setTimeout(resolve, ms))

}

async function getApple() {

  await delay(1000);

  return 'Apple';

}

async function getBanana() {

  await delay(1000);

  return 'Banana';

}

//위 함수와 동일하다

/*function getBanana() {

  return delay(3000)

    .then(() => 'Banana');

}*/

// function pickFruits() {

//   return getApple().then(apple => {

//     return getBanana().then(banana => `${apple} + ${banana}`);

//   })

// }

async function pickFruits() {

  const apple = await getApple();

  const banana = await getBanana();

  return `${apple} + ${banana}`;

}

pickFruits().then(console.log);

 

본격적으로 async를 사용하는데 여기서 async에 promise가 존재하지 않는다. 그 이유는 async내부에 promise가 내장되어있다. 따라서 promise를 생성하지 않아도 알아서 생성이된다.

---

async_1.js 코드 리뷰

console.log("async_0");

//1.async

//async function

async function fetchUser() {

  return 'ellie';

}

const user = fetchUser();

user.then(console.log);

// console.log(user);

//2.await

//setTimeout으로 변경해서 해보기

function delay(ms) {

  return new Promise(resolve => setTimeout(resolve, ms))

}

async function getApple() {

  await delay(1000);

  return 'Apple';

}

async function getBanana() {

  await delay(1000);

  return 'Banana';

}

/*async function pickFruits() {

  const apple = await getApple();

  const banana = await getBanana();

  return `${apple} + ${banana}`;

}*/

//여기서는 apple 1초 + banana 1초 해서 2초 이지만 아래는 1초만에 생성이된다.

/*async function pickFruits() {

  const applePromise = getApple();

  const bananaPromise = getBanana();

  const apple = await applePromise;

  const banana = await bananaPromise;

  return `${apple} + ${banana}`;

}*/

//pickFruits().then(console.log);

//3.useful Promise APIs

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);

---

혼프관련 포스팅에서는 mini프로젝트를 제작하는 포스팅이다. Vanila 서버를 만들어본 포스팅이다.

JS의 핵심! 혼프~ with async&await