Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득할 수도 있습니다.
콜백 기반 API인 XMLHttpRequest와 달리, Fetch API는 서비스 워커에서도 쉽게 사용할 수 있는 프로미스 기반의 개선된 대체제입니다. 또한 Fetch API는 CORS를 포함한 고급 개념을 HTTP 확장으로 정의합니다.
1. vscode에 사용할 파일들(html)을 생성해두고, script.js를 켜서 필요로 하는 html을 불러온다.
2. 각각의 html에 내용을 작성한다.
(index.html은 메인페이지로 !DOCTYPE html, HTML 문서 유형으로 선언함/ 이외의 문서들은 선언하지 않았음)
3. script.js에서 헤더, 푸터를 불러온다.
코드는 아래와 같이 작성한다.(fetch사용)
/* 헤더 불러오기 */
fetch('header.html') // 1. 'header.html' 파일을 서버에서 요청합니다.
.then(function(res){ // 2. 응답(response)이 오면 실행할 함수를 등록합니다.
//응답을 텍스트로 변환
return res.text(); // 3. 응답 객체를 HTML 텍스트로 변환해서 다음 then으로 넘깁니다.
})
.then(function(data){ // 4. 변환된 텍스트(HTML 코드)를 받아서 처리합니다.
//변환된 텍스트 html 코드를 #header 요소 안에 삽입
document.getElementById('header').innerHTML = data;
// 5. id가 'header'인 요소 안에 header.html 내용을 넣습니다.
})
/* 푸터 불러오기 */
fetch('footer.html') // 6. 이번엔 'footer.html' 파일을 요청합니다.
.then(function(res){ // 7. 응답이 오면 텍스트로 바꿉니다.
return res.text(); // 8. 응답을 HTML 텍스트로 변환합니다.
})
.then(function(data){ // 9. HTML 코드를 받아서
document.getElementById('footer').innerHTML = data;
// 10. id가 'footer'인 요소 안에 footer.html 내용을 삽입합니다.
})
제대로 작동하려면,
HTML 문서 안에 id="header"와 id="footer"인 요소가 있어야 해요.
<div id="header"></div>
...
<div id="footer"></div>- header.html, footer.html 파일이 같은 폴더 안에 있어야 해요 (또는 경로를 맞춰줘야 해요).
- 로컬에서 바로 열면 안 되고, Live Server나 웹 서버로 열어야 fetch()가 작동해요.