티스토리 백업(Tistory Backup) 개발 돌아보기

티스토리 백업

티스토리 백업은 티스토리의 백업기능을 만들어보고자 하는 아이디어가 문뜩 떠올라 단기간에 만든 데스크탑 어플리케이션이다. electron-vue 를 사용하였기에 렌더링을 vue.js 프레임워크를 사용하여 진행하게 된다. 난 윈도우 밖에 사용하지 않아서 Mac OS 전용으로는 배포할 수 없었지만, 타 개발자분의 도움으로 배포할 수 있게 되었다.

 

https://pronist.tistory.com/52

티스토리 블로그 백업 프로그램을 만들었습니다.

라이브러리와 프레임워크

해당 어플리케이션에서 사용한 Electron, Vue.js 프레임워크 이외에 라이브러리는 대표적으로 3가지이며 tistory.js, JSZip, SweetAlert2 이다. tistory.js 모듈의 경우는 내가 직접 만든 것이다.

• tistory.js: https://github.com/tidory/tistory.js
• JSZip: https://stuk.github.io/jszip/
• SweetAlert2: https://sweetalert2.github.io/

톺아보기

티스토리 백업을 구성하고 있는 주요 로직은 티스토리 로그인을 처리하는 Auth.vue, 블로그의 포스트를 추출하고 저장하는 Extractor.vue 로 구성되어 있다. 내용이 간단해서 소스코드를 모두 살펴보지는 않는다. 상태 저장소로 Vuex 를 사용하여 티스토리 AccessToken 을 저장한다.

Auth.vue

딱히 소개할만한 코드는 없다. 일반적인 티스토리 인증과 똑같기 때문이다. 물론 인증진행을 위해 새로운 윈도우를 만드는 것만 주의하면 된다. 그저 중요한 것은 티스토리 인증하기 버튼을 누르고나면 OAuth2 요청을 위해 만들어진 URL 에 연결하고, AccessToken 을 얻어와 글로벌 상태에 저장한다는 점이다. 여기서 인증을 위해 사용한 보조 라이브러리는 이 프로젝트와 마찬가지로 내가 개발한 티스토리 Open API 라이브러리다.

Extractor.vue

여기서 가장 애먹은 것은 이미지 부분이다. 티스토리 API 에서 현재까지 올바른 이미지 경로를 제공해주지 않아서 강제로 변환해주어야 했다. 이미지 변환을 위해 사용하는 코드 중 일부는 다음과 같다.

async function addImages (doc, postFolder, pathname) {
    const imgRegex = /kage@(.*)/

    let imageSourceName

    const source = img.getAttribute('src')
    if (imgRegex.test(source)) {
        imageSourceName = `https://blog.kakaocdn.net/dn/${imgRegex.exec(source)[1]}`
    } else {
        imageSourceName = source
    }
    
    const response = await fetch(imageSourceName)
}

그 외의 부분은 추가적인 코드의 설명이 전혀 필요없이 아래의 다이어그램으로 모든 것을 설명할 수 있다.

내용은 간단하다. 블로그 정보를 얻어오는 과정은 사용자가 로그인을 하면서 넘어오게 되고, 그 이후에는 포스트의 목록을 얻고 개별 포스트를 읽어가며 글과 이미지를 추출하고 .zip 파일에 저장하면 된다. 글을 추출하기 전에 이미지를 먼저 뽑아서 저장한 다음, 글에 있는 이미지 주소를 앞에서 저장한 이미지의 주소로 바꿔주는 일을 하게 된다.

마치며

티스토리 개발팀에서 이미지 경로나 패치해줬으면 좋겠다. 언제까지 저렇게 방치해두려고! 그 외에 이 어플리케이션을 만들면서 어려웠던 점은 아무래도 언어가 자바스크립트이기 때문에 실행 문맥을 맞추기가 쉽지 않았다는 것이다. .zip 에 아이템을 넣어야하는데 문맥이 달라서 아이템이 들어가지 않는다거나 빈 텍스트가 들어갔다거나 그런 경우가 생겼기 때문이다.

더 읽을거리

티스토리 스킨을 원격으로 조작할 수 있다? 티스토리 스킨 API 만들기

티스토리 스킨 프레임워크, 티도리는 어떻게 동작할까?

티스토리 구독 서비스 이전에 존재했던, 티스토리 이웃서비스 티네스(Tines) 개발 돌아보기

hELLO. 티스토리 스킨을 소개합니다.

내가 개발한 티스토리 프로젝트 정리!