먼저 모바일에서 공유하기 버튼 -> 리다이렉트 -> 서버 -> Puppeteer를 이용해서, 페이지를 렌러딩해서 데이터를 가져옵니다.
리다이렉트를 거쳐 최종적으로 제품 url로 연결합니다.
( https://www.musinsa.com/products/4802987)
페이지 렌더링시
헤드리스 브라우저를 실행합니다.
보안 제약을 안화하는 옵션으로 브라우저를 실행합니다.
헤드리스 브라우저는 어떻게 실행될까?
사용자 인터페이스(GUI) 없이 실행되는 웹 브라우저입니다.
보안제약설정
args: ['--no-sandbox', '--disable-setuid-sandbox']
snadbox 비활성화 이유
- 원격 서버 또는 가상화된 환경에서는 브라우저가 필요한 시스템 리소스에 접근하지 못할 수 있고,
- Chrome이 시스템 리소스에 대한 접근 권한이 제한되어 브라우저가 제대로 실행되지 않을 수 있습니다.
disable-setuid-sandbox 제한 하는 이유 :
- sandbox와 함께 사용, 특정 리눅스 배포판에서 문제를 해결합니다.
사용자 에이전트 설정
await page.setUserAgent(
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
);
사용자 에이전트는 웹 브라우저가 웹 서버에 자신을 식별하는 문자열입니다.
Mozilla/5.0: 대부분의 모던 브라우저가 호환성을 위해 사용하는 레거시 식별자
Windows NT 10.0; Win64; x64: Windows 10 64비트 운영 체제를 나타냄
AppleWebKit/537.36: 사용 중인 WebKit 버전 (Chrome의 렌더링 엔진)
KHTML, like Gecko: 브라우저 렌더링 엔진의 역사적 호환성 표시
Chrome/91.0.4472.124: Chrome 버전 91을 나타냄
- 봇 감지 우회
- 차단 방지
await page.goto(finalUrl, { waitUntil: 'networkidle2', timeout: 30000 });
- 특정 url 이동시, networkidle2 네트워크 활동이 없을때까지 기다립니다.
- timeout : 30000 최대 30초 동안 기다립니다.
await page.evaluate(() => {
window.scrollBy(0, 500);
});
- page.evaluate(): 브라우저 컨텍스트에서 JavaScript 코드를 실행합니다.
이는 마치 브라우저의 개발자 콘솔에서 코드를 직접 실행하는 것과 같습니다. - window.scrollBy(0, 500): 페이지를 아래로 500픽셀 스크롤합니다.
상품명 추출
const productName = await page.evaluate(() => {
const nameElement = document.querySelector(
'.product_title, .sc-1jo9v2i-1',
);
return nameElement ? nameElement.textContent.trim() : '';
});
웹사이트 특정 태그를 선택해서, 원하는 정보를 가져옵니다.
해당 방식으로 리다이렉트 url -> 제품 url -> 크롤링 api 요청하면 원하는 데이터를 얻을 수 있었습니다.
