TIL) 11주차 4일

백엔드 마무리를 짓고 프론트로 넘어왔다

 

저번에 너무 힘들게 해서 그런지 생각보다 수월하게 진행되고 있다는 점이

 

너무나 신기했다 ㅎㅎ

 

내일도 화이팅!

 

---

insertAdjacentHTML

---

바닐라에서도 js에 html을 땡겨오는 법이 있었다. 이걸 진작에 알았더라면 훨씬더 수월했을것이다....

 

 

원래 쓰던 방법

• id를 받고, createElement와 setAttribute를 통해 태크와 속성을 만들어서 진행함

			...
            
const newDiv = document.createElement("div");
    newDiv.setAttribute("class", "post-box")
    newDiv.setAttribute("onclick", `articleDetail(${article.id})`)

    const articleImage = document.createElement("img")
    if (article.image) {
      articleImage.setAttribute("src", `${backend_base_url}${article.image}`)
    } else {
      articleImage.setAttribute("src", "https://cdn11.bigcommerce.com/s-1812kprzl2/images/stencil/original/products/426/5082/no-image__12882.1665668288.jpg?c=2")
    }
    newDiv.appendChild(articleImage)

    const info = document.createElement("div")
    info.setAttribute("class","post-info")
    newDiv.appendChild(info)

    const profile = document.createElement("div")
    profile.setAttribute("class","post-profile")
    info.appendChild(profile)

			...

 

 

새로운 방법

• append할 요소.insertAdjacentHTML("어떤식으로 삽입할지", "HTML")
• 백엔드에서 가져올 값들이 있다면 html을 통째로 ``(뺵틱) 으로 묶어서 쓰면됨

# 예시 

article_list.insertAdjacentHTML(
        "beforeend",
        `<div class="post-box" onclick="articleDetail(${article.id})">
  
      <img src="${backend_base_url}${article.image}" alt="" />
  
      <div class="post-info">
        <div class="post-profile">
          <div class="post-img">
            <img src="/static/img/mymymy.png" alt="" />
          </div>
          <h3>${article.user}</h3>
        </div>
        <div class="likes">
          <i class="ri-heart-3-fill" ></i>
          <i class="ri-bookmark-fill"></i>
        </div>
      </div>
    </div>`)

---