프로그래머스 데브코스 TIL - Day 12

✅ 학습 목차

- [DAY 12] VanillaJS를 통한 자바스크립트 기본 역량 강화 (4)

 

✅ 새롭게 학습한 부분

- Callback

- Promise

- async await

 

---

Callback

다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생하거나

특정 시점에 도달했을 때 매개변수로 전달된 함수가 다시 호출 되는 것을 의미한다.

 

비동기 처리를 위한 콜백 패턴의 단점

콜백 헬 문제

비동기를 위한 콜백함수는 비동기의 처리 결과를 외부에서 꺼내 쓸 수 없다.

그렇기 때문에 비동기 함수를 범용적으로 사용하려면 비동기 처리 결과에 대한 내용을

콜백 함수를 사용하여 전달해야 한다.

비동기 함수의 결과에 대한 후속 처리를 많이 해주어야 할 경우

콜백함수의 중첩이 많아지고 콜백 헬이 발생할 수 있다.

 

에러 처리 문제

const test = () => {
  try {
    setTimeout(() => {
      throw new Error("Error");
    }, 1000);
  } catch (e) {
    console.log(e, "error message");
  }
};

try에서 발생한 에러가 catch에서 잡히지 않는다.

에러는 호출자 방향으로 전파되는데 setTimeout는 호출자가 없다. 

* setTimeout의 콜백함수가 실행될 때 해당 콜백함수는 콜스택의 가장 아래에 존재하며

setTimeout 함수는 콜스택에서 제거된 상태이기 때문

 

 

 

promise

promise보다 async await을 먼저 접하다보니 조금 헷갈렸었던 개념이다.

promise를 new연산자와 함께 호출하면 promise객체를 생성한다.

const test = () => {
  return new Promise((resolve, reject) => {
    resolve("완료");
  });
};

console.log(test()); // Promise {<fulfilled>: '완료'}

promise 생성자 함수는 콜백함수를 인수로 받으며 resolve와 reject를 함수로 전달받는다.

완료 되었으면 resolve, 에러를 발생해야 한다면 reject를 사용할 수 있다.

 

promise로 정의된 작업끼리는 then으로 연결해서 처리할 수 있다.
= promise 객체를 리턴하면 then chaining이 가능

const test = () => {
  return new Promise((resolve, reject) => {
    resolve("완료");
  });
};
const test2 = () => {
  return new Promise((resolve, reject) => {
    reject("실패");
  });
};

test().then((res) => console.log(res)); // 완료

test2()
  .then(console.log)
  .catch((e) => console.log(e)); // 실패

catch를 사용하여 reject의 값을 반환할 수 있다.

 

 

async await

 

promise를 사용한 비동기 코드를 동기코드처럼 보이게 작성하도록 도와준다.

처음에 접했을 때 시간 걸리는 작업을 무조건 기다리게 해주는 줄 알았다..🤣

 

!! async 함수의 반환값은 프로미스 객체이다.

ㄴ 그렇기 때문에 then으로 이어서 사용 가능하다.

const delay1000 = () => {
  return new Promise((resolve) => setTimeout(() => resolve("안녕"), 1000));
};

const test = async () => {
  const hello = await delay1000();
  return hello;
};

console.log(test()); // Promise {<pending>}
test().then((res) => console.log(res)); // 안녕

async await을 사용할 땐 async함수 내에서

try catch로 감싸주어 에러를 처리할 수 있다.

 

---

✍ 느낀 점

오늘은 알고 있었던 부분을 정리를 하듯이 적어보았다.

처음 javascript를 접했을 때 promise라는 개념이 어려웠었는데 그 땐 왜 이렇게 어려웠는지 모르겠다.

기술 면접을 준비하며 callback, promise, async await에 대해 조사해보기도 하고

비동기 로직을 몇번 작성을 해보니 지금은 promise와 async를 구분해서 쓸 수 있고

async로 만든 간단한 코드라면 promise로 만들 수 있게 되었다.

그리고 콜백함수에 대해 알아보면서 비동기 콜백 함수의 에러 처리의 문제에 대해 새로 알게 되었다.

이전에 학습한 이벤트 루프나 콜스택과 관련된 내용이였고

이렇게 연관 되어 있다는 걸 알게되니 머릿속에도 잘 들어오고 재밌는 것 같다👍