TS, 내가 만든 포켓몬 크롤링 프로그램

TS, 내가 만든 포켓몬 크롤링 프로그램

---

TS, 포켓몬 카드 만들기

 

📌 설치 모듈

  npm i typescript -D
  tsc --init

Live Server 설치

---

📌 async await

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

키워드 약속(Promise)이 해결될 때까지 함수 실행을 일시 중지하기 위해 함수 내에 사용한다.

이렇게 사용해주면 getPokemon(i)의 i값을 순서대로 가져올 수 있다. 

반환값이 없으므로 <void>type의 return값 지정.

 

async function greet() {
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log("Hello, World!");
}
greet();

일반함수 greet()는 함수가 완료될때까지 기다렸다가 사용되므로 1초 후에 Hello, World! 를 기록한다.

 

 

포켓몬스터 카드

---

크롤링? 스크래핑?

크롤링 : URL을 탐색해 반복적으로 링크를 찾고 가져오는 과정

스크래핑 : 우리가 정한 특정 웹 페이지에서 데이터를 추출하는 것

 

📌 크롤링 불법인가?

robots.txt 사용

 

http://내도메인.com/robots.txt

브라우저에 위와 같이 입력 후 robots.txt 문서 확인 가능

 

• User-agent : 다음 규칙이 적용되는 로봇의 이름
• Disallow : 차단한 URL 경로
• Allow : 차단 된 상위 디렉토리의 하위 디렉토리에 있는 URL 경로이며 차단 해제할 디렉토리

 

---

내가 만든 포켓몬 크롤링

 

📌 설치 모듈

npm init -y
// 크롤링을 도와주는 모듈
npm i puppeteer

 

📌 링크 이동

// 링크 이동
await page.goto("http://127.0.0.1:5500");

위에 만든 live server 주소 입력.

 

📄 app.js

  // .card 엘리먼트중에 값이 #100인 .card--id 엘리먼트가 생길때까지 기다림
  await page.waitForFunction(
    () =>
      document.querySelector(".card:last-child .card--id").textContent ===
      "#100",
    { timeout: 5000 }
  );

  // cards 에 모든 카드정보 배열로 저장
  const cards = await page.$$(".card");
  // 100개의 카드가 잘 저장되었는지 확인.
  console.log(cards.length);
  const data = [];

  // cards 돌면서 필요한 데이터 수집
  // data 배열에 수집한 데이터 등록
  for (const card of cards) {
    const id = await card.$eval(".card--id", (el) => el.textContent);
    const image = await card.$eval(".card--image", (el) =>
      el.getAttribute("src")
    );
    const name = await card.$eval(".card--name", (el) => el.textContent);
    const details = await card.$eval(
      ".card--details",
      (el) => el.textContent
    );
    data.push({ id, image, name, details });
  }

  // 페이지와 브라우저 종료
  await page.close();
  await browser.close();

  // data 리턴 => 리턴한 데이터를 받아서 파일로 쓰기 위함.
  return data;

카드에 있는 모든 정보 배열로 저장, 그 정보들을 text 타입으로 변환 시킨 후, data에

{
  id: '#2',
  image: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png', 
  name: 'ivysaur',
  details: 'grass, poison'
}

위와 같은 형태로 push

---

내가 만든 포켓몬 크롤링 TS로 변경

 

📄 app.js

interface ICard {
  id: string;
  image: string;
  name: string;
  details: string;
}

async function scrape(): Promise<ICard[]> {
	// 반환값 에러
	return data:ICard[] = [];
    // 실패하더라도 return 값 지정
    return [];
    
    //anyType Error
    // .card--id 의 값이 #100인 엘레먼트가 나타날때까지 대기
    await page.waitForFunction(
      () => {
        const cardId = document.querySelector(".card:last-child .card--id");
        return cardId && cardId.textContent === "#100";
      },
      { timeout: 10000 }
    );
    
    //anyType Error
    if (id && image && name && details) {
        data.push({ id, image, name, details });
      } else {
        console.log("id, image, name, details 값이 모두 들어오지 않았습니다.");
        return [];
      }
}

 

 

📌 실행

// dist 폴더에 app.js 파일 생성(compile)
tsc

// app.js 실행
node dist/app.js

ts 로 파일 생성 확인