[내일배움캠프] 2023-01-19 TIL

타입스크립트 3일차 - 포켓몬 api 예제에서 동기/비동기 문제

문제점

포켓몬 카드가 새로고침할 때마다 조금씩 순서가 다르게 나타날 때가 있었다.

해결

const fetchData = (): void => {
  for (let i = 1; i <= pokemons; i++) {
    getPokemon(i);
  }
};

위 부분을 아래와 같이 고쳐준다.

const fetchData = async (): Promise<void> => {
  for (let i = 1; i <= pokemons; i++) {
    await getPokemon(i);
  }
};

 

문제가 해결된 결과물~

알게 된 점

동기/비동기 관련 문제는 자바스크립트를 할 때에는 항상 일어날 수 있으니 의도되지 않은 형태로 구현되지 않도록 신경써야 한다(async, await 활용).

 

타입스크립트 4일차 - 포켓몬 api 스크래핑에서 시간 초과 문제

튜터님과 동일하게 코드를 작성 했음에도 시간 초과가 발생했다. 해당 코드는 사이트에서 #100이라는 값을 가지는 엘리먼트가 나타날 때까지 대기하도록 하는데, 이 시간으로는 부족했다. 10000정도로 늘리니 작동 했으며, typescript로 변환하는 과정 후에는 더 늘려야 가능했다.

    await page.waitForFunction(
      () => {
        const cardId = document.querySelector(".card:last-child .card--id");
        return cardId && cardId.textContent === "#100";
      },
      { timeout: 5000 }
    );

 

why???