SeongJae Oh

CovidOverview

  • 규모: 개인 프로젝트
  • 팀 인원: 1명(개인)
정부에서 지원하는 코로나 사이트(http://ncov.mohw.go.kr/)를 파싱하여 필요한 데이터만 뽑아 확인자와 격리자 등의 총 인원수, 최근 일별 확진자 발생 추이 그래프 등을 보여줍니다.

Project Environment

  • JSP - Spring Framework
  • Apache Tomcat 8.5.65
  • Java Library - jSoup
  • Free Bootstrap Theme

프로젝트 개발 동기 및 개요

매일마다 코로나 확진자가 몇명인지 검색하기에 지쳐있는 와중에 타 웹사이트를 파싱하는 방법에 대해 공부하게 되어 자바 라이브러리를 찾아보고 정부에서 지원하는 코로나 사이트를 파싱하여 필요한 정보만 뽑아 한눈에 알아볼 수 있도록 제작해보았습니다.

프로젝트 스크린샷

image
image

jSoup - Java HTML Parser

HTML 문서에 저장된 데이터를 구문 분석, 추출 및 조작하도록 설계된 오픈소스 Java 라이브러리입니다. URL로 접근하여 페이지 정보를 요청하면 HTML코드로 반환되며 해당 코드 안의 특정 태그나 단어를 선택하여 따로 추출할 수 있는 selector 기능을 지원합니다.

image
image

프로젝트 코드 일부

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var ctx = document.getElementById("infectedOverview");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [area_date[0], area_date[1], area_date[2], area_date[3],
             area_date[4], area_date[5], area_date[6]],
    datasets: [{
      label: "확진자",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: [Number(area_confirm[0]), Number(area_confirm[1]), Number(area_confirm[2]), 
             Number(area_confirm[3]), Number(area_confirm[4]), Number(area_confirm[5]), 
             Number(area_confirm[6])],
    }],
  },
  options: {
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      intersect: false,
      mode: 'index',
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ' : ' + number_format(tooltipItem.yLabel) + '명';
        }
      }
    }
  }
});
cs

곡선 그래프의 스타일과 데이터를 정렬하고 해당 그래프 스타일의 이름을 'infectedOverview'로 정함 (기존 Bootstrap Template 일부 변경)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class jSoup {
    public String getOverviewCount() throws Exception {
        Document doc = Jsoup.connect("http://ncov.mohw.go.kr/").get();
        String counts = "";
        String[] temp = doc.select("ul.liveNum .num").toString().split("\n");
        DecimalFormat formatter = new DecimalFormat("###,###");
        
        for(int i=0; i<4; i++) {
            counts += formatter.format(Integer.parseInt(temp[i].replaceAll("[^0-9]""")));
            if(i != 3)
                counts += "/";
        }
        
        return counts;
    }
}
cs

jSoup를 이용하여 정부 사이트를 파싱하여 'ul.liveNum .num' 속성의 태그 안의 값을 가져와 정규식을 이용하여 숫자만 추출

프로젝트 후기

JSP Spring에 대한 복습 겸 시작한 간단한 프로젝트였지만, 아이디어 구상 중에 타 웹 사이트를 파싱해 정보를 수집한다는 개념 자체가 새로워 즐겁게 진행하였습니다.
컨트롤러에서 반복적인 요청으로 주기마다 파싱한 정보를 DB에 저장하고 하는 자동 크롤링으로 사용할 수도 있을 것 같아 흥미롭습니다.
또한, 스프링이 JSP 페이지에 자바스크립트 등의 요소가 로딩된 후 컨텍스트에서 넘긴 데이터가 주입된다는 특성을 이용하여 스크립트에 EL문법을 넣어 작업하던 것이 새로운 경험이 되었습니다.

다른 기발한 아이디어가 있으신가요?

신입 개발자로써 많은 것을 배우고 제작해보고싶습니다. 현재 프로젝트에 추가되었으면 하는 기능이나, 완전히 새 프로젝트에 대한 아이디어가 있으시면 저에게 연락주시면 감사하겠습니다.