최신 SPA, PWA 및 AI 기반 동적 사이트를 스크래핑하는 방법

❗ 면책 조항 : 이것은 고급 웹 스크래핑에 대한 6부작 시리즈의 2부입니다. 처음부터 시작하고 싶으신가요? 1부를 읽고 따라잡으세요 !

웹 스크래핑에 관심이 있다면, 아마도 대부분의 일반적인 과제에 대해 이미 잘 알고 있을 것입니다. 하지만 웹이 워프 속도로 변화하면서, 특히 AI 붐 덕분에, 스크래핑 게임에 수많은 새로운 변수가 생겨났습니다. 웹 스크래핑 전문가로 레벨업하려면 모든 변수를 파악해야 합니다! 🔍

이 가이드에서는 고급 웹 스크래핑 기술을 알아보고 SPA, PWA, AI를 혼합한 최신 사이트를 스크래핑하는 방법에 대한 코드를 해독합니다! 💪

SPA, PWA, AI 기반 사이트의 의미는 무엇인가?

옛날에는 웹사이트가 웹 서버에서 관리하는 정적 페이지 모음에 불과했습니다. 지금은 웹이 번화한 대도시와 더 비슷해졌습니다. 🌇

우리는 서버 측에서 클라이언트 측 렌더링으로 도약했습니다. 이유는? 모바일 기기가 그 어느 때보다 강력해져서 일부 부하를 처리하게 하는 것이 합리적이기 때문입니다. 📲

물론, 여러분은 이미 그 모든 것을 알고 계실 겁니다. 하지만 오늘 우리가 있는 곳으로 가려면, 우리가 어디서 시작했는지 알아야 합니다. 오늘날 인터넷은 정적 사이트, 동적 서버 렌더링 사이트, SPA, PWA, AI 기반 사이트 등이 뒤섞인 곳입니다. 🕸️

그리고 걱정하지 마세요. SPA, PWA, AI는 정부 기관의 비밀 약어가 아닙니다. 이 알파벳 수프를 분해해 봅시다. 🥣

SPA: 단일 페이지 애플리케이션

SPA( 단일 페이지 애플리케이션 )는 문자 그대로 한 페이지라는 뜻은 아니지만, 매번 모든 것을 다시 로드하지 않고도 탐색을 처리합니다. 넷플릭스 와 비슷하다고 생각하세요. 클릭하여 귀찮은 페이지 다시 로드 없이 콘텐츠가 즉시 변경되는 것을 지켜보세요. 🍿

매끄럽고 빠르며 흐름에 맞춰 움직일 수 있습니다.

PWA: Progressive Web App

PWA는 스테로이드를 넣은 웹앱과 같습니다. 💊

기술적으로 말하면, PWA( 프로그레시브 웹 앱 )는 최첨단 웹 기능을 사용하여 브라우저에서 바로 네이티브 앱의 느낌을 제공합니다.

• 오프라인 기능? ✅

• 푸시 알림? ✅

• 캐싱을 통한 거의 즉각적인 로딩? ✅

  
  

대부분의 경우, PWA를 기기에 직접 설치할 수도 있습니다!

AI 기반 사이트

AI 기반 사이트는 머신 러닝 마법을 살짝 더해줍니다. 동적으로 생성된 디자인과 챗봇부터 개인화된 추천까지, 이 사이트들은 마치 사이트가 당신을 알고 있는 것 같은 느낌을 줍니다. 🤖 ✨

단순히 탐색하는 것이 아닙니다. 당신에게 맞춰지는 상호작용적인 경험입니다.

재미있는 부분은 다음과 같습니다.

이 카테고리? 상호 배타적이지 않아요!

파르페처럼 레이어링할 수 있습니다. 🍨 PWA는 SPA가 될 수도 있으며, 둘 다 AI를 활용하여 사물을 더 똑똑하고 빠르게 만들 수 있습니다. 그래서, 좀 거칠어질 수도 있죠!

고급 데이터 스크래핑: 오늘날의 웹 정글 탐색

간단히 말해서, SPA, PWA, AI 기반 사이트의 등장으로 웹은 훨씬 더 복잡해졌습니다. 그리고, 맞아요, 즉 웹 스크래핑은 그 어느 때보다 더 어려워졌고 고려해야 할 새로운 요소가 너무 많아졌습니다. 😣

그리고 Web 3.0은 어떨까요? 글쎄요, 웹 스크래핑에 미칠 영향을 말하기에는 아직 이르지만, 일부 전문가들은 이미 추측하고 있습니다…

