크롤링에 대하여

2023. 11. 9. 14:19ㆍ플러터

새로운 앱을 만들기 위해 크롤링 기능을 사용하고자 찾아보았다,

대상은 네이버에서 제공 중인 EPL 구단 순위 ("https://sports.news.naver.com/wfootball/record/index")이며, 해당 페이지의 구단 순위 데이터를 가져오고자 한다.

 

웹 스크래핑을 이용하여 웹 정보를 가져오면 된다하여 해당 코드를 사용했다.

final response = await http.get(Uri.parse('https://m.sports.naver.com/wfootball/record/index'));

if (response.statusCode == 200) {
  final document = parse(response.body);

  // 페이지에서 record_inner 클래스를 가진 요소를 찾습니다.
  final elements = document.querySelectorAll('.record_inner');
}

이렇게 하게될 경우 recode_inner 클래스의 값을 찾아오게 된다.

하지만 위의 코드를 사용해볼 경우 이상이 발견된다,

가져온 값이 <html><div> 이것으로 끝난다는 것이다,

분명 검색해볼 경우에는 개발자도구를 열 경우 나오는 스크립트가 나오던 걸로 기억하는데

내가 잘못한 것인가를 찾아보았으나, 알고보니 동적 데이터의 경우에는 위의 방법으로 못 가져오는 것이였다.

 

*동적 데이터란 값이 실시간으로 변경되는 데이터로, 예를들면 네이버 뉴스 항목이나, 과거 있었던 네이버 실시간 검색어와 같은 데이터들을 의미한다.

 

위의 데이터들은 평범한 웹 크롤링으로는 정보를 못가져옴을 알게되었다.

동적 웹크롤링을 찾아보면 selenium이라는 것들이 나오게 되는데 이건 python에서만 가능한 것이므로 패스하기를 바란다

 

찾은 방법은 Webview위젯을 이용하는 것이다.

WebView(
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
      webViewController.evaluateJavascript('''
        // JavaScript 코드를 여기에 작성
        // rank_list2 클래스의 li 태그 값을 가져오는 스크립트 작성
        var rankList = document.querySelectorAll('.rank_list2 li');
        var rankListValues = [];
        for (var i = 0; i < rankList.length; i++) {
          rankListValues.push(rankList[i].innerText);
        }
        rankListValues.join('|');
        ''');
    },
    javascriptChannels: <JavascriptChannel>[
      JavascriptChannel(
        name: 'ReceiveRankList',
        onMessageReceived: (JavascriptMessage message) {
          final rankListValues = message.message;
          print('Rank List Values: $rankListValues');
        },
      ),
    ].toSet(),
    onPageFinished: (String url) {
      // 페이지가 로드된 후 JavaScript 코드 실행
        webViewController.evaluateJavascript('window.ReceiveRankList(rankListValues);');
      }
    },
  ),

위와 같이 웹뷰 위젯을 이용하여 코드를 가져오면 된다

evaluateJavascript에서 가져올 클래스 및 태그를 지정하여 가져온 후

onPageFinished에서 해당 자바스크립트 코드를 실행시키는 것으로 된다,

다만 onPageFinished에서 evaluateJavascript는 deprecated 되었다고하여 runJavascriptReturningResult 사용을 권장한다고 한다.

 

일단 사용한 방법은 해당 방법이지만 추후에 다른 방법을 알게되면 가져와볼 생각이다

이만~

 

 

 

저작자표시

'플러터' 카테고리의 다른 글

map 함수  (0) 2023.12.01
웹뷰 위젯 분석  (0) 2023.11.10
PreferredSizeWidget 오류에 대하여  (2) 2023.10.30
drawer가 statusbar와 겹칠 경우  (0) 2023.10.29
디버그 리본 제거  (0) 2023.10.29

관련글

티스토리툴바