[Web] 웹 크롤링을 위한 Fiddler와 Postman 설치 및 사용법

웹 크롤링을 위한 Fiddler와 Postman 설치 및 사용법

웹 크롤링을 진행할 때, 일반적으로 관리자 도구(F12)를 사용하는 경우가 많다. 단순히 웹에서 제공하는 기능이 아닌 관련 프레임워크를 사용하면 더 효율적으로 데이터 수집이 가능하다. 그래서 Fiddler와 Postman에 관해 소개해보려고 한다. 설치 및 사용법 기준은 모두 Window 운영체제를 기준으로 진행한다.

웹 디버깅을 위한 Fiddler 소개 및 설치

Fiddler 소개 및 기능

• Fiddler
  • HTTP 프로토콜을 사용하는 브라우저 및 응용 프로그램을 디버깅할 수 있는 디버거
  • Classic, Everywhere, Cap, Core 총 4개의 버전을 제공하며, 버전 별로 특징과 가격이 다름
  • 웹 크롤링을 진행하기 위한 수단으로 관리자 도구와 비슷하지만, 보기 쉬운 UI를 갖고 있음
• Image, CONNECTs Hide
  • 기본적으로 HTTP 요청 중 하나인 Images 요청이나 관련 요청을 모두 화면에 보여줌
  • 해당 설정을 통해 불필요한 요소를 제거함으로써 빠르게 원하는 API나 HTML 요소를 찾을 수 있음
  • 설정 방법 : menu > Rules > Hide Image Requests, Hide CONNECTs
• Remove All Encoding
  • 브라우저는 빠른 통신을 위해 압축을 활용하므로 Fiddler에서 매번 "Click to Decode"를 눌러 내용 확인 가능
  • 해당 설정을 통해 Fiddler가 압축을 자동으로 Decode하여 사용자에게 제공
  • 설정 방법 : menu > Rules > Remove All Encodings

• Fiddler에서 자주 활용하는 웹 정보
  • Headers : 어떤 Header를 활용해 Request를 보내고, Response를 받았는지 확인 가능
  • WebForms : 해당 Request에 사용된 파라미터(매개변수)를 확인 가능
  • SyntaxView : 해당 Request의 Response 데이터를 확인 가능
  • JSON : 해당 Request의 Response가 JSON일 경우 계층적인 구조로 확인 가능

설치 방법 (Fiddler Classic)

4개의 서비스 중 무료로 사용이 가능한 Classic을 다운로드할 것이다. 참고로 Fiddlcer Classic은 Window 운영체제만 지원하므로 다른 운영체제에서는 사용하기 힘들다. Fiddler 공식 페이지에 접속하여 왼쪽 텍스트 입력 칸에 정보를 간단히 입력 후 "Download For Windows" 버튼을 누르면 Fiddler Classic 다운로드가 가능하다.

Fiddler Classic 다운로드

사용 예시 - 네이버

설치 후 Fiddler를 실행하면 다음 화면을 볼 수 있다. 만약 웹을 실행 중이라면, 왼쪽에 Request 기록이 남는 것을 확인할 수 있다. 가장 먼저, 상단 메뉴의 Rules에서 Hide Image Requests, Hide CONNECTs, Remove All Encodings를 설정한다. 이후 원하는 데이터를 추출하기 위한 Request를 보낼 URL을 탐색한다.

Fiddler 시작 화면

 네이버를 예시로 찾아보자. fiddler를 켠 상태에서 naver에 접속하면 다음과 같이 많은 Request 기록이 된 것을 확인할 수 있다. 여기서  #1 (www.naver.com/)과 #16 (www.naver.com/nvhaproxy/v2/pc/lazy)의 Body (데이터) 크기가 큰 것을 알 수 있다.

Naver 접속 시 Fiddler 화면

#1을 더블 클릭하고 Headers를 보면 GET Method인 것을 알 수 있고, SyntaxView를 보면, 네이버의 html 요소가 포함되어 있다. 즉, "www.naver.com/"에 GET Request를 보내면, html 요소를 Response 받을 수 있는 것이다. 추가로 WebForms를 확인해 보면, 내용이 없기 때문에 해당 Request에 파라미터는 존재하지 않는다.

Headers

SyntaxView

다음으로 #16을 더블 클릭하고 Headers를 보면 GET Method인 것을 확인할 수 있고, SyntaxView를 보면 JSON 형식인 것을 알 수 있다. 즉, " www.naver.com/nvhaproxy/v2/pc/lazy"에 GET Request를 보내면, JSON 요소를 Response 받을 수 있는 것이다.  추가로 WebForms를 확인해 보면, 내용이 없기 때문에 해당 Request에 파라미터는 존재하지 않는다.

Headers

JSON

API 테스트를 위한 Postman 소개 및 설치

Postman 소개 및 기능

• Postman
  • API 개발 및 테스트에 사용되는 편리한 도구
  • 특정 URL 및 API에 GET, POST 등의 Request를 진행하고 Response를 받을 수 있음
  • 웹 크롤링을 진행할 때는 Fiddler로 찾은 API 및 URL에서 원하는 요소를 가져오는지 테스트
• Post에서 자주 활용하는 기능
  • Method : GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS 등의 Method 선택 가능
  • Params : 해당 Request에 포함할 파라미터를 작성
  • 유용한 기능이 많이 존재하지만, 크롤링을 위한 기능은 이 정도만 알고 있으면 충분
• 일반적으로 Postman에서 올바른 결과를 얻는다면, 라이브러리를 활용한 크롤링도 올바르게 작동

설치 방법

Postman 공식 페이지에 접속하여 Window 운영체제 클릭 후 다운로드하면 된다.

지원하는 운영체제

Postman 다운로드

사용 예시 - 네이버

설치 후 Postman을 실행하면, 다음 화면을 볼 수 있다. 왼쪽 "Add a Request"를 클릭해 요청을 보낼 준비를 해보자.

Postman 시작 화면

이제 Fiddler로 탐색했던 두 개의 페이지를 Postman을 활용해 올바르게 데이터를 받아오는지 확인해 보자.

#1을 확인해 보면, 다음과 같이 Fiddler에서 확인했던 것과 동일한 Response Body를 갖는 것을 알 수 있다. 

Request

Response Body

다음으로 #16을 확인해 보면, #1과 마찬가지로 Fiddler에서 확인했던 것과 동일한 내용을 Response Body에서 확인 가능하다.

Request

Response Body

Reference

https://hacktagon.github.io/nisam/webdebuger/%EC%B9%9C%EC%A0%88%ED%95%9C-Fiddler-%EC%82%AC%EC%9A%A9%EB%B2%95-1

https://ccomccomhan.tistory.com/148