TIL 20230604

728x90

오늘 목표

자바스크립트 문법 종합반 수강

TIL 리뷰

TIL 작성

오늘 한 것

TIL 리뷰

TIL 작성

1. map과 innerHTML을 이용하여 카드 붙이기

알게된 것

1. cards.innerHTML

2. map 돌리기 (return 값을 temp_html로 준다.)

3. .join("")

cards.innerHTML = movies
                .map(function append(movie) {
                    return (`<div class= "card">
                    <div class = "buttons">
                    <button class = "lovebtn" id="${movie.id}" type="button">♥︎</button>
                    <button class="deletelove" id="${movie.id} type="button">⟲</button>
                    </div>
                    <div class="cardbody" id="${movie.id}" >
                    <p class="alltime" id="${movie.id}">${((localStorage.getItem(movie.id)).length) - 1} times loved this movie</p>  
                    <img class="allimg" id="${movie.id}"  src="https://image.tmdb.org/t/p/w500${movie.poster_path}"></img>
                    <p class="allrank" id="${movie.id}" >${movies.indexOf(movie) + 1}</p>
                    <p class="allvote" id="${movie.id}"  >★ ${movie.vote_average}</p>  
                    <h4 class="alltitle" id="${movie.id}" >${movie.title}</h4>
                            
                </div>
                </div>`)
                })
                .join("")
            cards.addEventListener("click", clickAllChart)

2. use strict 에서의 세미콜론(;)과 콤마(,)

문제

모듈을 사용하는 상황에서 1개의 이벤트 안에 두 개의 함수를 실행시키려 한다.

시도

콤마를 이용한 두 개의 함수의 구분 > 성공

세미콜론을 이용한 두 개의 함수의 구분 > 성공

아무것도 없이 두 개의 함수를 줄바꿈으로 구분 > 성공

해결

use strict와 콤마, 세미콜론은 관계가 없다.

export function clickAllChart({ target }) {

    if (target === cards) return;

    if (target.matches(".lovebtn")) {
        lovefunc(target.id)
            load()
            location.reload()
    }
    else if (target.matches(".details")) {
        localStorage.setItem('sendid', target.id)
        detailpage()
    }
    else if (target.matches(".cardbody, .alltime, .allimg, .alltitle, .allvote")) {
        alert(`영화 ID : ${target.id}`);
    }

}

알게 된 점

세미콜론, 콤마는 use strict와 큰 관계가 없다.

콤마 연산자를 사용할 경우, 왼쪽에서 오른쪽으로 순서대로 실행되며, 가장 마지막의 표현식만이 반환된다.

콤마 연산자는 가독성을 저하시켜서 코드 동작결과를 예측하기 어렵게 만드는 경향이 있어서 사용을 권장드리지 않는다.

참고 자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comma_operator

정리

map과 innerHTML을 이용하여 카드 붙이기