글 개요
리액트를 사용하지 않고 Javascript만으로 쇼핑몰 프로젝트를 진행했었는데 당시에 여러 페이지에서 사용하는 컴포넌트(헤더,푸터)를 렌더링했던 방법을 소개하는 글이다.
fetch()
- 네트워크와 통신할 때 사용하는 fetch를 사용하여 렌더링해주었다.
- API 요청할 때만 사용하는 줄 알았지만 실제로 더미데이터를 사용할 때도 json 파일을 fetch로 받아와서 사용해본 경험이 있다.
const res = fetch(url,[option]).then(response => [핸들링)
res.text() – 요청에 대한 응답을 text 형태로 반환한다.
res.json() – json 객체로 반환한다. API 데이터를 받아올때 가장 많이 사용하는 메서드라 익숙하다.
res.formData() – 응답을 FormData 객체 형태로 반환합니다.
res.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환합니다.
res.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환합니다.
res.body() - 응답 본문을 청크 단위로 읽을 수 있다.
json,text를 제외한 메서드는 깊게 사용해보지 않아서 학습이 필요하다.
Html 구조 적용하기
스타일 추가
스크립트 추가
렌더링 과정 소소한 이슈
DOM 요소에 텍스트로 변환한 res 값이 모두 들어가기 때문에 meta, title, link, script, html, body 모두 들어가게 된다.
때문에, 렌더링 되는 구조를 확인하고 불필요한 태그를 제거해주는 작업이 필요하다. 해당 이미지에서는 home에 해당하는 head만 렌더링 된걸 확인할 수 있다.
코드
export const renderClientSideComponent = () => {
const headerId = document.querySelector('#header');
if (headerId) {
const header = fetch('/components/header.html');
header
.then((res) => res.text())
.then((text) => {
document.querySelector('#header').innerHTML = text;
let style = document.createElement("link");
style.href = '/components/header.css';
style.rel = 'stylesheet'
document.head.appendChild(style);
let script = document.createElement('script');
script.type = 'module';
script.src = '/components/header.js';
document.body.appendChild(script);
});
}
}
잘보고갑니다. 신박한 방법이네요 ! 👍👍👍👍