대화 백업기

개인적인 용도로 백업기를 편하게 만든 HTML 인터페이스 코드입니다. 
개인적인 용도로 인해 만들어진 코드이니 만큼 챗GPT를 사용해 전공자분들이나 다른 분들께는 이상한 코드가 있을 수도 있다는 점 말씀드립니다! (또한 저는 코드에 대해 전혀 모르기에 - 코드 사용시 문제가 생겼을 경우 제가 해결해드리기 어렵습니다!)
 
특정 티스토리에서 적용이 안되는 것을 확인했습니다. (지금 제 커미션 티스토리는 적용이 안되더라고요, 그 외 티스토리는 작용이 잘되었으므로,,스킨 케바케인듯합니다..)
 
그 외 공지사항은 해당 사항과 동일합니다.
https://youmom.tistory.com/63

배포 관련 공지사항

 

---

저희가 백업기를 사용하게 될 것은 크롬의 북마크 기능입니다. 트위터를 여신 사이트가 크롬일 경우에만 기능할 수 있습니다.
 
북마크 관리자를 열기 위하여, 해당 북마크를 복붙해주세요.

chrome://bookmarks/
 
우클릭을 통해, 새 북마크 추가를 클릭하면 해당 창이 뜨게 될텐데, 이름은 자유롭게 하셔되지만, 편의성을 위해 트위터백업 정도로 저장해주시는게 좋습니다. (저는 그렇게 했습니다.)

 
이 후 URL부분에 업로드 하단 코드를 복붙해주세요.

javascript:(()=>{const startStatus=location.pathname.match(/status\/(\d+)/)?.[1];const%20tweets=[];const%20saved=new%20Set();let%20started=false;document.querySelectorAll(%27article%27).forEach(a=%3E{const%20link=a.querySelector(%27a[href*=%22/status/%22]%27);if(link){const%20href=link.getAttribute(%27href%27);const%20match=href.match(/status\/(\d+)/);if(match){const%20statusId=match[1];if(statusId===startStatus){started=true;}}}if(!started)return;const%20userBlock=a.querySelector(%27[data-testid=%22User-Name%22]%27);const%20contentBlock=a.querySelector(%27[data-testid=%22tweetText%22]%27);const%20avatarEl=a.querySelector(%27img%27);if(userBlock&&contentBlock){const%20spans=userBlock.querySelectorAll(%27span%27);let%20name=%27%27;let%20screen=%27%27;spans.forEach(s=%3E{const%20text=s.innerText;if(text.startsWith(%27@%27)){screen=text;}else%20if(!name){name=text;}});const%20content=contentBlock.innerText.trim();const%20avatar=avatarEl%20?%20avatarEl.src%20:%20%27%27;const%20key=name+screen+content;if(!saved.has(key)){saved.add(key);tweets.push({name,screen,content,avatar});}}});let%20html=`%3Chtml%3E%3Chead%3E%3Cmeta%20charset=%22UTF-8%22%3E%3Cstyle%3Ebody{background:#efefef;font-family:'Pretendard',sans-serif;padding:20px;}.twitter-archive{max-width:520px;margin:40px%20auto%200%20auto;}.tweet{display:flex;gap:12px;margin-bottom:22px;align-items:flex-start;}.twitter-archive%20.avatar,.twitter-archive%20img.avatar{width:46px%20!important;height:46px%20!important;min-width:46px%20!important;min-height:46px%20!important;max-width:46px%20!important;max-height:46px%20!important;aspect-ratio:1/1%20!important;border-radius:50%%20!important;object-fit:cover%20!important;object-position:center%20!important;display:block%20!important;flex:none%20!important;flex-shrink:0%20!important;overflow:hidden%20!important;margin:0%20!important;padding:0%20!important;border:none%20!important;box-shadow:none%20!important;}.tweet-body{padding-top:1px;}.tweet-name{font-size:15px;font-weight:700;color:#333;}.tweet-id{font-size:12px;color:#999;margin-left:4px;}.tweet-text{margin-top:6px;font-size:14px;line-height:1.7;color:#333;white-space:pre-wrap;word-break:keep-all;}%3C/style%3E%3C/head%3E%3Cbody%3E%3Cdiv%20class=%22twitter-archive%22%3E%60;tweets.forEach(t=%3E{html+=%60%3Cdiv%20class=%22tweet%22%3E%3Cimg%20class=%22avatar%22%20src=%22${t.avatar}%22%3E%3Cdiv%20class=%22tweet-body%22%3E%3Cdiv%20class=%22tweet-name%22%3E${t.name}%3Cspan%20class=%22tweet-id%22%3E${t.screen}%3C/span%3E%3C/div%3E%3Cdiv%20class=%22tweet-text%22%3E${t.content}%3C/div%3E%3C/div%3E%3C/div%3E%60;});html+=%60%3C/div%3E%3C/body%3E%3C/html%3E%60;const%20blob=new%20Blob([html],{type:%22text/html%22});const%20url=URL.createObjectURL(blob);const%20a=document.createElement(%22a%22);a.href=url;a.download=%22tistory_continue_backup.html%22;a.click();URL.revokeObjectURL(url);alert(%22%ED%98%84%EC%9E%AC%20%ED%99%94%EB%A9%B4%20%EB%B2%94%EC%9C%84%20%EB%B0%B1%EC%97%85%20%EC%99%84%EB%A3%8C!%22);})();

 
 
이 후 백업하고싶은 타래 대화에 들어갑니다. 크롬 우측 상단 해당 아이콘을 클릭하실 경우 트위터 백업이 설치가 되어있을 겁니다. 트위터 백업을 누르실 경우 자동적으로 HTML이 뽑아져 나옵니다.

 
해당 백업기는 화면에 로드 된 타래까지만 인식이됩니다, 따라서 장문 역극을 하시는 경우 (제가 그렇습니다) 인식이 된 마지막 타래 다음 트윗을 클릭하여 다시 백업을 하시는 형식으로 이으시면 됩니다.
 
모든 추출이 끝날 경우 해당 파일을 설치해줍니다. 해당 html은 트윗 병합기로 더블 클릭시 열립니다.

index.html

0.00MB

 

 
아까 추출한 파일을, 파일 선택란에 전부 넣어줍니다.
주의할점 !! 처음 추출된 코드의 경우 중복 저장이 아니라 숫자가 없을 겁니다. 처음 추출된 파일의 경우 파일을 전부 추출한 뒤, 반드시 이름 바꾸기를 사용하여 (0)을 마지막에 붙여주세요, 그렇지 않을 경우 제일 앞선 파일이 읽힐 때 이름이 뒤로 가서 가장 뒤로가는 불상사가 생길 수 있습니다.

 
 
마지막으로
파일 추출기를 통해 하나의 파일이 되었을 경우 혹은 파일 추출기를 굳이 사용할 정도가 아닌 길이의 대화 경우
 
추출된 파일 우클릭 > 메모장 > ctrl A 전체 복사

 
이 후 티스토리 글쓰기의 HTML 모드를 활용하여 해당 코드 복붙 : 티스토리 내 수정시 코드 망가집니다, 반드시 일괄처리해서 올리시는 것을 추천드립니다.

 

 
저장 시 이렇게 백업된 코드가 나오게 됩니다