[FE] 영화 검색 사이트(바닐라JS) - (3) 하단부_영화 목록

🖐️ 구현 목표 🖐️
- TMDB 연동
- 부트스트랩 Cards 이용해서 TMDB에서 받아온 영화 api 정보 출력
- 카드 클릭시 영화 id값 alert 창 띄우기
- 마우스를 가져다대면 애니메이션 효과 추가

 

01 html

---

영화 포스터 이미지, 영화 제목, 영화 내용(줄거리), 평점 등을 가져와서 카드로 만들기 위해서 부트스트랩에 있는 Cards를 이용하였다. 그리고 모든 카드들을 div로 묶어서 css를 변경해주기위해 div에 mycards 클래스를 적용해주었다.

<div class="mycards">
        <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
        </div>
</div>

 

 

02 CSS

---

mycards는 각 카드들을 하나로 묶어놓은 커다란 div 덩어리이고 크기와 위치를 지정해주었다. 또한, col은 그 안에 있는 각각의 카드들의 css를 지정해주었는데 모서리를 둥글게하고 위치를 조정해서 카드 색상에 맞춰 배경색을 화이트로 맞춰주었다.

.mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
}

.col {
            border: 2px solid rgb(72, 94, 72);
            border-radius: 10px;
            padding: 10px 10px 10px 10px;
            margin: 10px 50px 10px 50px; 
            background-color: white;
}

 

그 다음으로 .col:hover는 이번에 찾아보면서 처음 알게 된 것인데 애니메이션을 줄때 사용을 한다. 그래서 마우스를 가져다대면 내가 만들어둔 스타일대로 그림자가 생기도록 하여 좀더 생기있게 만들어보았다. 그리고 마지막으로 카드안에 제목과 평점의 글씨를 굵게 하여 좀 더 눈에 띄도록 구현했다.

 

.col:hover {
            border: 2px solid rgb(72, 94, 72);
            border-radius: 10px;
            padding: 10px 10px 10px 10px;
            margin: 10px 50px 10px 50px; 
            background-color: white;
            
            box-shadow:3px 3px 3px 3px #999;

}

.card-title {
            font-weight: bold;
            color: #4a724ae3;
}

.text-body-secondary {
            font-weight: bold;
            color: #173d17e3;
}

 

03 Javascript

---

<div class="mycards">
        <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
        </div>
</div>

 

 1) TMDB API 연동

원래 TMDB 사이트에서 API Reference를 통해 제공해주는 코드가 있는데 이상하게 잘 연결이 안됐다. 그래서 다른 분이 올려주신 사이트 링크에 내 api key를 적용해서 값을 url에 저장하고 fetch를 통해 값을 data로 넣어서 하나하나 값을 가져올 수 있었다. 이부분은 다시 사이트를 들어가서 또 다른 프로젝트로 연습을 해봐야겠다. 꼭 연동시켜주겠어..

const url = "https://api.themoviedb.org/3/movie/popular?api_key=e13b238a25a53f6fd653cc0954db94cd&language=ko-KR";
        let movies = [];

        // 영화 API 값을 가지고 와서 카드를 전부 추가
        for(let i = 0; i < 20; i++) {
            fetch(url)
            .then((res) => res.json())
            .then((data) => {
        		.......................
				.......................
                .......................
            }
        }

 

각각의 값은 아래와 같이 data 안에 이 순서대로 가져오면 됐다. 여기서 조금 중요한 부분이 영화 이미지는 전체 경로가 적혀있는게 아니여서 앞에 주소를 문자열로 앞에 붙여서 새로 변수에 저장해주고 사용해주어야한다는 점이었다

let original_title = data["results"][i]["original_title"]; // 영화 제목

let overview = data["results"][i]["overview"]; // 영화 내용, 줄거리

let poster_path = data["results"][i]["poster_path"]; // 영화 이미지 경로인데 앞부분이 없음
let img_url = "https://image.tmdb.org/t/p/original"+poster_path; // 앞부분 뒤에 붙여서 다시 저장

let vote_average = data["results"][i]["vote_average"]; // 영화 평점
let id = data["results"][i]["id"]; // 영화 id

 

 

 2) TMDB API에서 받아온 영화 정보를 담을 card 생성(부트스트랩)

백키(`)를 이용해서 card를 생성하는 코드를 temp_html 변수에 저장하고 DOM 요소를 자바스크립트로 삽입시켜주기위해 querySelector를 이용해서 card부분에 삽입시켜주는 코드인 insertAdjacentHTML을 사용했다.

let temp_html = `
                <div class="col" onclick="alert('영화 ID : '+${id})">
                    <div class="card h-100">
                    <img src="${img_url}" class="card-img-top" alt="..."/>
                    <div class="card-body">
                        <h5 class="card-title" id="count">${original_title}</h5>
                        <p class="card-text">${overview}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">평점 : ${vote_average}</small>
                    </div>
                    </div>
                </div>`;

document.querySelector('#card').insertAdjacentHTML('beforeend', temp_html);

 

 

 3) 카드 클릭시 alert 창 띄우기 - 영화 id 값 

똑같이 card를 삽입하는 코드를 다시 보면 각각의 카드에 onclick을 사용하여 클릭시 alert 창을 띄우도록 강제 이벤트를 발생시키는데 이또한, 함수를 호출하도록 해서 이벤트를 발생시키도록 구현하려고 하였으나 되지않아서 강제로 이벤트를 발생시키도록 코드를 변경해서 적용하였다. 다시 호출 이벤트를 연습해보아야할 것 같다.

let temp_html = `
                <div class="col" onclick="alert('영화 ID : '+${id})">
                    <div class="card h-100">
                    <img src="${img_url}" class="card-img-top" alt="..."/>
                    <div class="card-body">
                        <h5 class="card-title" id="count">${original_title}</h5>
                        <p class="card-text">${overview}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">평점 : ${vote_average}</small>
                    </div>
                    </div>
                </div>`;

document.querySelector('#card').insertAdjacentHTML('beforeend', temp_html);