관심 뉴스 모아보기 프로그램

안녕하세요!! 김용준입니다.

이번 주 달랩 멘토링 과제는 ‘관심 뉴스 모아보기 프로그램’ 입니다.

저는 네이버 스포츠 야구의 주요뉴스를 모아보는 프로그램을 개발했습니다.

이 프로그램에 사용된 언어는 Java 이고 Jsoup 라이브러리를 사용했습니다.
IDE는 IntelliJ를 사용하였습니다.

코딩전 확인

1. 이 프로그램을 사용하는 상황과 필수 요소, 제약 조건 등을 정합니다. “내가 이 프로그램을 쓴다면?”이라고 가정하면 더 쉬울 수 있습니다.

저는 친구들과 야구에 관련된 이야기를 자주 합니다.
일이 바빠 경기를 보지 못하게 되었을 때
주요뉴스의 제목만 알아도 이야기를 이어갈 수 있습니다.
그래서 저는 네이버 스포츠 야구의 주요뉴스를 모아보는 프로그램을 만들기로 했습니다.

2. 이 프로그램에 무엇을 입력했을 때 어떤 결과가 나와야 하는지 유형을 분류하고 구체적인 사례를 찾아 봅니다.

네이버 스포츠 야구의 주요뉴스 가져오기 :
- Jsoup 라이브러리를 사용하여 정보를 가져옵니다.
결과 :
- 주요뉴스 기사 제목을 보여줍니다.

3. 어디까지 구현할 건지, 무엇이 가장 중요한지, 어떤 순서대로 진행해야 할지 결정합니다.

구현 범위 : 지금은 주요뉴스 제목만 모여있지만
제가 좋아하는 한화 구단의 소식도 한눈에 볼 수 있도록 구현할 것입니다.
가능하다면 이렇게 모인 정보를 하나의 웹페이지로 만들어
링크를 클릭하면 볼 수 있도록 개발할 것입니다.
중요사항 :
1. 제가 원하는 야구 뉴스를 모아올 수 있어야 합니다.
구현 순서
1. 기사 제목을 모아오는 기능을 개발합니다.
2. 기사 제목과 URL을 가지고 올 수 있도록 수정합니다.
3. 간단한 HTML 페이지로 만들어 표현할 수 있도록 개발합니다.
4. 한화 구단 최신 소식을 모아올 수 있도록 개발합니다.
5. 4번의 데이터를 3번 HTML 페이지에 표현 가능하도록 개발합니다.

4. 구현합니다.

개발 중인 소스코드는 여기를 가시면 볼 수 있습니다.

주요 개발과정

Jsoup 설치

저는 메이븐을 이용하여 라이브러리를 추가했습니다.

<!-- pom.xml -->
<dependencies>
    <dependency>        
        <groupId>org.jsoup</groupId>
        <artifactId>jsoup</artifactId>
        <version>1.12.1</version>
    </dependency>
</dependencies>

Jsoup 사용법

jsoup: Java HTML Parser에서 API Reference를 보면 사용법이 나와있습니다.

15일 수정사항

1. 기사 제목과 URL을 가지고 와 간단한 HTML 페이지 만들기

기사 제목과 기사 URL을 가지고 와
HTML 페이지에 들어갈 태그를 생성하는 메서드를 추가했습니다.

private static String makeHtmlTag(Elements elements) {
      StringBuilder htmlTag = new StringBuilder();
      for (Element element : elements.select("li > a")) {
          htmlTag.append("<li><a href=\"https://sports.news.naver.com")
                  .append(element.attr("href"))
                  .append("\"><span>")
                  .append(element.getElementsByTag("span").text())
                  .append("</span></a></li>");
      }
      return htmlTag.toString();
  }

2. writeHtml 메서드의 테스트 코드가 추가되었습니다.

3. Jsoup 공식 홈페이지의 Cookbook contents를 테스트한 코드가 추가되었습니다.

4. absUrl메서드를 만들었습니다.

공통경로를 가지는 시점을 기준으로 Base URL과 상대경로 URL을 이어붙이는 메서드입니다.

public static String absUrl(String url, String relHref) {
  int idx = url.indexOf(relHref.split("/")[1]);
  return url.substring(0,idx -1) + relHref;
}

16일 수정사항

1. 아샬님의 피드백을 받아 참고자료를 활용하여 absUrl메서드를 수정했습니다.

public static String absUrl(String url, String relUrl) throwsMalformedURLException {
    URL baseUrl = new URL(url);
    URL relativeUrl = new URL(baseUrl,relUrl);
    return relativeUrl.toString();
}

테스트 코드를 작성한 덕분에 다시 구현한 메서드가 제대로 작동하는지 확인하기가 무척 편했습니다.
이래서 테스트 코드, 테스트 코드 하는가 봅니다.

#### 2. 주요뉴스.html 작성시 HTML Template를 사용하도록 wirteHtml 메서드 수정했습니다.

 public static String writeHtml(String htmlTag) throws IOException {
    String content = Jsoup.parse(new File("src/main/htmlTemplate/MajorNewsTemplate.html"), "UTF-8").toString();
    content = content.replace("<li>htmlTag</li>", htmlTag);
    return content;
}

프로그램 미리보기

네이버 스포츠 뉴스	제목모음(14일 개발)

네이버 스포츠 뉴스	제목,URL 모음(15일 수정)

네이버 스포츠 뉴스	HTML Template적용(16일 수정)

앞으로의 계획

구현순서에 기재한 나머지 부분을 개발할 계획입니다.
1. 기사 제목과 URL을 가지고 올 수 있도록 수정할 것입니다.(완료)
2. 간단한 HTML 페이지로 만들어 표현할 수 있도록 개발할 것입니다.(완료)
3. 한화 구단 최신 소식을 모아올 수 있도록 개발할 것입니다.(실패)
  - URL을 통해 받은 Document를 봤을 때 기사 내용의 ul 태그만 빠져있는 걸 확인했습니다.

피드백

아샬님 피드백
href 속성을 쓰셨으면 상대경로가 나오는 게 맞습니다.
절대경로로 “변환”하는 방법을 찾아보시면 도움이 될 거에요.
https://nodejs.org/api/url.html
https://docs.oracle.com/javase/10/docs/api/java/net/URL.html
https://www.baeldung.com/java-url

참고자료

jsoup: Java HTML Parser
Extract data-id from HTML with JSoup
https://nodejs.org/api/url.html
https://docs.oracle.com/javase/10/docs/api/java/net/URL.html
https://www.baeldung.com/java-url