[6] 이마트(E-Mart) 매장 조회 크롤링 - 웹페이지 분석[무작정 따라하기 4]

[6] 이마트(E-Mart) 매장 조회 크롤링 - 웹페이지 분석[무작정 따라하기 4]

무작정 따라하기라고 했지만 어떤 방식으로 어떻게 데이터를 조회할 수 있는지 파악하는 과정을 한번 가져보고자 합니다.

시작해보겠습니다.

 

 

 

 

1. 구글 크롬(Chrome)을 실행하여 네이버에 접속합니다.

2. F12 키를 눌러 개발자 도구를 실행합니다. 개발자 도구 메뉴 중 "Network"를 선택하고 인터넷 화면의 "점포찾기"를 클릭하여 이마트 매장조회 화면으로 접속합니다.

 

 

 

 

3. "Network" 탭은 현재 보여지는 인터넷 화면이 전환되며 컨텐츠를 출력하는 모든 과정을 보여주는 화면입니다. 
   emart 로고부터 시작하여 가나다 순 ㄱ,ㄴ,ㄷ,ㄹ 등 까지 모든 요소 하나하나가 출력되는 순서대로 그 과정을 보여줍니다.
   그렇기 때문에 Network 탭은 화면이 바뀔때마다 내용이 변경되고 추가됩니다. 

 

 

 

 

 

4. 이 복잡한 내용들은 다 제쳐두고 우리가 원하는 데이터를 얻기 위해서는 
   "매장을 조회하기 위하여 검색 버튼을 클릭했을 때 어떤 과정으로 매장정보를 가져오는지"를 찾아내야 합니다.

5. F12키를 두 번 눌러서 개발자도구를 재실행하면 초기화된 상태가 됩니다. 그 상태에서 "전체"를 클릭하여 검색을 진행하면 searchList.do라는 jsp 파일이 실행되는 것을 확인할 수 있습니다. Request URL 부분을 더블클릭하면 해당 경로를 호출하여 새로운 웹페이지를 열어볼 수 있습니다.

 

 

 

6. 매장조회에 필요한 데이터는 Payload, Preview, Response 이 3가지 항목만 확인하면 모든 정보를 알 수 있습니다.
Payload는 호출한 jsp 파일(searchList.do)로 보내주는 변수값을 보여주는 화면입니다. 쉽게 말해서 이마트 서버에 "나 이런 조건(전체, 서울, 인천, 경기 등)의 매장들을 조회하고 싶어" 라고 메세지를 전달한다고 생각할 수 있습니다.

   우리는 지역별 매장을 조회를 위하여 크롤링 프로그램을 만들고 있으니 각 지역별로 검색하였을 때 Payload에서 전달하는 변수값의 차이점을 먼저 확인해볼 필요가 있습니다.

 

 

 

 

 

 

7. 전체를 클릭한 경우와 서울을 클릭한 경우를 비교해보면 areaId 값이 차이가 있다는 것을 확인할 수 있습니다.
   이로써 첫번째로 지역별로 매장을 조회하기 위해서는 areaId에 지역을 의미하는 값을 넣어야 지역별로 데이터를
   가져올 수 있다는 것을 확인할 수 있습니다.

 

 

 

 

 

 

8. Preview 에서는 Payload의 요청내용의 결과물을 미리보기와 같이 데이터를 보기 좋게 정렬하여 보여주는 탭입니다.

 

9. Response 에서는 Preview에서 보았던 요청내용의 결과물 원본을 보여주는 탭입니다. 

 

 

 

 

 

10. searchList.do 라는 jsp 파일을 통해 이마트의 매장정보를 조회할 수 있다는 내용을 파악하였습니다. 
    그런데 지역별 매장을 조회하기 위해서는 지역별 코드가 필요합니다. 지역별 코드는 과연 어떻게 가져오는 걸까요?

11. 이마트 점포찾기 화면에서 새로고침(F5)을 하면 다시한번 A to Z까지 모든 출력과정이 Network 탭에 기록이 되는데 
     그 중에서 jsp 파일을 찾아보면 중간에 list.do 라는 jsp 파일을 찾을 수 있습니다. 

12. Preview 탭을 눌러보니 과연 지역코드들도 list로 데이터를 가져오는 방식이였습니다. 

 

 

 

 

13. 이제 이마트 매장조회에 필요한 조건들을 모두 찾아냈습니다. 
     1) 지역별 매장정보 요청방법 : searchList.do > Payload
     2) 지역별 매장정보 확인방법 : searchList.do > Preview 또는 Response
     3) 지역별 코드(조회조건) : list.do

이 세가지를 가지고 Python을 통해 매장정보를 가져올 수 있습니다.

다시 한번 앞단계로 넘어가서 코드들을 보시면 보다 편하게 이해하실 수 있습니다.

 

[1] Python 및 Python 편집기 설치 (tistory.com)

[2] PyCharm 프로젝트 생성 - Hello, PyCharm!! (tistory.com)

[3] STARBUCKS 매장 조회 크롤링 [무작정 따라하기 1] (tistory.com)

[4] STARBUCKS 매장 조회 크롤링 [무작정 따라하기 2] (tistory.com)

[5] 이마트(E-Mart) 매장 조회 크롤링 [무작정 따라하기 3] (tistory.com)

[6] 이마트(E-Mart) 매장 조회 크롤링 - 웹페이지 분석[무작정 따라하기 4] (tistory.com)