TIL 2021.04.16 [행복한 문제해결] ⭐️

시발점

벨로그에 있는 글을 Github pages로 옮기려던 중에,
그 많은 글들을 어떻게 가져올까 생각해봄.

그런 생각 중에 생활코딩에서 우연히 "보편적이지 않은 코딩"이라는 항목으로
웹페이지에서 원하는 항목을 추출하는 튜토리얼을 봤음 링크

이 튜토리얼에서 알려주는건 php를 이용하는건데 문제는 URL이 필요한 것.
이게 왜 문제냐면 벨로그에 있는 많은 글들을 자동으로 가져오려고 했는데,
URL이 뒤죽박죽이니까 문제였다.

대신 다행인점은 TIL 같은 경우에 날짜별로 URL을 만들고 있었기때문에
TIL 만큼은 자동으로 꺼내올 수 있다고 생각했음.

그래서 이런 결론을 내리고 생활코딩 따라하면서 php도 배우면서 그렇게 해보려고했으나
가만히 생각해보니까 java에도 분명히 웹페이지 가져오는 라이브러리가 있을 것으로 생각하고 검색하니까 바로 나왔음.

Extract html from a webpage with Jsoup

그것은 Jsoup. 공식 홈페이지에 나오는 예제로는 좀 이해가 안가서 이것저것 코드를 만지작 거려보니까 대충 어떤 느낌인지 파악함.

대략적으로 설명하자면 Document 라는 객체로 웹페이지의 모든 정보를 담는다.
원하는 정보를 빼기위해서 Document에 있는 다양한 메서들을 만져서 가져오면 된다. 특히 링크만 가져온다던가 div class 이름으로 가져온다던가 id로 가져온다던가 할때는 syntax가 따로 있는데, 그걸 참고해서 사용하면 된다. 링크

		// Jsoup이용해서 페이지에서 필요한 부분만 가져오기

        Document doc = Jsoup.connect("https://velog.io/@kyukim/20210415").get();

        System.out.println(doc.select("div.sc-bbmXgH"));

이런식으로 가져오면 되긴하는데, 참고로 벨로그에서는 본문 div 클래스 이름이 주기적으로? 어떤 방식으로 생성되는진 모르겠지만 계속 바뀌는 것 같다. 그래도 어쨋든 본문의 클래스이름이 포스트마다 다른건 아니라서 나중에 모든 포스트들 한꺼번에 뺼때 문제는 없을듯 하다.

저렇게 해서 테스트해보면 일단 웹페이지의 html파일을 잘 가져오는 것을 확인할수있다.

Convert html to markdown

내가 하려는건 작성했던 포스트들을 마크다운형태로 Github pages에 다시작성하려는게 목적이기때문에 추출한 html을 markdown으로 변환해줘야한다.

js에는 Turndown이라는 라이브러리가 있는데 깃헙에 스타가 무려 5600개이다 우왕. java에도 Copydown 이라는 라이브러리가 있다. 아마도 turndown 코드를 참고해서 만든것같다. 아마도. 글고 여담으로 Copydown에서서 브라이언이 리뷰해줬던 빌드패턴이라는 게 나와서 조금 반가웠다. ㅎㅎ

어쨋든 Copydown이라는 라이브러리도 추가해주면 다음과 같이 코드를 작성할 수 있다.

import io.github.furstenheim.*;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;

import java.io.IOException;

public class Main {
    public static void main(String[] args) throws IOException {

        // Jsoup이용해서 페이지에서 필요한 부분만 가져오기
        Document doc = Jsoup.connect("https://velog.io/@kyukim/20210415").get();

    
//      System.out.println(doc.select("div.sc-bbmXgH"));


        // Copydown이용해서 html을 markdown으로.
        CopyDown converter = new CopyDown();
        String myHtml = doc.select("div.sc-bbmXgH").toString();
        String markdown = converter.convert(myHtml);
        System.out.println(markdown);
    }
}

이렇게 해서 실행하면 짜잔~ 마크다운으로 잘나온다. 여기서 마크다운 스타일도 옵션으로 변경할 수 있다.

import io.github.furstenheim.*;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;

import java.io.IOException;

public class Main {
    public static void main(String[] args) throws IOException {
        Document doc = Jsoup.connect("https://velog.io/@kyukim/20210415").get();

        // CopyDown 옵션 이용
          OptionsBuilder optionsBuilder =. OptionsBuilder.anOptions();
          Options options = optionsBuilder
                  .withHeadingStyle(HeadingStyle.ATX)
                  .withBulletListMaker("-")
                  .withCodeBlockStyle(CodeBlockStyle.FENCED)
                  .build();

        CopyDown converter = new CopyDown(/* options */);
        String myHtml = doc.select(".sc-bbmXgH").toString();
        String markdown = converter.convert(myHtml);
        System.out.println(markdown);
    }
}

짜잔~ 그럼 자기가 원하는 스타일대로 마크다운을 출력할 수 있다.

And then...

일단 여기까지는 완성했고, 자동으로 추출하려면 Jsoup.connect(URL)에 날짜별로 들어가는 for문을 만들고 for문 마지막 로직에 파일로 생성해주는 로직을 추가해주면 자동으로 추출해줄 수 있을것같다!

느낀점

이번에 내가 필요한 것을 직접 만들면서 스스로 성장했다는게 느껴진다. 인터넷에 찾아보면 라이브러리만 가져다 쓰는 게 아니라 원리를 알아야한다? 뭐 이런 조언을 많이 볼수있는데 나는 "라이브러리만 가져다 쓰는 수준" 에도 미달했었기 때문에 슬픈심정으로 흘려들었다. 그런데 드디어 내가 "내가 원하는 바를 위해서 라이브러리를 가져다 쓰는 수준"에 이르렀다는 것을 깨닫고 정말 신이났다.
나도 뭔가 만들 수 있다는 자신감도 생겼다. 좌절했던 순간이 많았었는데 이렇게 한 번 성장했다는 느낌을 받으니 앞으로도 매일매일 열심히 해야겠다는 다짐도 다시하게된다.

능동적으로 재밌는걸 하니까 시간가는 줄도 모르고 집중해서 공부했던거같고, 머리가 돌아가는것도 평소와 달리 빠릿하게 움직였다. 내가 목표했던 크롬익스텐션 만드는 것도 이런 느낌으로 한다면, 집중력을 발휘해서 금방 만들 수 있을것 같다!

11월부터 지금까지 5개월정도 지난거같은데, 5개월이 헛된 시간이 아니었다!ㅎㅎㅎ 앞으로 남은 2개월 조금 넘는 시간,,,더더 화이팅하자!