지난주, 카카오 API와 카카오맵을 활용한 맛집 리뷰 크롤링 실습을 진행했습니다. 이전에 네이버 뉴스 기사를 스크래핑할 때는 HTML에서 직접 데이터를 추출할 수 있었지만, 카카오맵 리뷰 페이지에서는 같은 방식이 통하지 않았습니다. 왜 그런 걸까요?
그 이유는 바로 동기 통신과 비동기 통신의 차이에서 비롯됩니다. 네이버 뉴스 기사의 경우, 서버에서 데이터를 받아올 때 HTML에 필요한 정보가 이미 포함된 상태로 제공되므로, 단순한 스크래핑만으로도 데이터를 쉽게 가져올 수 있습니다. 반면, 카카오맵 리뷰 페이지는 비동기 방식으로 데이터를 불러오기 때문에 HTML에는 리뷰 정보가 포함되어 있지 않습니다. 대신, 추가적인 API 호출을 통해 동적으로 데이터를 로딩하는 방식입니다. 따라서 단순히 HTML을 파싱하는 것만으로는 리뷰 데이터를 가져올 수 없고, 네트워크 요청을 분석하여 데이터를 추출해야 합니다.
이처럼 웹사이트의 데이터 로딩 방식에 따라 크롤링 방법도 달라져야합니다. 단순 HTML 파싱이 어려운 경우, 개발자 도구에서 네트워크 요청을 확인하고 API 호출 방식을 분석해야합니다.
동기 통신
동기 통신은 웹페이지를 새로고침하면서 데이터를 불러오는 방식입니다. 즉, 웹 페이지의 전체를 갱신할 수 있게 해주는 기술이 바로 동기 통신입니다. 요청을 보낸 후에 응답을 받아야 다음 작업을 수행하기 때문에 요청과 응답의 순서를 보장할 수 있습니다. 예를 들어, A와 B라는 두 개의 요청을 보냈으면, 반드시 A의 응답이 먼저 도착하고 B의 응답이 나중에 도착합니다.
비동기 통신
비동기 통신은 동기의 반댓말로, 웹페이지를 새로고침하지않아도 데이터를 불러오는 방식입니다. 즉, 웹페이지의 일부분만 업데이트할 수 있게 해주는 기술이 비동기통신입니다. 요청과 응답이 동시에 일어나지 않아도 되기 때문에 요청을 보낸 후에 다른 작업을 수행할 수 있습니다. 하지만 반대로 말하면, 요청과 응답의 순서를 보장할 수 없다는 단점이 있습니다. 예를 들어, A와 B라는 두 개의 요청을 보냈는데, B의 처리가 더 빨라서 B의 응답이 먼저 도착하는 경우가 있을 수 있습니다. 또한, 전체 페이지를 다시 로딩하지않고 필요한 부분만 업데이트하기 때문에 웹페이지의 속도와 성능을 향상시킬 수 있습니다.
웹의 비동기 처리 기술 Ajax
웹에서 비동기 처리를 구현하는 대표적인 기술이 바로 Ajax(Asynchronous JavaScript and XML)입니다. JavaScript를 이용해 웹 서버와 비동기적으로 통신하고, 전체 페이지를 새로고침하지 않고도 필요한 데이터를 주고받을 수 있도록 하는 기술입니다.
Ajax는 HTTP 프로토콜을 이용한 비동기 통신 방식으로, 이때, HTML, XML, JSON 등의 다양한 형식의 데이터를 교환할 수 있으며, 받아온 데이터를 웹페이지의 특정 부분에 동적으로 삽입하여 갱신할 수 있습니다. 웹페이지가 처음 로드될 때 정적인 HTML과 CSS가 먼저 렌더링됩니다. 이후 JavaScript가 실행되면서 Ajax 요청을 통해 필요한 데이터를 서버에서 받아오고, 이를 특정 HTML 요소에 동적으로 삽입하여 페이지의 일부를 변경합니다.
전체 페이지의 모든 리뷰 가져오기
네트워크 탭에서 Fetch/XHR 요청을 살펴보면, 특정 Request URL로 비동기 API 요청이 이루어지는 것을 볼 수 있습니다. 그런데 후기 더보기 버튼을 눌러보면 새로운 비동기 요청, API 호출이 발생하면서 추가 리뷰가 로딩되는 것을 확인할 수 있습니다. 앞서 설명한 것처럼, 비동기 통신은 추가적인 API 호출을 통해 데이터를 동적으로 로딩하는 방식을 사용하기 때문입니다. 그렇다면, 전체 페이지의 모든 리뷰를 찾고 싶다면 어떻게 해야할까요?
보통은 Selenium 같은 자동화 도구를 활용해 리뷰들을 불러올 수도 있습니다. 하지만, 카카오 리뷰 페이지의 경우 특정 규칙이 존재했습니다. 페이지의 리뷰 리스트 중 맨 마지막 리뷰의 id가 다음 비동기요청의 주소라는 것입니다. hasNext 값을 확인하면, 더 불러올 데이터가 있는지 여부를 알 수 있기 때문에 마지막 리뷰의 id를 추출해 다음 요청을 보내고, hasNext 값이 false가 될 때까지 반복 요청하면 전체 리뷰 데이터를 가져올 수 있습니다. (별거 아니지만 실습 시간에 찾았을 때 너무 기뻤습니다)