TIL - 6주차

TIL 42일차

해시테이블 코드 분석 계속과 Promise, Async

Today’s Key 🔑

해시테이블 코드 문제 해결 완료 - 해당 내용 아래에 정리 예정
promise와 async-await의 개념을 이해하고 정리했다.
toy-algorithm 문제를 풀었다.

해시테이블 스프린트 resize() 메소드에서 발생하는 문제 해결하기

문제 : 리사이즈 대상이 되는 저장소 객체를 insert 메소드가 this로 인식하지 못했다.
문제로 인한 오류 : 리사이징 과정에서 키와 값을 새로운 저장소에 저장하지 못하는 오류.
해결 방안 : apply 메소드를 활용하여 [key, value]로 넘겨줄 this를 인식시키기.

  const backup = this._storage;

  // LimitedArray의 기본 메소드 each로 버켓 각각을 순회
  backup.each((bucket, idx, original)) {

    // original === this._storage 자체
    // idx === this._storage에 키로 존재하는 인덱스들
    // bucket === this._storage[idx]에 해당하는 값들

    if (idx in original) {
      // bucket 내부의 값들을 배열 형태로 순회
      for (let [key, value] of bucket) {

        // this === newLimit이 적용된 스토리지
        // apply 내부의 this는 backup 객체
        this.insert.apply(this, [key, value])
      }
    }
  }

어떻게 보면 배운 내용에서 상당히 쉬운 작업이었을 수 있다. 하지만 this를 인식시켜주지 않아서 발생한 문제는 생각보다 머리를 아프게 만들었다. 이래서 복습이 필요하다!

Async 다루기 02. Promise

프로미스의 개념은 보통 서버에게 데이터를 요청하고 받아오는 과정을 처리하기 위해 사용된다. 그 과정에서 발생할 수 있는 오류를 잡는 목적으로 프로미스를 사용할 수 있다. 이 과정이 비동기적으로 처리되어야 한다. 이제 프로미스를 어떻게 코드로 다뤄야 하는지 알아보자.

프로미스의 3가지 상태

pending : 대기상태. 비동기 로직이 완료되지 않은 상태
fullfilled : 충족상태. 비동기 처리가 완료되어 프로미스 결과값을 반환한 상태
rejected : 실패상태. 비동기 처리에 오류가 있거나 실패한 상태

MDN_Promise 처리

프로미스 사용 구조

우선 프로미스를 선언해보자. 프로미스를 사용하는 방법은 새로운 객체를 생성해주듯이 new 키워드로 프로미스를 선언해주면 된다. 프로미스를 통해서 단어 그대로 ‘약속’을 하는 느낌으로 선언한다. reject 할만한 에러가 없으면 resolve를 호출해준다는 식의 약속이다.

Promise 객체가 생성된 후부터 익명함수로 resolve, reject가 호출되기 전까지 프로미스는 ‘pending’ 상태이다. 이후 비동기 처리에서 오류가 없다면 resolve 함수를 호출하고, 오류가 있다면 reject 함수를 호출하는 ‘fullfilled’ 또는 ‘rejected’ 상태가 된다.

const promise = (parameter) => {
  // return new Promise() 형태로 고정된 문법이 있다.
  return new Promise((resolve, reject) => {
    // 비동기성을 알아보기 위해서 setTimeout 함수 사용
    setTimeout(() => {
      // 만약 파라미터가 참이면 해결!
      if (parameter) resolve("I solve it!");
      // 만약 파라미터가 거짓이면 거절!
      else reject(Error("rejected !"));
    }, 3000); // 3초 뒤에 실행해라
  });
};

이제 작성한 비동기 처리(프로미스 구문) 함수를 실행시켜 보자. .then 키워드로 resolve or reject 상황을 구분지어 줄 수 있다. 우리는 보통 .then을 then API라고 한다.

promise() 함수가 호출되면 위의 코드에 의해서 프로미스 객체가 리턴된다. Promise 객체 내부에서 resolve 함수에 넣어준 텍스트가 아래의 then API를 통해서 이행된(fullfilled) 상태로 받아 와지는 구조이다.

반대로 reject() 함수 안에 정의된 오류값은 .catch() 로 잡아낼 수 있다. 프로미스의 사용 방법은 조금 더 공부를 하여서 원만하게 사용할 수 있게 된다면 블로깅을 다시 한 번 해야 할 것 같다.

promise(true).then(
  (text) => {
    console.log(text);
  },
  (error) => {
    console.error(error);
  }
);