개인과제 (#1 영화 TOP 20 검색 사이트 구현 ) 피드백 개선점 반영

1. 개인과제 : #1 영화 TOP 20 검색 사이트 구현 

https://zerotonine2da.tistory.com/40

#1 영화 TOP 20 검색 사이트 구현 (+오픈 api 사용)

#1 영화 TOP 20 검색 사이트 구현

---

개인과제 피드백

[장점]

- 필수구현사항들을 잘 구현해주셨습니다.
- 카드 마우스오버 시 호버애니메이션 멋지게 잘 구현해주셨습니다.

- 파비콘까지 적용해주신 부분 너무 좋습니다.
- 배포까지 해주신 점 아주 좋습니다. 

 

[개선점]

- let map_arr = response.results.map((v) => v); 이 코드는 let map_arr = response.results; 와 동일합니다.
- forEach 문안에서 document.querySelector('#cardList').append(temp01); 20번 반복해서 append하여 브라우저 화면에 DOM 을 추가하는 것보다는 추가할 내용을 20번 누적한 뒤에 한번의 명령으로 한번에 20개의 카드를 화면에 나타내는 방식을 개선해 보시면 더 좋을 것 같습니다.

---

개선 1. 20번 반복 후 append => 20번 누적 후 한번의 명령으로 20개의 카드를 화면에 표시

[개선전]

* 기존 코드 : forEach문으로 20번 반복해서 데이터 가져오기 + 각각 append해서 =   20번 반복했음..

map_arr.forEach((x, i) => {

            title_group.push(x['originalTitle']);

            const temp01 = document.createElement('div');

            temp01.className = 'innerDiv';

            let index = i + 1;

            let id = x['id'];

            let originalTitle = x['original_title'];

            let overview = x['overview'];

            let vote_average = x['vote_average'];

            let baseUrl = 'https://image.tmdb.org/t/p/original';

            let posterPath = baseUrl + x['poster_path'];

            temp01.innerHTML = `

            <a class="cardContainer">

    <div class="top">

        <div class="title"><strong>${originalTitle}</strong></div>

        <div class="index">${index}</div>

    </div>

    <div class="img">

        <div class="hoverTop">

            <div class="idBtn" ><button class="idBtn01" onclick="alert('영화 Id: ${id}')">영화 id 보기</button> </div>

            <p class="p1"><strong>[제목]</strong> ${originalTitle}</p>

            <p class="p2"><strong>[평점]</strong> ${vote_average}</p>

        </div>

        <div class="hoverBottom">

            <p class="p3"><strong>[요약]</strong> ${overview}</p>

        </div>

        <div class="imgFrame" id="imgFile">

            <img src="${posterPath}" alt="${originalTitle}" onclick="alert('[${originalTitle}] id : ${id}')" />

        </div>

    </div>

</a>

       

       

            `;

            document.querySelector('#cardList').append(temp01); //23.10.30 주석처리 (이 코드는 20번 실행하게됨)

        });

[개선후]

1) forEach => map으로 복사 후 innerHTML에 넣기 위해 뒤에 join('')하여 문자열로 변경

   * 포인트는 map은 객체의 배열 길이만큼 복사

=> 개선점 1&2 포인트를 한번에 개선 가능

//data:fetch로 가져온 데이터 (result.results)

function drawCard(data) {

    let attachCardList = document.querySelector('#cardList');

    attachCardList.innerHTML = data

        .map(

            (movie) => `

            <a class="cardContainer">

                <div class="top">

                    <div class="title"><strong>${movie.original_title}</strong></div>

                </div>

                <div class="img">

                    <div class="hoverTop">

                    <div class="idBtn" ><button class="idBtn01" onclick="alert('영화 Id: ${movie.id}')">영화 id 보기</button> </div>

                    <p class="p1"><strong>[제목]</strong> ${movie.original_title}</p>

                    <p class="p2"><strong>[평점]</strong> ${movie.vote_average}</p>

                </div>

                <div class="hoverBottom">

                    <p class="p3"><strong>[요약]</strong> ${movie.overview}</p>

                </div>

                <div class="imgFrame" id="imgFile">

                  ${movie.poster_path}" alt="${movie.original_title}" onclick="alert('[${movie.originalTitle}] id : ${movie.id}')" />

                </div>

                </div>

            </a>

            `

        )

        .join('');

}

---

2) 기존은 사진마다 onclick이벤트를 넣었음 ( * 사진을 클릭하면 영화의 id값이 나옴.)

>> 이미지에 마우스 hover하면 id값 클릭이 불가능 할 것 같아, hover된 화면에 [버튼]을 추가하였었음

>> 그래서 버튼을 누르면 영화 id값이 출력이 되는 상황

<button class="idBtn01" onclick="alert('영화 Id: ${movie.id}')">영화 id 보기</button>

 <div class="img">

    <div class="hoverTop">

    <div class="idBtn" ><button class="idBtn01" onclick="alert('영화 Id: ${movie.id}')">영화 id 보기</button> </div>

    <p class="p1"><strong>[제목]</strong> ${movie.original_title}</p>

    <p class="p2"><strong>[평점]</strong> ${movie.vote_average}</p>

</div>

 

* drawCard 함수 마지막 줄에 사진 클릭시 영화 id값 보여주는 eventListener추가 (대상은 attachCardList)

>> 버튼을 없애고, 이미지를 클릭하면 alert창으로 나오도록 설정

>> 이미지 전체 부분을 어디든 클릭해도 나올 수 있도록 함수 구성

//data:fetch로 가져온 데이터 (result.results)

function drawCard(data) {

 :

 :

 attachCardList.addEventListener('click', clickCardImage); //사진 클릭시 영화 id값 보여주기

}

 

// 1. 이미지 클릭시 영화id값 보여주기

function clickCardImage({ target }) {

    if (target.matches('.cardContainer')) {

        alert(`영화 id: ${target.id}`);

    } else {

        alert(`영화 id: ${target.parentNode.id}`);

    }

}

---

3) API 데이터 fetch 시, async + await를 활용

api데이터를 받아온 후, 내가 짠 코드(drawCard함수등)이 실행되도록  수정

** JS코드는 비동기 < 동기가 먼저 실행됨

//즉시실행함수로 진행

(async function () {

    try {

        const result = await fetch(

            'https://api.themoviedb.org/3/movie/now_playing?language=ko-US&page=1',

            options

        ).then((response) => response.json());

        data = result.results;

        drawCard(data);

    } catch (error) {

        console.log(error);

    }

})();

 

 

* 깃허브 수정된 코드로 반영 완료.