TIL) 10주차 2일

프로젝트를 진행하면서 js가 너무 어렵고 이해가 잘 안됐지만

 

끝까지 js에 상당히 도움을 많이준 스승과 팀원들에게 감사를 표합니다.

 

프로젝트는 끝났지만 끝내 오류와 추가 수정사항들을 팀원들과 수정하였다. 

---

전체 게시글에 '저장된 별점' 가져오기

---

기존 코드에서는 변수명 끝에 숫자만 다른 거의 같은 변수명들을 계속 나열해서 보기에도 굉장히 안좋고 별로였다. 그리고 기존에 있던 별점도 첫번째 게시글을 제외하곤 나오지 않았다.

// 게시글 목록 UI
function postList(posts, post_list) {
    posts.forEach(post => {
    				...	
        const newCardStar = document.createElement("div")
        newCardStar.setAttribute("class", "rating")
        newCardStar.setAttribute("id", "star")
        newCard.appendChild(newCardStar)

        const newCardinputStar1 = document.createElement("input")
        newCardinputStar1.setAttribute("class", "rate_radio")
        newCardinputStar1.setAttribute("type", "checkbox")
        newCardinputStar1.setAttribute("value", "1")
        newCardinputStar1.setAttribute("id", "rating1")
        newCardinputStar1.setAttribute("disabled", "")
        newCardStar.appendChild(newCardinputStar1)

        const newCardlabel1 = document.createElement("label")
        newCardlabel1.setAttribute("for", "rating1")
        newCardStar.appendChild(newCardlabel1)

        			...

        const newCardinputStar5 = document.createElement("input")
        newCardinputStar5.setAttribute("class", "rate_radio")
        newCardinputStar5.setAttribute("type", "checkbox")
        newCardinputStar5.setAttribute("value", "5")
        newCardinputStar5.setAttribute("id", "rating5")
        newCardinputStar5.setAttribute("disabled", "")
        newCardStar.appendChild(newCardinputStar5)

        const newCardlabel5 = document.createElement("label")
        newCardlabel5.setAttribute("for", "rating5")
        newCardStar.appendChild(newCardlabel5)

        //원래 별 띄우기
        for (let i = 1; i <= post.star; i++) {
            document.getElementById(`rating${i}`).checked = true;
        }

    });
}

 

 

• 해결방법

불필요한 반복적인 코드를 줄이기 위해 for문을 사용하였고, 가장 중요한 별점이 안나왔던 이유는 id의 값이 중복이 되어버리기 때문에 생긴 것이다... 정말 기초적인 문제였다는게 충격이였다..

'value' 값과 'rating'값을 i 와 post.pk값을 통해 게시글이 만들어 질 때마다 변경되게 만들어주었다. ('post.pk' 값은 게시글의 번호이다) 

function postList(posts, post_list) {
    posts.forEach(post => {
       			...

        const newCardStar = document.createElement("div")
        newCardStar.setAttribute("class", "rating")
        newCardStar.setAttribute("id", "star")
        newCard.appendChild(newCardStar)

        for (let i = 1; i <= 5; i++) {
            const newCardinputStar = document.createElement("input");
            newCardinputStar.setAttribute("class", "rate_radio");
            newCardinputStar.setAttribute("type", "checkbox");
            newCardinputStar.setAttribute("value", `${i}`);
            newCardinputStar.setAttribute("id", `rating${i}-${post.pk}`);
            newCardinputStar.setAttribute("disabled", "");
            newCardStar.appendChild(newCardinputStar);
        
            const newCardlabel = document.createElement("label");
            newCardlabel.setAttribute("for", `rating${i}-${post.pk}`);
            newCardStar.appendChild(newCardlabel);            
        }

        //원래 별 띄우기
        for (let j = 1; j <= post.star; j++) {
            document.getElementById(`rating${j}-${post.pk}`).checked = true
        }

 

---

'좋아요' 기능

---

• 첫번째 방법

 

window.onload = async function () {
   		...
     if (user) {
        	...
        //좋아요 하트색 세팅
        let like = document.getElementById("like")
        let dislike = document.getElementById("dislike")
        user.like_posts.forEach((obj) => {
            if (postId == obj.id) {
                like.setAttribute("style", "display:flex;")
                dislike.setAttribute("style", "display:none;")
            }
        })
    }
        
        
    // 하트 개수 보이기
    const count = document.getElementById("count")
    count.innerText = `좋아요 ${post.like.length}개`

    // 별점 보이기
    for (let i = 1; i <= post.star; i++) {
        document.getElementById(`rating${i}`).checked = true
    }

}

 

 

• 두번째 방법

window.onload = async function () {
    		...
    const count = document.getElementById("count")


    let count_like = 0
    for (let obj in response.like) {
        if (obj=='0'){
            count_like += Number(obj) + 1
        }
        else{
            count_like += Number(obj)
        }
    }

    count.innerText = `좋아요 ${count_like}개`

    const exist_post = await getPost(postId);
    console.log(exist_post)

    for (let i = 1; i <= exist_post.star; i++) {
        document.getElementById(`rating${i}`).checked = true;
    }

}