오늘날 현대 사이트 스크래핑에서 가장 흔하고 성가신 장애물을 우회하는 데 앞서 나가려면 친구 Forrest Knight 의 이 비디오를 시청하세요. 3장에서는 여러분이 찾고 있는 내용을 정확히 다룹니다. 👇

이제 현대 사이트에서 고급 웹 스크래핑을 수행할 때 고려해야 할 사항을 살펴보겠습니다!

⚠️ 경고: 처음 몇 가지 팁이 익숙하게 들린다면 낙담하지 마세요. 계속 읽어나가세요. 더 깊이 들어가면서 새로운 통찰력을 많이 얻을 수 있으니까요! 🧠

AJAX 및 클라이언트 측 렌더링을 통한 동적 콘텐츠

요즘 대부분의 사이트는 JavaScript를 통해 클라이언트 측에서 완전히 렌더링되거나( 클라이언트 측 렌더링 ) 사용자가 페이지와 상호작용할 때 데이터를 로드하거나 페이지의 DOM 을 변경하는 동적 섹션이 있습니다.

지난 10년 동안 브라우저를 사용했다면 우리가 무슨 말을 하는지 알 것입니다. 이 동적 데이터 검색은 마술이 아닙니다. AJAX 기술로 구동됩니다! (아니요, 축구 클럽 Ajax가 아닙니다 🔴⚪—여기에는 다른 종류의 마술이 있습니다 😉)

당신은 아마 이미 AJAX가 무엇인지 알고 있을 것입니다. 하지만 모른다면 MDN 문서가 시작하기에 좋은 곳입니다 . 이제, AJAX가 웹 스크래핑에 큰 도움이 될까요?

Playwright, Selenium 또는 Puppeteer 와 같은 브라우저 자동화 도구를 사용하면 스크립트에 AJAX 요청을 포함하여 브라우저에서 웹페이지를 로드하도록 명령할 수 있습니다. 최고의 헤드리스 브라우저 도구 중 하나를 잡기만 하면 됩니다!

자세한 내용은 Python에서 동적 사이트를 스크래핑하는 방법 에 대한 전체 튜토리얼을 읽어보세요.

🚨 하지만 잠깐만요… 프로 팁이 있어요!🚨

대부분의 AJAX 기반 페이지는 API 호출을 통해 동적 데이터를 가져옵니다. 페이지를 로드하는 동안 브라우저의 DevTools에서 네트워크 탭을 열어 이러한 요청을 포착할 수 있습니다.

다음 중 하나가 표시됩니다.

• 다양한 엔드포인트에 대한 하나 이상의 REST API .

• GraphQL을 사용하여 쿼리할 수 있는 단일 엔드포인트에 대한 하나 이상의 GraphQL API 호출입니다.

  
  

두 경우 모두, 이는 해당 API 호출을 직접 타겟팅하여 스크래핑의 문을 엽니다. 그 데이터를 가로채서 가져오기만 하면 됩니다. 정말 쉽죠! 🎉

빠른 연습을 위해 아래 영상을 시청하세요.

레이지 로딩, 무한 스크롤링 및 동적 사용자 상호 작용

웹 페이지는 그 어느 때보다 더 상호 작용적이며, 디자이너들은 끊임없이 우리의 참여를 유지할 새로운 방법을 실험하고 있습니다. 반면에 무한 스크롤 과 같은 일부 상호 작용은 표준이 되었습니다. (Netflix를 끝없이 스크롤한 적이 있나요? 올바른 시리즈를 확인 하세요!)

그렇다면, 웹 스크래핑에서 그 모든 까다로운 상호작용을 어떻게 해결할까요? 드럼롤... 🥁

브라우저 자동화 도구로! (그래, 또! 🎉)

Playwright 와 같은 가장 현대적인 것에는 일반적인 상호작용을 처리하는 내장된 메서드가 있습니다. 그리고 그들이 다루지 않는 고유한 것이 튀어나오면? 보통 사용자 정의 JavaScript 코드를 추가하여 트릭을 수행할 수 있습니다.

특히:

• Playwright는 사용자 정의 JS를 페이지에서 바로 실행할 수 있는 evaluate() 메서드를 제공합니다.

• Selenium은 브라우저에서 JavaScript를 실행할 수 있는 execute_script()를 제공합니다.

  
  

우리는 당신이 이미 이러한 기본 사항을 알고 있을 것이라는 것을 알고 있으므로 여기서 깊이 파고들 필요는 없습니다. 하지만 전체적인 내용을 알고 싶다면 다음의 완전한 가이드를 참조하세요.

• 극작가 웹 스크래핑
• 셀레늄 웹 스크래핑

