[SpringFramework] 스프링에서 Jsoup를 이용해 웹 사이트 크롤링을 해보자 (op.gg 크롤링 하기)

스크랩핑(혹은 웹 스크랩핑)은 인터넷에서 존재하는 데이터를 컴퓨터 프로그램을 통하여 자동화된 방법으로 웹에서 데이터를 수집하는 모든 작업을 말한다. 

 

크롤링은 많은 사람들이 스크랩핑과 혼용하여 사용하고 있지만, 사실은 그 의미가 상이한 용어다.

 

크롤링은 데이터를 수집하고 분류하는 것을 의미하며, 주로 인터넷 상의 웹페이지(html, 문서 등)를 수집해서 분류하고 저장하는 것을 뜻한다. 

 

엄밀히 말해, 크롤링은 데이터의 수집 보다는 여러 웹페이지를 돌아다닌다는 뜻이 강하며, 

데이터가 어디에 저장되어 있는지 위치에 대한 분류 작업이 크롤링의 주요 목적이라 할 수 있다.

 

---

 

먼저, SpringFramework 환경에서 크롤링을 구현하기 위해선 Jsoup 라이브러리를 추가해야한다.

pom.xml을 열어서 해당 라이브러리를 추가시키자

 

<!-- https://mvnrepository.com/artifact/org.jsoup/jsoup -->
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.12.2</version>
        </dependency>

 

이번에는 크롤링한 데이터를 데이터베이스에 입력하는 것이 아닌 JSP 페이지로 가져오는 작업까지만 보일 예정이다.

해당 라이브러리를 추가했으면

 

Controller를 생성하자.

controller 생성 위치

 

package main.com.crawling.controller;
 
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
 
@Controller
public class crawController {
 
    @RequestMapping(value="craw/craw_main.do")
    public String main() {
        return "craw/craw_main";
    }
    
    @RequestMapping(value="craw/craw_select.ajax")
    @ResponseBody
    public Map<String,Object> craw_select(String user_id,HttpServletRequest req,HttpServletResponse resp)throws Exception {
        boolean result =false;
        String url = "https://www.op.gg/summoner/userName="+user_id;
        Document doc =Jsoup.connect(url).get();
        
        Elements ele = doc.select("div.ChampionBox.Ranked");
        
        
        int chamLength = ele.size();
        System.out.println("div개수"+chamLength);
        
             
        
        List<String> NameResult = new ArrayList<>();
        List<String> PlayedResult = new ArrayList<>();
        NameResult.add(ele.select(".ChampionName a").text()); //챔피언 이름
        PlayedResult.add(ele.select(".Played .title").text());
        
        Map<String,Object> resultMap = new HashMap<String,Object>();
        resultMap.put("NameResult", NameResult);
        resultMap.put("PlayedResult", PlayedResult);
            result =true;
        
//        PrintWriter writer = resp.getWriter();
//        resp.setCharacterEncoding("UTF-8"); 
//        resp.setContentType("text/html;charset=UTF-8");
//        writer.println(result);
        
        return resultMap;
    }
}
 

 

 String url = "https://www.op.gg/summoner/userName="+user_id;

에서 확인할 수 있는 것은 op.gg사이트에서 ID를 기준으로 자료를 검색했을 때, 호출 URL을 입력해준다.

 

user_id는 내 JSP 페이지에서 가져올 것이기 때문에, 파라미터에 String user_id라고 입력되어있는 것을 볼 수 있다.

 

 List<String> NameResult = new ArrayList<>();    

        List<String> PlayedResult = new ArrayList<>();

        NameResult.add(ele.select(".ChampionName a").text()); //챔피언 이름

        PlayedResult.add(ele.select(".Played .title").text());  //플레이 수 \

        op.gg 사이트의 html 정보를 보면서 가지고 온 ELEMENT 정보이다.

        ChampionName 클래스 안의 a태그의 글자가 챔피언 이름을 나타낸다는 뜻이다.

        Map<String,Object> resultMap = new HashMap<String,Object>();

        resultMap.put("NameResult", NameResult);

        resultMap.put("PlayedResult", PlayedResult);

 

 

이렇게 가지고온 데이터를 List에 담았다가 Map에 담아 NameResult 값과 PlayedResult 값을 전달해준다.

 

JSP 페이지를 보자

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@include file="../include_page/header.jsp" %>  
 <div class="craw">
     <input type="text" id="craw_id" name="craw_id" class="form-control" placeholder="ID 입력" style="width:300px;"/>
     <input type="button" id="craw_submit" name="craw_submit" class="btn btn-warning" value="조회"/>  
 </div>
 <div class="content_craw">
 </div>
 
 <script type="text/javascript">
     $("#craw_submit").click(function(){
         $.ajax({
             url :"/craw/craw_select.ajax",
             data :{
                 user_id : $("#craw_id").val(),
             },
             dataType : "json",
             type : "post",
             success:function(data){
                console.log(data.NameResult);
                console.log(data.PlayedResult);
                     $(".content_craw").append("<tr><th>"+data.NameResult+"</th><th>"+data.PlayedResult+"</th></tr>");    
                 
             }
         })
     })
 </script>

 

 

위의 Controller를 호출하는 JSP 페이지다.

success 문에 console.log를 찍어보면 아까 전달해준 NameResult 값과 PlayedResult 값이 개발자 도구에 찍히는 것을

확인할 수 있다.

 

데이터를 크롤링해서 온 부분 : 

.데이터 결과물 :

해당 INPUT 태그는 롤 ID값을 입력하면 된다.