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

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

티스토리 백업

티스토리 백업은 티스토리의 백업기능을 만들어보고자 하는 아이디어가 문뜩 떠올라 단기간에 만든 데스크탑 어플리케이션이다. 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 모듈의 경우는 내가 직접 만든 것이다.

톺아보기

Vuex

일단 상태관리는 Vuex 로 하였다. 이곳에 모든 컴포넌트에서 쓰일 상태를 저장해놓을 예정이다. 여기에는 티스토리 API 에 관한 정보들, 클라이언트 아이디, 시크릿 키, 응답 타입, 콜백 URL 등이 포함되며, 더욱이 중요한 AccessToken 을 포함한다.

const state = {
  tistory: {
    clientId: '__CLIENT_ID__',
    secret: '__SECRET__',
    responseType: 'code',
    redirectUri: 'http://localhost:9080/#/'
  },
  accessToken: null
}

// ...

export default { state, mutations, actions }

Auth.vue

딱히 소개할만한 코드는 없다. 일반적인 티스토리 인증과 똑같기 때문이다. 물론 인증진행을 위해 새로운 윈도우를 만드는 것만 주의하면 된다. 그저 중요한 것은 티스토리 인증하기 버튼을 누르고나면 OAuth2 요청을 위해 만들어진 URL 에 연결하고, 엑세스 토큰을 얻어와 글로벌 상태에 저장한다는 점이다. 여기서 인증을 위해 사용한 보조 라이브러리는 이 프로젝트와 마찬가지로 내가 개발한 티스토리 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 에 아이템을 넣어야하는데 문맥이 달라서 아이템이 들어가지 않는다거나 빈 텍스트가 들어갔다거나 그런 경우가 생겼기 때문이다.

더 읽을거리

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

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

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

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

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