PWA의 콘텐츠 캐싱

여기서 흥미로운 일이 벌어집니다! 🌶️

PWA는 오프라인에서 작동하도록 만들어졌으며 캐싱 에 크게 의존합니다. 이는 최종 사용자에게는 좋지만, 새로운 데이터를 검색해야 하기 때문에 웹 스크래핑에 골치 아픈 문제가 발생합니다.

그렇다면 스크래핑할 때 캐싱을 어떻게 처리하나요? 특히 PWA를 다룰 때요? 글쎄요, 대부분의 경우 브라우저 자동화 도구를 사용하게 될 겁니다. 결국 PWA는 일반적으로 클라이언트 측에서 렌더링되거나 동적 데이터 검색에 의존합니다.

좋은 소식? 브라우저 자동화 도구는 실행할 때마다 새로운 브라우저 세션을 시작합니다. 그리고 Puppeteer와 Playwright의 경우 기본적으로 시크릿 모드로 실행됩니다. 하지만 여기에 문제가 있습니다. 시크릿/새로운 세션은 캐시나 쿠키가 없는 것이 아닙니다 ! 🤯

스크래핑 스크립트에서 사이트와 더 많이 상호 작용할수록 브라우저가 요청을 캐싱하기 시작할 가능성이 더 큽니다. 시크릿 모드에서도 마찬가지입니다. 이 문제를 해결하려면 헤드리스 브라우저를 주기적으로 다시 시작할 수 있습니다.

또는 Puppeteer를 사용하면 간단한 명령으로 캐싱을 완전히 비활성화할 수 있습니다 .

 await page.setCacheEnabled(enabled)

하지만 PWA 뒤에 있는 서버가 자신의 쪽에서 데이터를 캐싱한다면 어떨까요? 글쎄요, 그건 완전히 다른 문제죠… 👹

안타깝게도 서버 측 캐싱에 대해 할 수 있는 일은 많지 않습니다. 동시에 일부 서버는 들어오는 요청의 헤더에 따라 캐시된 응답을 제공합니다. 따라서 User-Agent 와 같은 일부 요청 헤더를 변경해 볼 수 있습니다. 🔄

웹 스크래핑을 위한 최고의 사용자 에이전트를 발견하세요!

문맥별 콘텐츠

웹사이트가 왜 당신이 거의 너무 흥미로워하는 콘텐츠를 보여주는지 궁금한 적이 있나요? 그것은 마술이 아니라, 작동하는 머신 러닝입니다. 💡

오늘날 점점 더 많은 웹 페이지가 귀하의 선호도에 맞춰 개인화된 콘텐츠를 제공합니다. 귀하의 검색, 사이트 상호작용, 구매, 조회수 및 기타 온라인 행동을 기반으로 ML 알고리즘은 귀하가 무엇을 좋아하는지 이해하고 웹 페이지는 그에 따라 콘텐츠를 제공합니다 .

유용할까요? 물론입니다. 엄청난 시간 절약! ⏱️

윤리적인가요? 글쎄요, 당신은 그 서비스 약관에 동의했으니... 예라고 합시다. 🤷

하지만 웹 스크래핑의 과제는 다음과 같습니다. 예전에는 사이트가 가끔 HTML 구조를 변경하는 것만 걱정했습니다. 지금은 웹 페이지가 지속적으로 변경되어 방문할 때마다 다른 경험을 제공할 가능성이 있습니다.

