티스토리 백업
티스토리 백업은 티스토리의 백업기능을 만들어보고자 하는 아이디어가 문뜩 떠올라 단기간에 만든 데스크탑 어플리케이션이다. electron-vue 를 사용하였기에 렌더링을 vue.js 프레임워크를 사용하여 진행하게 된다. 난 윈도우 밖에 사용하지 않아서 Mac OS 전용으로는 배포할 수 없었지만, 타 개발자분의 도움으로 배포할 수 있게 되었다.
https://pronist.tistory.com/52
티스토리 블로그 백업 프로그램을 만들었습니다.
티스토리 백업 티스토리 블로그의 백업 기능은 이전에 사라졌습니다. 그래서, 직접 만들어보기로 했습니다. 이는 티스토리 Open API 를 사용한 것입니다. 해당 프로그램은 아주 단순하며, 그저 티�
pronist.tistory.com
라이브러리와 프레임워크
해당 어플리케이션에서 사용한 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 만들기
