크롤링 과정

먼저 이번 미션을 진행하기 위한 네이버에서의 데이터들을 분석하는 과정을 거친 뒤 크롤링을 본격적으로 진행하였다.

1. 자동 롤링 영역

네이버에서의 자동 롤링 영역은 우리의 미션의 요구사항과는 달리 하나의 롤링 영역만을 가지고 있었다. 그리고 자세히 관찰한 결과, 연합뉴스의 최신 뉴스만을 롤링시키는 것을 확인하였다. 해당 영역을 클릭 시 연합뉴스 속보 라는 페이지로 이동하는 것을 확인하였고 자동롤링하는 영역에는 연합뉴스 속보에 있는 기사 제목들이 롤링된다는 것을 확인할 수 있었다. 고로 이 연합뉴스 속보 영역의 내용을 크롤링하면 되겠다는 결론을 내리게 되었다.

IMG_5E48873A3F7C-1.jpeg

위의 사진에서 표시한 영역들의 공통점으로는 nclicks(cnt_flashart)라는 클래스를 가지고 있는 것이였다.

고로 쉽게 querySelectorAll로 가져올 수 있을줄 알았지만

VM862:1 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '.nclicks(cnt_flashart)' is not a valid selector.
    at <anonymous>:1:28

라는 오류로 가져오지 못했다.

이 오류는 (Chat GPT)

클래스 이름에 괄호 **()**가 포함되어 있습니다. 이것은 CSS 클래스 이름의 유효한 문자가 아닙니다.

따라서, .nclicks(cnt_flashart) 대신 .nclicks.cnt_flashart 선택자를 사용해보세요. 이 선택자는 "nclicks"와 "cnt_flashart" 클래스를 모두 가진 요소를 선택합니다.

이렇게 하면 해결된다고 GPT가 알려주었다. 다시 진행한 결과도 역시 실패다… 이게 뭐지 정말 머리아프다.

그래서 그냥 ytn_top이라는 클래스명으로 가져온 뒤, 하단의 ul을 select 해서 크롤링에 성공했다!

이후 왼쪽 롤링바와 오른쪽 롤링바의 데이터가 겹치면 안되고 다른 값을 가지고 롤링해야하기에 Response를

"auto": {
    "message": "요청이 완료되었습니다.",
    "data": {
      "leftRollingData": [
        "납치·살인 3인조 영장심사…'왜 죽였나' 묻자 묵묵부답",
        "납치·살인 주범, 피해자 코인회사 투자 8천만원 손실",
        "역삼동 납치→대전 유성IC 7시간 행적 여전히 미궁",
        "강한 바람에 산불 진압 난항…진화율 홍성 66%·대전 81%",
        "정부, 중장기 가뭄대책…\\"4대강 보 물그릇 최대한 활용\\"",
        "인천 롯데시네마 입점 건물 화재 진화…\\"인명피해 없어\\"",
        "尹대통령 \\"정부, 4·3 희생자·유족 명예회복 위해 최선다할 것\\"",
        "경기도 법카 유용 의혹 제보자, 배모씨 등에 1억 손배소 제기",
        "내일 오후부터 글피까지 전남 최대 80㎜ 등 전국에 '많은 단비'",
        "'정치자금법 위반' 하영제, 영장심사 출석 \\"다 이야기하겠다\\"",
        "\\"수출 여건 여전히 어려워…예산 신속집행·현장애로 해소\\"",
        "3월 5대 은행 가계대출 4.6조원↓…주담대 2개월 연속 줄어",
        "인천 롯데시네마 입점 건물 화재 진화…\\"인명피해 없어\\"",
        "인왕산 불 25시간만에 완진…\\"산세 험해 진압에 애로\\"",
        "인천 롯데시네마 입점 건물 초기진화…\\"인명피해 현재 없어\\""
      ],
      "rightRollingData": [
        "정부, 중장기 가뭄대책…\\"4대강 보 물그릇 최대한 활용\\"",
        "2월 온라인 배달음식 주문 11.5%↓…역대 최대폭 감소",
        "법원, '서해 피격 은폐' 서훈 前안보실장 보석 허가",
        "5급 사무관까지 공모직 확대…인사처 \\"고속 승진 길 열려\\"",
        "인천 롯데시네마 입점 상가건물서 큰불…대응 1단계",
        "[속보] '강남 납치·살인' 추가 공범 살인예비 혐의 입건",
        "[2보] 인천 부평 롯데시네마서 큰불…대응 1단계 발령",
        "[1보]인천 부평 롯데시네마서 불…대응 1단계 발령",
        "홍성·대전 산불 이틀째…헬기 투입되며 진화 속도",
        "서울광장 이태원 공동 분향소 무산…\\"유족 입장 그대로\\"",
        "금리인상 따른 주택가격 하락으로 민간소비 증가속도 둔화 전망",
        "대전조차장역 SRT열차 탈선 원인은 온도상승으로 인한 선로변형",
        "시민단체 \\"공직자 재산 형성과정 철저히 조사·공개해야\\"",
        "한미일, 제주 남방서 대잠전훈련 돌입…北SLBM 대응능력 향상",
        "신복위, 취약계층 채무조정 확대…\\"원리금 상환 부담 완화\\""
      ]
    }
  }

이런식으로 왼쪽, 오른쪽 데이터를 나누어 구성하게 되었다.

언론사 정보 영역

이 정보를 크롤링하는데 제일 많은 시간을 들였던 것 같다. 먼저 내가 처음에 구상했던 API 구성은 grid영역의 내용, list 영역의 내용의 API를 따로 만드는 방법이었다. 하지만 네이버 뉴스스탠드를 분석한 결과 list에 있는 media 내용들로 grid 영역을 모두 구성할 수 있는 점을 발견하였다.

IMG_470B0E51F02D-1.jpeg