221026 TIL

오늘 한 일 : 강의를 들었다. 오늘따라 집중이 잘 되지 않아서 어제 다 못 들은 2주차 강의만 완강하고 3주차는 새벽에 듣거나.. 내일 듣거나 해야겠다. 클래스형 뷰 전까지 진도를 나갔었는데, 아침에 본 쪽지시험에서 거기까지 나오진 않아서 다행이었다.

 

오늘 자바스크립트를 다루는 부분이 있었는데 제목만 뽑는 걸 내용도 한 번 뽑아보고, content 필드에 null이랑 blank를 True로 해놔서 내용만 뽑았더니 어떤 데이터의 내용인지 알 수가 없어서 제목이랑 내용도 같이 뽑아보고, 띄어쓰기도 넣어보고 해봤다.

content 띄워보기라고 각주 달아놓은 부분부터 혼자 이것저것 해 본 부분이다. 뭐 대단한 걸 한 건 아니고 강의 내용이랑 똑같이 하는데 뽑는 것만 달리 했을 뿐...

알게 된 점을 굳이 뽑아보자면, 알게 됐다기보다는 꺠달은 점? 뭐라 해야 되지... 여튼 대충 이름 보고 예상해보고 실험해본 뒤 개발자 도구로 확인해 본 결과 createElement로 만든 태그가 appendChild로 추가되기 때문에 내가 html에 id 달아놓고 그거랑 다른 태그로 만들어도 된다는 거? 강의에서는 html에서 만든 태그도 div고 js에서 만든 것도 div라 똑같이 적어야 되는 줄 알았는데(이래서 무지성으로 강의를 들으면 안 된다... 강의에서는 똑같이 적으라고 1도 말하지 않았다) 아니었당. 오늘도 무신경함과 부주의함을 겨우겨우 넘기고...

console.log("자바스크립트 불러왔음!")

window.onload = async function loadArticles() {
    const response = await fetch('http://127.0.0.1:8000/article/', { method: 'GET' })
    response_json = await response.json()

    const articles = document.getElementById("articles")

    response_json.forEach(element => {     // for문을 돈다고 생각하기
        console.log(element.title)         // 데이터를 한개씩 찍어준다.
        const newArticle = document.createElement("div")
        newArticle.innerText = element.title
        articles.appendChild(newArticle)
    });

    // content 띄워보기
    const article_content = document.getElementById("article_content")
    response_json.forEach(element => {
        const contents = document.createElement("div")
        contents.innerText = element.content
        article_content.appendChild(contents)
    })

    // content가 NULL인 애들 때문에 title은 9개, content는 6개가 떠서 매칭인 안 됨.
    // 제목이랑 내용 같이 띄워보기
    const content_with_title = document.getElementById("content_with_title")

    response_json.forEach(element => {
        const articleSet = document.createElement("div")
        articleSet.innerText = element.title + " " + element.content
        content_with_title.appendChild(articleSet)
    })
    
}

그리고 캠퍼분께 js 질문하다가 DOM이란 것도 알게 되었다.