[개인 과제]인기 영화 사이트 01 - 사이트 틀잡기, API 호출하기

드디어 개인 과제.....!

내일 배움 캠프에서 자바스크립트 수업을 시작한 지 1주일이 되었다. 예정대로 오늘 오전 개인 과제를 공지해 주셨다.

지금 공부하던 내용도 이해가 가지 않는 부분이 많아서 걱정이 되었다. 그리고 대망에 개인 과제를 보았는데..!!! 

과제 예시로 보여주신 사이트이다.

인기 영화 리스트를 볼 수 있는 사이트를 만들라고 하셨다. 제시해주신 필수요구사항은 다음과 같다.

1. 라이브러리 없이 순수 바닐라 자바스크립트를 사용할 것
2. TMDB 오픈 API 사용하여 인기영화 데이터를 가져와서 사용할 것
3. 받아온 영화 리스트를 카드형식으로 구현
4. 영화 검색 기능 구현
5. 하기 기재된 Javascript 문법 요소를 사용하여 구현
   1. const와 let만을 이용하여 변수선언
   2. 화살표함수
   3. 배열 메서드 map, filter 등등
   4. DOM 제어하기

그리고 부트스트랩도 없이 UI를 구현하라고 하셨다!!!! 디자인 쪽은 정말 자신 없어서 눈물 나는 상황이었지만 Node반 한정으론 부트스트랩 사용을 허용해 주셨다.

 

프로젝트 이름을 뭔가 그럴싸하게 지으려고 고민하다가 결국 쉬운 이름으로 해버렸다...

그리고 대충 카테고리 별로 폴더를 나누었다.

 

vscode 켜서 'git init' 명령어로 초기화해주고 github와 연결시켰다.

깃허브와도 연결이 잘되었다! (추가적인 명령어가 더 필요한데 사진을 못 찍었다 🥲)

 

index.html 파일을 만들어서 켰는데 뇌정지가 왔다... html과 css는 쥐약이라 어떻게 틀을 잡아가야 할까 막막했다.

아는 프런트엔드 쪽에서 근무하고 계신 형님에게 자문을 구해서 대충 틀을 잡고 작업했다.

중간 작업 간에 사진을 찍지 못해서 완성본으로 넘어왔다. Bootstrap을 이용하여 컴포넌트를 가져다 사용하니 그럴싸해 보였다.

백엔드 공부하시는 분들 중 화면개발이 필요하다면 Bootstrap을 적극 사용해 보자.

 

https://getbootstrap.com/

Bootstrap

 

그리고 영화정보는 위에 언급한 것처럼 TMDB를 사용했는데 전 세계적으로 많이 사용하는 영화정보 오픈 API라고 한다.

데이터가 필요하면 가입해서 사용하면 된다.

https://www.themoviedb.org/?language=ko

The Movie Database (TMDB)

가입 후 다음과 같이 제공되면 내 JS파일에 가져다가 사용만 하면 된다.

 

나는 getMovieList라는 함수를 만들어서 그 안에 fetch를 넣었고 불러온 데이터는 response.results 배열객체로 받을 수 있다.

printMovieList에 인자값으로 넣어줬다.

printMovieList이다. 이 메서드 안에서 검색까지 다 처리하고 있어서 코드가 지저분한 느낌이다. 검색 키워로 검색을 할 때 대소문자 구분이 되지 않아서 정상적인 값이 출력이 안 되는 문제가 있었다. 전에 강의에서 알고리즘 문제를 풀 때 모두 대문자로 만들어서 처리하던 생각이 나서 UpperCase를 사용하여 영화제목과 검색키워드 둘 다 대문자로 만들어서 비교했다.

 

일단 1일 차 만에 필수요구사항은 모두 충족해서 만들었다. 추후에 어떤 버그가 터질지는 모르겠지만 내일부터는 자잘한 기능을 더 추가해보려고 한다.