[개인 과제] 영화 검색 사이트 프로젝트 회고

반응형

개인 과제 소개 📖

TMDB API를 이용한 영화 검색 사이트입니다.

Github 주소 : https://github.com/smu06030/movie-app

배포 링크 : https://smu06030.github.io/movie-app/

 

요구 사항 📌

필수 구현 사항

✅ 순수 바닐라 자바스크립트 사용

✅ TMDB API 인기 영화 데이터 가져오기

✅ 영화 정보 카드 리스트 UI 구현

✅ 영화 검색 UI 구현

✅ javascript 문법 요소를 이용해 구현

document.getElementById()
document.querySelector()
document.createElement()
setAttribute()
addEventListener()
appendChild()
preventDefault()

 

선택 구현 사항

✅ CSS flex 사용

✅ 웹사이트 새로고침 시 커서 자동 위치

✅ 대소문자 관계없이 검색 가능

✅ 키보드 Enter입력 시 클릭과 동일하게 검색

 

사용 기술 🛠️

 

이슈❓

1. 클릭, 엔터 이벤트

이슈

• 클릭, 엔터를 눌렀을 때 영화를 검색해야 하는데 각각 이벤트 리스너를 만들면 똑같은 콜백 함수를 2번 사용해야 하는 안타까운 상황이 있었습니다. (그냥 쓰고 싶었지만 개발자라면 효율이 중요하죠,,,)

해결 방법

• input, button에 각각 줬던 이벤트를 form 태그 하나에 이벤트를 줘서 클릭과 엔터 동시에 할 수 있게 수정했습니다.

// 버튼 클릭 or 엔터 입력 시 영화 검색
const form = document.getElementById('searchForm');

form.addEventListener('submit', (e) => {
  e.preventDefault();
})

 

2. Github 배포 후 에러 발생

이슈

• Github Pages에 배포 후 배포 링크에 접속하니 Failed to load resource: the server responded with a status of 404 () movie-app/js/config.js:1 에러 발생.

해결 과정

• config.js에 api key를 넣고 .gitignore에 config.js를 작성해 github에 push 되지 않게 했었는데 배포하는 과정에서 config.js를 (누락) 찾지 못해서 발생하는 에러였습니다.

해결 방법

• Github Pages와 같은 정적 호스팅을 사용하는 경우 배포 과정에서 동적으로 생성된 파일이 포함되도록 해야 하는데 아직 클라이언트만 하고 서버가 없기 때문에 어쩔 수 없이 .gitignore파일에서 config.js를 지웠습니다!

 

회고 🧐

프로젝트나 과제를 하면서 느낀 점은 쓸데없는데 빠져서 시간을 많이 잡는다는 생각을 했습니다.
javscript 기능 구현을 완벽하게 하는 게 중요하지만, css에 쓸데없이 시간을 많이 쓴 시간이었습니다. (물론 안 중요한 건 아니지만)

다음 프로젝트 할 땐 기능 구현에 좀 더 초점을 맞춰서 해야 될 것 같습니다!!