05.12. [술술술_project. 5] MyPage Javascrpit작업 (1)

0.  오늘 배운 것

• jwt token
• JSON.parse
• async await
• fatch

 

---

1.  문제점

프론트엔드와 백엔드를 연결하기 위해 바닐라자바스크립트를 사용하였다.

바닐라자바스크립트가 익숙하지 않고, 개념이 없는 상태에서 강의에 의존하여 과제를 하려니 너무 버거웠다.

 

---

2. 시행착오 및 해결방법

1. 로컬스토리지의 토큰 맨 뒤에 있는 user_id를 가져와서 json data를 가져오기 위한 user_id와 대조하고 싶었는데, 어떻게 가져와야할지 시행착오를 겪다가 아래와 같은 코드를 입력하였다.

window.onload = () => {
    const token = localStorage.getItem('payload');
    console.log('로딩 완료!')
    // const user_id = token[-2] undefiend
    const user_id = token.slice(-2, -1)
}

이것은 더 좋은 코드가 있었다.

JSON.parse를 통해 내용물을 쪼개준 다음, user_id만 가지고 올 수 있었다.

let payload = localStorage.getItem("payload");
let payload_parse = JSON.parse(payload);
const user_num = payload_parse.user_id

 

2. 카드 껍데기를 제외하고는 모두 createElement를 사용하여 새로 만들었으며, 마지막에 카드 껍데기에 appendChild 하여서 프론트에 출력될 수 있도록 하였다.

const articles = response_json['my_articles']
    console.log(articles)

    for (i = 0; i < articles.length; i++) {
        const card = docume.getElementById("article_card")
        const title = document.createElement("div")
        title.setAttribute("class", "title")
        const content = document.createElement("div")
        content.setAttribute("class", "content")
        const image = document.createElement("div")
        image.setAttribute("img", "image")
        image.setAttribute("onclick", "image")
        card.appendChild(title)
        card.appendChild(content)
        card.appendChild(image)

        articles[i]
    }

 

---

3. 알게된 점

• window onload를 실행하냐 여부에 따라 작동하거나 하지 않는 함수도 있었다.
• forEach에 대해 조금 더 공부해봐야 겠다.