💻 Puppeteer로 프로그래머스 문제 제목 & 링크 전체 긁어오기 (CSV 저장까지!)

프로그래머스 코딩테스트는 문제에 번호가 없다.
그래서 내가 어디까지 풀었는지, 오늘은 어디서부터 어디까지 풀지 계획 세우는 게 쉽지 않았다.

매일 딱 30분만 투자해서 문제를 풀고 싶은데…
일단 코딩 기초 트레이닝은 총 124문제뿐이니까
처음엔 그냥 하나씩 받아쓰기해서 목록 만들까 했었다.

근데 문득 생각났다.

“웹스크롤링으로 긁어오면 되잖아?”

사실 웹스크롤링에 대해서는
“뭔가를 긁어오는 거?” 정도만 알고 있었다.
근데 챗GPT랑 같이 얘기하며 코드 짜봤더니
금방 원하는 결과물이 나왔다.
이게 바로… 바이브코딩인가? 😎

---

🎯 목표

• 프로그래머스 코딩 기초 트레이닝 문제 7페이지(총 124문제) 긁어오기
• 제목 + 링크를 모아서 CSV 파일로 저장

---

🧑‍💻 최종 코드

const puppeteer = require("puppeteer");
const fs = require("fs");

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  const allTitles = [];
  const totalPages = 7;

  for (let currentPage = 1; currentPage <= totalPages; currentPage++) {
    const url = `https://school.programmers.co.kr/learn/challenges/training?order=acceptance_desc&languages=javascript&page=${currentPage}`;
    console.log(`📄 페이지 ${currentPage} 로딩 중...`);

    await page.goto(url, {
      waitUntil: "networkidle2",
      timeout: 120000,
    });

    await new Promise((resolve) => setTimeout(resolve, 2000));

    const titles = await page.$$eval("td.title a", (elements) =>
      elements.map((el) => ({
        title: el.innerText.trim(),
        link: el.href,
      }))
    );

    console.log(`✅ 페이지 ${currentPage}에서 ${titles.length}개 수집`);
    allTitles.push(...titles);
  }

  console.log(`\n📦 모든 문제 제목 (총 ${allTitles.length}개):`);
  allTitles.forEach((title, index) => {
    console.log(`${index + 1}. ${title.title}`);
  });

  await browser.close();

  const csvHeader = "번호,제목,링크\n";
  const csvContent = allTitles
    .map((p, i) => `${i + 1},"${p.title}","${p.link}"`)
    .join("\n");
  fs.writeFileSync("programmers_problems.csv", csvHeader + csvContent, "utf-8");

  console.log(`💾 CSV 저장 완료: programmers_problems.csv`);
})();

---

😅 삽질의 시작

🐛 npm init에서 에러 터짐

처음 npm init -y 했더니 이러더라.

npm ERR! Invalid name: "코딩202507"

한글 폴더명 때문에 npm이 삐짐…
바로 폴더명을 coding-2507으로 바꿔서 해결했다.

---

🐌 페이지 로딩 TimeoutError

첫 실행 때 이 에러가 떴다.

TimeoutError: Navigation timeout of 60000 ms exceeded

Puppeteer가 페이지의 모든 요청이 끝나길 기다리느라 타임아웃 걸림.
해결법은 간단했다.

• waitUntil: "networkidle0" → "networkidle2"
• timeout: 120000으로 늘림
• 그리고 headless: false로 실제 브라우저 켜서 동작 확인

---

📄 페이지 1번만 긁힘

아무리 돌려도 1페이지 20문제만 긁힘.
URL에 page=1이 박혀있던 걸 발견하고 for문으로 1~7페이지 순회하도록 수정했다.

for (let currentPage = 1; currentPage <= totalPages; currentPage++) {
  const url = `...page=${currentPage}`;
  await page.goto(url, ...);
}

---

❌ CSV에 undefined 뜸

이번엔 CSV 결과가 이 모양:

"문제제목","function link() { [native code] }"

원인은 두 가지였다.

• el.textContent가 동작 안 함 → 동적 페이지라서
• el.getAttribute("href") 대신 함수 참조가 찍힘

고친 방법:

title: el.innerText.trim(),
link: el.href,

바꿨더니 깔끔하게 제목+링크 출력됨.

---

🚨 ReferenceError: fs is not defined

마지막으로 fs.writeFileSync() 썼더니:

ReferenceError: fs is not defined

fs 모듈을 import 안 해서 생긴 실수였다. 상단에 추가로 해결.

const fs = require("fs");

---

📦 결과물

최종적으로 나온 programmers_problems.csv

번호	제목	링크
1	문자 리스트를 문자열로 변환하기	https://school.programmers.co.kr/learn/courses/30/lessons/181941
2	홀짝에 따라 다른 값 반환하기	https://school.programmers.co.kr/learn/courses/30/lessons/181944

엑셀로 열면 바로 링크 클릭 가능 👍

---

✨ 배운 것

• Puppeteer에서 동적 페이지는 innerText, href로 접근해야 안전
• networkidle2 + setTimeout 조합으로 로딩 안정화
• 페이지네이션은 쿼리 파라미터로 간단히 처리 가능
• npm 패키지 이름은 영어 소문자 + 숫자 + 하이픈만

---