2024.1.8 프로젝트 영화 페이지 만들기

주제 : 인기 영화 페이지 제작

제작기간 :  2024. 01. 03 ~ 2024. 01. 08

제작인원 : 1인(개인프로젝트)

github : https://github.com/gidalim/moviePage

 

 

제작 주요 사항

 

1. 순수 자바스크립트로 작성

2. TMDB의 open API를 이용한 서버통신을 구현

3. 카드 페이지에 제목, 요약, 포스터, 평점을 표기하고 클릭시 id를 나타내는 alert창을 구현

 

 

특이사항 : firebase를 통한 hosting을 진행하였음.

 

최종 페이지 : https://mymovie-9fbbd.web.app/

Typhon's Movie

 

구현 항목

1. APIKEY를 별도의 js문서로 생성하여 모듈화하여 추가하였음
2. fetch를 통한 서버통신 기능에 async / await를 사용하였음
3. fetch의 데이터를 기반으로 생성자 함수를 이용하였고 함수 내부의 메서드에 각각의 데이터를 담았음.
4. 데이터를 map메서드를 통해서 배열로 전개하였으며, async / await를 사용하여 데이터를 동기적으로 처리하였음.
5. 생성된 배열을 forEach메서드와 insertAdjacentHTML메서드를 통해 html페이지를 제작하였고 동시에 click 이벤트 리스너를 활용하여 영화의 ID를 조회하는 기능을 구현하였음.
6. 이벤트 리스너와, preventDefault 메서드를 이용해 새로고침을 방지하였고, 검색 결과를 도출 할 수 있게 구현하였음.
7. toLowerCase 메서드를 통해 검색결과가 대/소문자 상관없이 출력되도록 구현하였음.
8. css의 flex 기능을 사용 기본적인 정렬과 id, class에 맞는 메서드를 부여하여 구현하였음.

 

 

 

 

개발간 문제점

1.  fetch의 데이터는 객체로 전송되는데, 그 데이터를 '순서'에 맞게 정리해야한다는 생각에 많은 시간이 소요되었음.
   * 부분적으로 배열과 객체에 대한 반복학습과 이론 정리가 조금 더 필요함을 느껴 시간을 많이 사용했지만 확실하게 구분하여 사용 할 수 있게 되었음.
2. 반복문으로 html을 생성할 때 기존에 innerHTML을 사용, click 이벤트 리스너가 가장 마지막 폼에만 구현되는 걸 확인하였고 해당 부분을 insertAdjacentHTML 로 수정하게 되었음.

movieBoxes.forEach((movieBox) => {
const movieContainer = document.getElementById('movieContainer');

movieContainer.innerHTML += movieBox.createCard();  // 기존 생성 코드

  
 
movieBoxes.forEach((movieBox) => {
const movieContainer = document.getElementById('movieContainer');

const cardHtml = movieBox.createCard();  // 수정한 코드
movieContainer.insertAdjacentHTML('beforeend', cardHtml);

* 기존의 innerHTML += 같은 경우 요소가 변경하며 추가하는 방식이고 insertAdjacentHTML 메서드 같은 경우는
 insertAdjacentHTML(위치, text(여기서는 함수 movieBox.createCard를 실행하는 것으로 실행했습니다.)) 와 같이 선언되어 beforeend : 즉 요소 바로 안에서 마지막 children에 위치했습니다. movieContainer는 영화 카드슬롯 전체를 의미하며 그 마지막 카드 바로 뒤에 html을 추가'만' 하는 것으로 코드를 변경한 셈이 되는 것입니다.
 만약 innerHTML을 그대로 사용한다면, 새로운 movieBox.createCard이 실행 될 때, 이벤트 리스너가 제거되고 
추가된 맨 마지막 movieBox.createCard의 클릭 이벤트만 활성화 될 것입니다. (실제로 그랬습니다.)

 

3. css의 flex 기능을 사용 기본적인 정렬과 id, class에 맞는 메서드를 부여하여 구현하였으나, 시간상의 문제로 기존에 기획했던 새로고침 버튼, 사이드 바의 구현을 계획을 제거하고 필요한 기능을 부분적으로 도입함.

* css의 grid와 flex의 기능을 조금 더 사용해보고 익혀 필요한 부분에서 알맞은 메서드를 사용 할 수 있도록 추후 개선이 필요함.