개요

posomo는 SW마에스트로 13기 연수생들끼리 모여 진행하는 사이드 프로젝트입니다.
다양한 식당 정보를 수집하여 가격대 별로 이용자들에게 제공하는 것을 주요기능으로 기획했습니다.

그러나 식당 정보를 네이버에서 수집하고자하니 어려움이 생겼습니다.
예전과 달리 리뉴얼된 지도는 iframe과 동적 컴포넌트로 인해 크롤러에서 인식이 불가능했습니다.

해결방법

먼저 좌측 검색결과 iframe을 새탭으로 열었습니다.

https://pcmap.place.naver.com/restaurant/list?query=%EA%B0%95%EB%82%A8%20%EC%9D%8C%EC%8B%9D%EC%A0%90&clientX=127.0468034&clientY=37.4959674&x=127.03076501574866&y=37.51730499999978&ts=1672303857393&mapUrl=https%3A%2F%2Fmap.naver.com%2Fv5%2Fsearch%2F%25EA%25B0%2595%25EB%2582%25A8%2520%25EC%259D%258C%25EC%258B%259D%25EC%25A0%2590%2Fplace%2F1724662353%3Fc%3D14141000.0766331%2C4511459.8281494%2C13%2C0%2C0%2C0%2Cdh%26placePath%3D%253Fentry%25253Dbmp#

결과 다음처럼 기존 지도 url이 아닌 네이버 플레이스로 연결되는 것을 확인할 수 있었습니다.

또한 지도 페이지에서 해당 가게이름을 눌렀을 때 나오는 페이지 역시 새탭으로 열었을 때

https://pcmap.place.naver.com/restaurant/1724662353/home?entry=bmp&from=map&fromPanelNum=1&ts=1672307468245

다음과 같이 디테일 뷰로 이동되며 id값을 받는 것을 확인할 수 있었습니다.

따라서 처음 리스트iframe페이지에서 해당 쿼리에 검색어를 수정하여 원하는 목록을 얻고 내부적으로 로딩되는 json에서 가게 id를 추출하여

https://pcmap.place.naver.com/restaurant/:restaurantId/home

형태로 url리스트를 만든 후 해당 페이지에서 크롤링을 하는 과정을 거치기로 했습니다.