JAVA]크롤링을 이용하여 웹 텍스트 마이닝 사이트 만들기

국비 지원 교육과정을 수료하고 남는 시간을 이용해서 만들어 볼 것이 뭐가 있을까 생각을 하다가, 

 

우연히 생각난 게 대학교 때, R이라는 툴을 이용해서 텍스트 마이닝을 했던 것이 생각났다.

 

크롤링이 무엇이냐면, 웹 사이트에 존재하는 데이터들을 추출해내는 행위이고,

 

텍스트 마이닝은

이런 사진을 많이 봤을 텐데, 빅데이터에서 많이 사용되는 시각화 기법 중 하나로 특정 분야나 업무 등에서 많이 언급되는 데이터를 나열한 것인데, 많이 언급되는 단어일수록 크기가 커짐으로써, 사용자로 하여금 어떤 데이터가 대세인지 쉽게 알 수 있는 텍스트 기반의 기법이다.

 

---

개발환경

Library : jsoup 1.13.1 , JQuery 3.5.2

build tools : Maven

 

인터넷을 검색하다가 Jsoup라는 웹 크롤링 라이브러리가 있다는 것을 발견하고 바로 실행에 들어갔다.

 

 

 

 

---

설계

1. 사용자에게 웹 사이트 URL을 넣을 수 있는 인풋 박스와 버튼을 제공한다.

2. 사용자가 URL을 넣고 버튼을 누르면 자바스크립트에서는 버튼 온 클릭 함수를 실행하여, 인풋 박스의 value를 AJAX비동기 통신으로 서버 측으로 전송한다.

3. 서버 측은 URL을 받을 컨트롤러를 구성해놓고, URL을 인자로 받아서 JSoup 라이브러리를 사용한다.

4. 수많은 텍스트를 공백 단위로 잘라서 문자열 배열에 담고, 문자열 배열을 리턴한다.

5. 스크립트에서 데이터 요청이 성공하면 배열을 검사해서 같은 단어가 발견되면 폰트 사이즈를 10px씩 증감시킨다.

---

우선 pom.xml에 Dependency를 설정해준다.

 

 

이와 같이 입력을 하면 잘 설정이 되었고, 입력을 완료한 후, 저장 -> 프로젝트 우클릭 -> 메이븐 -> 프로젝트 업데이트를 잊지 말자.

 

 

---

서버 측 컨트롤러 준비

 

 

@PostMapping("/getURL") //AJAX URL과 일치시킴으로써, 사용자 URL을 받을 준비.
	@ResponseBody		//view에 직접 출력하지않고 request에 대한 응답 response body에 값을 담아 전송
	public String[] getURL(String URL) throws IOException {
		Document doc = Jsoup.connect(URL).get();	// 사용자가 입력한 URL을 받아서 연결.
		String[] splited =doc.text().split(" ");	// 사용자의 URL에 있는 텍스트 요소들을 공백 단위로 잘라서 배열에 넣음
		return splited; 		//자른 문자들이 담긴 배열을 리턴함
	}

---

AJAX 비동기 통신 준비하기

$(".SendURL").click(function() {
						var url = $(".text-form").val();
						var contents = "";
						if (url == "")
							alert("URL이 입력되지않았습니다.")
						else {
							$.ajax({
								url : '/getURL',
								data : {URL : url},										dataType : 'json',
								method : 'post',
								success : function(data) {
								var words = new Array();
								$('.inside-text').empty();
								words = data;
								for (var i = 0; i < data.length; i++) {
										contents += `<span class="a${[i]}">${words[i]}</span>`;
									}
											$(".inside-text").append(
													contents + "&nbsp"
															+ "&nbsp");
											for (var i = 0; i < data.length; i++) {
												for (var j = i + 1; j < data.length; j++) {
													if (data[i] == words[j]) {
														var size = $(".a" + [ i ]).css('font-size',"+=10");
													}
												}
											}
										},
										error : function() {
											if (url != "")
												alert("알 수 없는 오류 입니다.");
										}
									})
						}
					});

아직 미완성이긴 하지만

버튼이 클릭됐을 때, AJAX 코드이다. 

사용자가 입력한 url을 URL 키워드로 전송하고

method는 get으로 하면 쿼리 스트링이 상당히 길어지기 때문에 지저분하다. 때문에 POST로 작성해준다.

 

그리고 간단하게 유효성 검사를 위해 인풋박스의 value가 빈 문자열("")이면 입력이 안 된 것이기 때문에 alert를 띄워서 오류임을 나타낸다.

그리고 기타 오류가 발생한 상태라면 알 수 없는 오류라는 표기를 띄운다.

 

이와 같이 작성하고, 티스토리의 링크를 넣게되면 

 

 

 

많이 언급된 단어들은 다른 일반 글자에 비해서 글자 크기가 커진 것을 볼 수 있다.

 

아직 중복도 있고 글자들의 배치도 엉망이지만 4시간을 투자한 것 치고는 원하던 방향대로 가이드는 잡힌 것 같아서 만족스럽다.

 

다음 포스트는 중복을 제거한 후, 포스팅을 이어나가도록 한다.