프록시를 통한 JavaScript 렌더링: 파싱 문제 해결

현대 웹사이트는 콘텐츠 로드에 JavaScript를 적극적으로 사용합니다. 이는 자동화 시 문제를 야기합니다: 일반적인 HTTP 요청은 데이터 대신 빈 페이지를 반환합니다. 프록시 서버가 이 작업을 해결하는 방법과 어떤 도구를 사용해야 하는지 설명합니다.

JavaScript 렌더링의 문제점

requests 또는 curl을 사용하여 웹사이트에 일반적인 GET 요청을 보내면, 브라우저는 빈 컨테이너가 있는 HTML 파일을 받습니다. 실제 콘텐츠는 나중에 JavaScript를 통해 로드됩니다:

• 동적 데이터 로드 — 콘텐츠는 페이지 로드 후 AJAX 요청을 통해 전달됩니다
• 단일 페이지 애플리케이션(SPA) — React, Vue, Angular는 모든 콘텐츠를 클라이언트에서 렌더링합니다
• 봇 방지 — 웹사이트는 실제 브라우저인지 확인하기 위해 의도적으로 JS를 사용합니다
• 지연 로딩(lazy loading) — 이미지와 텍스트는 스크롤할 때만 로드됩니다

결과: 파서는 빈 페이지를 보지만, 브라우저에서는 모든 것이 정상적으로 표시됩니다. 이를 렌더링 문제라고 합니다.

프록시가 도움이 되는 이유

프록시 자체는 JavaScript를 렌더링하지 않습니다. 하지만 두 가지 중요한 문제를 해결합니다:

1. IP 차단 우회

웹사이트는 IP 주소로 자동 요청을 차단합니다. 하나의 IP에서 수백 개의 요청을 보내면 서버가 차단합니다. 프록시는 실제 IP를 마스킹하고 다양한 주소를 통해 요청을 분산시킵니다. 이를 통해 자동화 브라우저(Selenium, Puppeteer)가 차단 없이 작동할 수 있습니다.

2. 실제 브라우저 모방

프록시를 Puppeteer 또는 Selenium과 같은 도구와 함께 사용하면 시스템이 실제 브라우저처럼 보입니다. 이는 봇 검사를 통과하고 완전히 렌더링된 HTML을 얻는 데 도움이 됩니다.

어떤 프록시를 사용할 것인가

JavaScript 렌더링에는 다양한 유형의 프록시가 적합합니다. 선택은 작업에 따라 다릅니다:

JavaScript 렌더링에 권장: 테스트를 위해 데이터센터로 시작한 후, 웹사이트가 자동 요청을 차단하면 주거용으로 전환하세요.

JavaScript 렌더링 도구

Puppeteer

Chromium 기반의 헤드리스 브라우저입니다. 자동화 및 파싱에 이상적입니다. 구성 매개변수를 통해 프록시와 함께 작동합니다.

Selenium

웹 자동화를 위한 범용 도구입니다. 다양한 브라우저(Chrome, Firefox, Edge)를 지원하며 프록시와 쉽게 통합됩니다.

Playwright

Puppeteer의 현대적 대안으로 Chromium, Firefox 및 WebKit을 지원합니다. 크로스브라우저 테스트에 좋은 선택입니다.

Splash (Scrapy)

경량 JavaScript 렌더링 서비스입니다. 로컬에 배포하거나 클라우드 버전을 사용할 수 있습니다.

코드를 포함한 실제 예제

예제 1: 프록시를 사용한 Puppeteer

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--proxy-server=http://proxy-server:port'
    ]
  });

  const page = await browser.newPage();
  
  // 인증이 필요한 경우 프록시 설정
  await page.authenticate({
    username: 'user',
    password: 'pass'
  });

  await page.goto('https://example.com', {
    waitUntil: 'networkidle2'
  });

  const content = await page.content();
  console.log(content);

  await browser.close();
})();

무엇이 일어나는가:

• --proxy-server — 프록시 서버를 지정합니다
• page.authenticate() — 프록시 자격증명을 전달합니다
• waitUntil: 'networkidle2' — 모든 리소스가 완전히 로드될 때까지 기다립니다

예제 2: Python에서 프록시를 사용한 Selenium

from selenium import webdriver
from selenium.webdriver.common.proxy import Proxy, ProxyType

proxy = Proxy()
proxy.proxy_type = ProxyType.MANUAL
proxy.http_proxy = "proxy-server:port"
proxy.ssl_proxy = "proxy-server:port"

options = webdriver.ChromeOptions()
options.add_argument('--start-maximized')

capabilities = webdriver.DesiredCapabilities.CHROME
proxy.add_to_capabilities(capabilities)

driver = webdriver.Chrome(
  desired_capabilities=capabilities,
  options=options
)

driver.get('https://example.com')
content = driver.page_source
print(content)

driver.quit()

예제 3: 동적 콘텐츠 처리

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 프록시로 초기화
driver = webdriver.Chrome()
driver.get('https://example.com')

# 요소 로드 대기(최대 10초)
element = WebDriverWait(driver, 10).until(
  EC.presence_of_element_located((By.CLASS_NAME, "dynamic-content"))
)

# 렌더링 후 텍스트 추출
data = element.text
print(data)

driver.quit()

모범 사례

1. 프록시 로테이션

모든 요청에 동일한 프록시를 사용하지 마세요. IP 주소를 번갈아 사용하여 차단을 피하세요:

import random

proxies = [
  'http://proxy1:port',
  'http://proxy2:port',
  'http://proxy3:port'
]

selected_proxy = random.choice(proxies)
# 각 요청에 selected_proxy를 사용하세요

2. User-Agent

User-Agent를 변경하여 다양한 브라우저처럼 보이세요:

options = webdriver.ChromeOptions()
options.add_argument('user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36')

3. 요청 간 지연

인간의 행동을 모방하기 위해 무작위 지연을 추가하세요:

import time
import random

time.sleep(random.uniform(2, 5))  # 2-5초 지연

4. 오류 처리

항상 예외를 포착하고 문제를 로깅하세요:

try:
  driver.get(url)
  content = driver.page_source
except Exception as e:
  print(f'오류: {e}')
  # 다른 프록시로 전환하거나 다시 시도하세요

5. 브라우저 종료

사용 후 항상 브라우저를 종료하여 리소스를 해제하세요:

try:
  # 코드
finally:
  driver.quit()  # 오류 발생 시에도 종료를 보장합니다

결론

JavaScript 렌더링은 단순한 기술적 과제가 아니라 현대 웹에서의 필요성입니다. 기억해야 할 사항은 다음과 같습니다:

• 문제: 일반 파서는 JavaScript를 통해 로드된 동적 콘텐츠를 볼 수 없습니다
• 해결책: 자동화 브라우저(Puppeteer, Selenium) + 프록시 서버
• 프록시 선택: 테스트용 데이터센터, 보호된 웹사이트용 주거용
• 모범 사례: IP 로테이션, 지연, 오류 처리, User-Agent

자동화 브라우저와 프록시 서버의 조합을 통해 가장 복잡한 웹사이트에서도 안정적으로 데이터를 수집할 수 있습니다. 도구를 선택할 때 작업의 규모를 고려하세요: 소규모 프로젝트에는 Puppeteer가 적합하고, 대규모 프로젝트에는 Selenium 또는 전문화된 솔루션이 적합합니다.