3월 20일 공부일기#

오늘 간단히 돔구현에 대해 다시 연습해보았다.

Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null

이런 오류가 났었고,
코드는 다음과 같았다.

const githubID = 'LeeGeonWoo22' // 여러분의 아이디로 바꿔주세요

const app = {
  server: `http://3.36.72.17:3000/${githubID}/messages`,
  init : () => {
     app.fetch()
     .then((data) => {
       console.log(data)
      data.forEach((element) =>{
        app.renderMessage(element)
      });
    });
    
    // 1. app.fetch 에서 데이터를 체이닝한다.
    // 2. 체이닝해서 가져온 data를 반복문으로 돌려서
    // 3. renderMessage(data)
},
  
  fetch: () => {
   return window.fetch(app.server)
      .then(res => res.json())
      .then(data => {
     // console.log(data)
     return data
   })
}, 


  send: (data) => { // data, callback
    window.fetch(app.server, {
      method: 'post', 
      body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(data);
  },
  clearMessages: () => {
  document.querySelector("#chats").innerHTML=""

  },

  renderMessage: (element) =>{
    let div = document.createElement("div")
    let roomTag = document.createElement("div")
    let dateTag = document.createElement("div")
    let textTag = document.createElement("div")

    let chats = document.querySelector("#chats")
    let room =  document.querySelector("#room")
    let date = document.querySelector("#date")
    let text = document.querySelector("#text")
    

    div.id = "chats"
    roomTag.id = "room"
    dateTag.id = "date"
    textTag.id = "text"

    chats.appendChild(div)
    div.append(room, date, text)
    
    room.textContent = element.roomname;
    date.textContent = element.date;
    text.textContent = element.text;
    // document.querySelector("#chatter").innerHTML;
  }
}

app.init(); 

// 테스트를 위한 코드입니다. 아래 내용은 지우지 마세요
if(window.isNodeENV){
  module.exports = app;
}

문제를 어떻게 해결하였는가 ?

내가 상당히기초적이고 바보같은 실수를 하였다.
dom을 몇번안하고 잊어버린 탓이다..

  renderMessage: (element) =>{
    let div = document.createElement("div")
    let roomTag = document.createElement("div")// 정보가 들어갈 엘레먼트를 생성 하셨습니다.
    let dateTag = document.createElement("div")
    let textTag = document.createElement("div")
    
    // 생성하신 엘레먼트에 아이디를  부여합니다. 하지만 채터박스에서 메세지를 여러개 생성할것을 생각해보면
// 아이디보다는 클래스로 부여하는게 좋지 않을까요?
    div.id = "chats"
    roomTag.id = "room"
    dateTag.id = "date"
    textTag.id = "text"
    
    chats.appendChild(div) // 이부분에 만약 문제가 있다면 chats 참조하는 부분이 동작하지 않았다는것인데.. 
//그것은 해당 html에 chats 아이디를 가진 엘레멘트가 없다는것으로 생각 됩니다. 
//그러니 html을 확인해보시는것은 어떨지 여쭈어 봅니다. 우선 제경우는 이부분에서 문제를 발생하지는 않았습니다.
    div.append(roomTag, dateTag, textTag)
// 에러의 장소는 이밑 구절입니다. 이유는 위에서 적었듯이 이미존재하는 대상을 불러 오는 데. 
 //아마 기존의 html 이라면 기존에 생성된 것이 없을 것입니다. 
//해서 아마도 불러 온것이 없기때문에 room, date, text는 null을 가질것으로 생각합니다.
    roomTag.textContent = element.roomname;// 그래서 null의 textContent는 없기에 오류를 일으킵니다.
    dateTag.textContent = new Date()
    textTag.textContent = element.text;
  }

아래와같이 바꿨으며.. 나는 '아이디 선택자'에 죽어라 추가해 놓는 경우였으니 당연히 null값이 나올수 밖에.. 없는노릇이다.. 이거 dom다시 공부해봐야할 필요성이 생긴다.