html 파일 fetch, <script> 동적 실행 등

만드는 중인 웹에 내가 티스토리에 쓴 글들을 그대로 가져와 보여주고 싶었다.

그 과정과 문제들, 해결한 방법에 대해 기록한다.

 

1. 티스토리에 쓴 글들 (html) 을 내 웹의 디자인을 적용하고 싶다
   1. 내가 쓴 글들은 천개가 넘는다. 천개의 html 파일들을 모두 수정 불가능
2. html 내부에 코드를 보여주기 위한 github gist <script> 이 존재
   1. 내가 쓴글 html 을 동적으로 가져오면 <script> 실행이 동적으로 안되는 문제 발생 
   2. SOP 에 의해 github 에 대한 요청 거부됨 
   3. 반드시 gist 들을 모두 가져온 이후에 실행되어야 할 로직들이 존재 
3. 내가 쓴글 html 에 이미지가 포함된다
   1. html 에 포함된 <img> 의 경로와 내가 fetch 해서 가져온 후 경로가 다르다 

 

우선 티스토리 관리 페이지에서 내가 쓴 글들을 백업할수 있도록 백업파일들을 받을수있다.

티스토리 관리 > 블로그 > 데이터 관리

 

백업하기를 누르면 내가 쓴 글들을 html, css, img 파일로 제공한다.

 

 

이렇게 제공되기 때문에 그냥 static 폴더에 다 넣으면 된다. (spring)

 

1. 티스토리에 쓴 글들 (html) 을 내 웹의 디자인을 적용하고 싶다

그런데 나는 이 글들에 모두 내 웹의 헤더 디자인 등을 적용하고 싶었다.

따라서 javascript 로 해당 html 파일을 읽어서 header 디자인 등이 모두 적용된 html 파일의 중간에 삽입하도록 했다.

 

1. tistoryPage.html 이라는 html 을 따로 만들고
2. 티스토리 글(html) 의 경로를 javascript 로 가져와서 해당 경로에 있는 html 파일 fetch
3. fetch 결과를 tistoryPage.html 에 삽입 

 

 

fetch 성공!

 

 

2.  html 내부에 코드를 보여주기 위한 github gist <script> 이 존재

1. 내가 쓴글 html 을 동적으로 가져오면 <script> 실행이 동적으로 안되는 문제 발생 

(1)번에서 티스토리 글 html 을 fetch 해서 tistoryPage.html 에 삽입한건 좋은데,

티스토리 글 html 에 존재하는 <script> 가 실행되지 않는 문제가 발생했다.

 

• 원인
  • github embedded gist 는 document.write 를 사용해 gist element 를 생성하는데, document.write 는 페이지 로드 이후 실행되지 않는다.

따라서 존재하는 <script> 를 모두 읽어서 동적으로 실행해줘야 했다.

 

2. SOP 에 의해 github 에 대한 요청 거부됨 

여기서 또 문제는 자바스크립트는 동일근원정책 (SOP, Same Origin Policy) 에 의해 서로 다른 도메인에 의한 요청을 거부한다.

 

이를 회피하기 위한 방법으로 JSONP 를 사용했다.

JSONP 는 <script> 으로 다른 도메인으로 요청시 SOP 가 적용되지 않는다는 사실을 이용해 SOP를 회피하는 방법이다.

 

3. 반드시 gist 들을 모두 가져온 이후에 실행되어야 할 로직들이 존재 

JSONP 에 의한 gist 요청은 비동기적으로 처리된다.

따라서 promise,async,awiat 을 통해 적절히 처리해줘야 했다.

 

 

3. 내가 쓴글 html 에 이미지가 포함된다

티스토리에서 백업 받은 파일들의 구조는 

tistory 폴더 내부에 글 번호의 폴더들이 존재하고, 해당 폴더 내부에 html 파일, 그리고 img 폴더가 있다.

따라서 이미지의 경로는 아래와 같게 된다

 <img src="./img/img.png"  />

 

문제는 티스토리 글 html 을 fetch 해서 가져오면 저 이미지 경로는 다른곳을 가르킨다.

<img> 의 경로를 바꿔주면 되지만 티스토리 글은 천개가 넘는다.. 일일히 바꿔주는것은 불가능.

 

따라서 티스토리 글 html 을 fetch 한후 모든 <img> 엘러먼트를 스캔해서 src를 바꿔줬다.

예를들어 좌측과 같은 경로를 우측처럼 변경.

 

"http://localhost:8080/blog/img/img_5.png" -> "/tistory/1070/img/img.png"

 

 

 

결과

tistory 글

https://tose33.tistory.com/536

백준 1011. Fly me to the Alpha Centauri

 

내 웹 

https://lsh-portal-f9ba5ffd8137.herokuapp.com/blog/536-%EB%B0%B1%EC%A4%80-1011.-Fly-me-to-the-Alpha-Centauri.html

페이지

 

 

 

fetchTistory.js 

https://github.com/LSH3333/portal/blob/cf0974ad8bde088d3ad37f796b7ee00cc333475f/src/main/resources/static/js/fetchTistory.js#L1-L177