JavaScript / fetch() 로 html include 하기

이전에 php로 include 하여 html을 불러와 사용해보았다.

(무료) 이번에는 깃헙페이지에 배포를 하려하는데 php는 지원을 하지 않는다고 한다.

그래서 헤더와 풋터를 자바스크립트 fetch()로 불러왔다.

 

html을 불러올 스크립트를 따로 빼주었다.

//inc.js

fetch("./inc/header.html")
        .then(response => {
        return response.text()
        })
        .then(data => {
        document.querySelector("#header").innerHTML = data;
});

fetch("./inc/aside.html")
        .then(response => {
        return response.text()
        })
        .then(data => {
        document.querySelector("#aside").innerHTML = data;
});

fetch("./inc/footer.html")
        .then(response => {
        return response.text()
        })
        .then(data => {
        document.querySelector("#footer").innerHTML = data;
});

inc.js는 head에서 불러 주었고 내가 만든 스크립트는 body태그 밑으로 위치시켰다. 

inc.js가 읽히고 내가 작성한 js가 읽히고 html을 fetch해오기 때문에 DOM을 못읽는 이슈가 발생하였다.

script.js(내가 작성한)에 defer 속성을 추가해주면 index.html이 다 읽인 후 script가 실행된다.