정상우
hELLO.
정상우
전체 방문자
342,471
오늘
800
어제
1,384
  • hELLO. (120)
    • 컴퓨터과학 (4)
      • 알고리즘 & 자료구조 (4)
    • 언어 & 프레임워크 (63)
      • Go (23)
      • PHP & Laravel (40)
    • 웹 (7)
    • 블록체인 (12)
      • 메인넷 (9)
      • 암호화폐 플랫폼 (3)
    • 포트폴리오 (10)
    • 칼럼 (19)
      • 에세이 (4)
      • 개발자스럽게 살기 (13)
      • 회고 (2)
    • 티스토리 (5)

블로그 메뉴

  • ⚡ 개발자 이력서
  • 🌟 깃허브
  • 💻 강의
  • ✨ 예제코드
  • ⭐ 브런치
  • 태그 클라우드
  • 방명록

공지사항

  • 2차 도메인을 설정했습니다 ✨

인기 글

  • [Laravel] 라라벨 프레임워크⋯
    2021.06.10
    [Laravel] 라라벨 프레임워크⋯
  • 'REST' 를 보다 'RESTful' 하게⋯
    2021.08.14
    'REST' 를 보다 'RESTful' 하게⋯
  • 암호화폐 트레이딩 봇을 만들었⋯
    2021.05.12
    암호화폐 트레이딩 봇을 만들었⋯
  • JWT(JSON Web Token)의 개념부⋯
    2021.07.29
    JWT(JSON Web Token)의 개념부⋯
  • 깃허브를 포트폴리오로 쓰려면⋯
    2021.12.25
    깃허브를 포트폴리오로 쓰려면⋯

태그

  • 포트폴리오
  • go
  • 개발
  • 프로그래머스
  • Algorithm
  • 블록체인
  • 개발 리뷰
  • 코딩테스트
  • 라라벨
  • php

최근 댓글

  • 감사합니다 ~~ :)
    정상우
  • 고맙습니다 :)
    정상우
  • 자료 받으면서 원래 댓글 잘 안⋯
    뷰스토리_
  • 다크모드 지원하는 스킨 찾고⋯
    PilTok
  • 고맙습니다 ㅎㅎ 그림은 적당히⋯
    정상우

최근 글

  • 개발자와 엔지니어, 그 사이에서
    2022.05.10
    개발자와 엔지니어, 그 사이에서
  • 아임포트(Iamport)로 결제기능⋯
    2022.04.03
    아임포트(Iamport)로 결제기능⋯
  • 아임포트(Iamport)로 결제기능⋯
    2022.04.01
    아임포트(Iamport)로 결제기능⋯
  • [Laravel] 카페24 호스팅에 라⋯
    2022.03.29
    [Laravel] 카페24 호스팅에 라⋯
  • 2021년 회고―, 성찰
    2021.12.31
    2021년 회고―, 성찰

티스토리

hELLO · Designed By 정상우.
정상우

hELLO.

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

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

2020. 10. 18. 19:22

티스토리 백업

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

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

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

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

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

    '포트폴리오' 카테고리의 다른 글
    • 티스토리 스킨을 원격으로 조작할 수 있다? 티스토리 스킨 API 만들기
    • 티스토리 스킨 프레임워크, 티도리는 어떻게 동작할까?
    • 나만 알고 있기에는 너무 아깝잖아? 그래서 강의를 만들어봤어.
    • 내가 개발한 티스토리 프로젝트 정리!
    개발 리뷰, 티스토리, 티스토리 백업, 포트폴리오
    정상우
    정상우
    과거의 배움으로 현재를 바꾸고 미래를 만듭니다. #25+2살 #INFJ #개발자 #브런치작가
    댓글쓰기
    다음 글
    내가 Go 언어를 선택한 이유
    이전 글
    나만 알고 있기에는 너무 아깝잖아? 그래서 강의를 만들어봤어.
    • 이전
    • 1
    • ···
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • ···
    • 120
    • 다음

    티스토리툴바