그럼, 이걸 어떻게 처리할까요? 일관된 결과를 얻으려면 미리 저장된 세션으로 브라우저 자동화 도구를 시작할 수 있습니다. 이는 콘텐츠가 예측 가능한 상태를 유지하는 데 도움이 됩니다. Playwright와 같은 도구는 이 목적을 위해 BrowserContext 객체도 제공합니다.

 const browserContext = await browser.newContext({ // load the context storage state from a JSON file storageState: "session.json" }); const page = await context.newPage();

개인화된 콘텐츠를 피하려면 언어 및 IP 위치와 같은 매개변수를 표준화하는 것도 목표로 삼아야 합니다. 이러한 매개변수도 표시되는 콘텐츠에 영향을 미칠 수 있기 때문입니다. 🗺️

그리고 마지막 팁을 하나 알려드리겠습니다. 스크래핑하기 전에 항상 시크릿 모드 로 사이트를 검사하세요. 그렇게 하면 개인화된 데이터가 없는 "빈 슬레이트" 세션을 얻을 수 있습니다. 이렇게 하면 사이트에서 일반적으로 제공되는 콘텐츠를 더 잘 이해하는 데 도움이 됩니다. 🥷

AI 생성 사이트 및 웹 페이지

이제, 지금 가장 핫한 주제는 AI 입니다! 🔥

AI는 사이트를 구축하는 방법에 대한 플레이북을 다시 쓰고 있습니다. 몇 달 걸리던 일이 이제는 몇 초 또는 몇 분 만에 이루어집니다! ⏱️

AI 기반 웹 구축 기술이 게임을 어떻게 변화시키고 있는지 간략하게 살펴보려면 다음 영상을 시청하세요.

그 결과? 사이트는 그 어느 때보다 빠르게 레이아웃, 구조, 디자인을 바꾸고 있습니다. 심지어 콘텐츠도 AI 처리를 받고 있으며, 편집자는 엄청난 양의 텍스트, 이미지, 비디오를 순식간에 쏟아내고 있습니다. ⚡

그리고 그것은 단지 시작일 뿐입니다…

사이트에서 클릭하거나 검색한 내용에 따라 동적으로 페이지를 생성할 수 있는 미래를 상상해 보세요. 마치 실시간으로 변형되어 각 사용자에게 적응하는 것과 같습니다.

이 모든 무작위성은 기존 웹 스크래핑 스크립트에 악몽과도 같습니다. 😱

하지만 반대 측면이 있습니다. AI가 웹사이트 업데이트 속도를 높이는 것처럼, AI 기반 웹 스크래핑을 사용하여 스크립트를 즉석에서 조정할 수 있습니다. 더 자세히 알아보고 싶으신가요? 웹 스크래핑을 위한 AI 가이드를 읽어보세요.

특히 오류를 피하기 위한 또 다른 가능한 해결책은 페이지의 변경 사항을 모니터링하고 스크립트가 중단되기 전에 경고하는 독립적인 프로세스를 만드는 것입니다. 예를 들어, Telegram 메시지를 통해. 📩

페이지 변경 Telegram 알림 봇을 만드는 방법을 알아보세요.

AI-봇 탐지: 모든 봇 보호 기술의 어머니

지금까지 다룬 거의 모든 솔루션은 현대 사이트가 매우 상호 작용적이라고 가정합니다. 즉, 스크래핑하려면 브라우저 자동화 도구를 사용해야 합니다. 하지만 이 접근 방식에는 약점이 있습니다. 바로 브라우저 자체입니다!

브라우저는 스크래핑을 위해 만들어지지 않았습니다! 😲

물론, 확장 프로그램(예: Puppeteer Extra )으로 조정하거나 위에서 언급한 모든 조정을 구현할 수 있습니다. 하지만 오늘날의 AI 기반 봇 감지 기능으로 기존 브라우저를 발견하기가 점점 더 쉬워지고 있으며, 특히 사이트가 사용자 행동 분석과 같은 고급 안티 스크래핑 기술을 도입할 때 더욱 그렇습니다.

그럼, 해결책은 무엇일까요? 강력한 스크래핑 브라우저는 다음과 같습니다.

• 실제 사용자와 어울리도록 일반 브라우저처럼 헤드 모드로 실행됩니다.

• 클라우드에서 손쉽게 확장하여 시간과 인프라 비용을 절감할 수 있습니다.

• 가장 크고 안정적인 프록시 네트워크 중 하나의 순환 IP를 통합합니다.

• CAPTCHA를 자동으로 해결하고, 브라우저 지문을 관리하고, 쿠키와 헤더를 사용자 지정하는 동시에 재시도도 처리합니다.

• Playwright, Selenium, Puppeteer와 같은 최고의 자동화 도구와 원활하게 작동합니다.

  
  

이것은 단순한 미래적 아이디어가 아닙니다. 여기 있으며, Bright Data의 Scraping Browser가 제공하는 바로 그것입니다. 더 자세히 알아보고 싶으신가요? 이 비디오를 보세요:

마지막 생각

이제 현대적 웹 스크래핑이 요구하는 것이 무엇인지 알게 되었습니다. 특히 AI 기반 SPA와 PWA를 다룰 때 더욱 그렇습니다!

여러분은 분명히 여기서 몇 가지 프로 팁을 얻었지만, 이것은 고급 웹 스크래핑에 대한 6부작 모험의 2부에 불과하다는 것을 기억하세요! 그러니 안전벨트를 매세요. 우리는 더욱 첨단적인 기술, 영리한 솔루션, 내부자 팁을 탐구할 것입니다.

다음 정거장? 더 빠르고 똑똑한 스크래퍼를 위한 최적화 비법! 🚀