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

Web

tose33 2023. 11. 2. 15:10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tistory 글

백준 1011. Fly me to the Alpha Centauri

https://www.acmicpc.net/problem/1011 1011번: Fly me to the Alpha Centauri 우현이는 어린 시절, 지구 외의 다른 행성에서도 인류들이 살아갈 수 있는 미래가 오리라 믿었다. 그리고 그가 지구라는 세상에 발을 내

tose33.tistory.com

내 웹

페이지

lsh-portal-f9ba5ffd8137.herokuapp.com

fetchTistory.js