23.10.20

나는 멍청하다.

             fetch(url, options)
            .then(res => res.json())
            .then(res => {
                const movieList = res.results;

                // 엄마 노드 선택
                const cardList = document.querySelector('.cardlist');

                //빈문자열 만든 이유: foreach
                let card = "";
                
                //a

                //하나씩 담아줌
                movieList.forEach(movie => {
                    const title = movie.title; //20개의 title이 들어감
                    const overview = movie.overview;
                    const rating = movie.vote_average;
                    const imgPath = movie.poster_path;

                    const temp_html = `<div class="card" id="content">
            <img src="https://image.tmdb.org/t/p/w500${imgPath}" alt="The Godfather">
            <h3 id="title">${title}</h3>
            <p id="overview">${overview}</p>
            <p id="rating">평점:${rating}</p> 
        </div>`
                    // 20개가 들어있는 변수들을 문자열로 변경한 다음 temp_html로 넣음
                    card = card + temp_html;
                });
                cardList.innerHTML = card;
            })

url을 긁어왔고 응답을 제이슨형식으로 바꿨다. 그 제이슨에 담긴 정보에서 result를 뽑아서
movielist에 담았다.

movielist를 foreach로 돌렸다. 각 배열에서 필요한 요소를 변수에 넣었다. movie.title을 const title에 넣었음. 그렇게 4개의 변수에 제목, 줄거리, 평점, 이미지를 넣음.

그리고 그 변수들을 temp_html에 빽티와 ${}을 활용해서 넣었음. 그리고 temp_html을 빈 문자열을 사용해 card에 누적시킴. 빈 문자열을 쓰지 않으면 계속 새로운 값만 재할당되기 때문에 마지막 요소만 출력됨.

그리고 부모 노드안에 자식노드로 card를 넣음.

문자열은 불변한 데이터 타입이므로 문자열 연결(+ 연산자)이나 문자열 재할당 시 새로운 문자열 객체가 생성됩니다. 이전 문자열은 변경되지 않습니다.
[출처][23.09.01] 2일차 : 문자열 다루기|작성자 아하