개인프로젝트 1일차

오늘부터 개인프로젝트를 시작했는데 일단 프로젝트에 대해 설명해보겠다.

JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작해보기!
영화정보 오픈API인 TMDB(The Movie DB)를 사용한다.

예시화면은 다음과 같다.

<프로젝트 개요>
1. 순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현
2. 자바스크립트 문법을 최대한 활용
3. 스타일링 작업하며 css 와 친해지기

=> 필수요구사항
1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
3. 영화정보 카드 리스트 UI 구현
-> TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여주기
-> 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어가야 함
-> 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄움.
4. 영화 검색 UI 구현
-> API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력한 문자값이 포함되는 영화들만 화면에 보이도록 함.
-> 입력 후 검색버튼 클릭 시 실행되도록 함.
5. 하기 기재된 Javascript 문법 요소를 이용하여 구현
-> const와 let만을 이용한 변수 선언 필수
-> 화살표 함수
-> 배열 메소드
-> DOM 제어

오늘은 전체적인 HTML과 간단한 css작업을 진행했고, TMDB에서 오픈 API를 이용하여 데이터를 가져오는 작업도 시도해보았다.

혼자 사이트를 만들어본 것은 완전 처음이라 HTML과 간단한 CSS작업을 하는데도 오래걸렸다. VScode내에서 HTML CSS JS 파일분리하는 법도 알게 되었고, 오픈 API를 이용해 데이터를 가져와보는 것도 해보았다. 내일은 CSS에 대해 더 공부해서 추가적인 작업을 할 예정이다. 그리고 오픈API를 이용하여 데이터를 가져와 카드안에 넣어볼 예정이다.