6월 14일 TIL - 프론트 메인페이지 제작하기

▷ 오늘의 배움

오늘은 메인페이지를 만드는 데 집중하였다. 역시 프론트는 쉽지않다. api 부분은 fetch로 데이터를 보내고 가져오기만 하면 돼서 나름 괜찮았는다. 역시 그냥 보여지게 진열하는데도 많은 애를 먹었다. 오늘 네브바를 연결하는 부분도 애를 먹었다. 두가지 방법을 사용해보았다. fetch로 뿌려주기 insertAdjacentHTML 사용하기

1. fetch 이용

! fetch 함수로 html 문서를 로드할 때 주의할 점은, 로드된 html 내용이 문자열로 되어 있기 때문에 html 소스 코드로 변환시켜야 한다.!

async function injectNavbar() {
    fetch("../navbar.html").then(response => {
        return response.text()
    })
        .then(data => {
            document.querySelector("header").innerHTML = data;
        })}
# 네프바html에 있는 데이터들을 가져와서 넣을 부분에 innerhtml로 넣으면 된다!

2. insertAdjacentHTML 사용

let footer = ``
document.body.insertAdjacentHTML('beforeend', footer)

# let footer로 html내용을 정의해 주고 'beforeend'로 넣어주면 완성이다!