이번 주는 개인프로젝트가 있다.
바로 영화 검색 사이트 만들기
이번 프로젝트에서 순수 자바스크립트로 이벤트를 구현해야 하며, 제이쿼리는 사용하지 못한다.
근데 나는 제이쿼리 없이 사이트를 만들어본 적이 없다.
일단 시작.
구상하기
첫번째로는 이번 프로젝트의 주요 개발 사항을 추려보았다.
- API로 데이터 받아오기
- 영화 리스트 구현
- 모달창
- 검색 기능
- 북마크(로컬) 기능
이 사항들을 구현하는 것을 목표로 정하고
화면을 어떻게 만들지 구상했다
그리고 발제에서 튜터님이 참고용으로 보여주셨던 화면.
기초적인 ui로 되어있지만, 영화 포스터의 이미지들의 색감이 예쁘기 때문에 사이트 디자인이 괜찮아 보이는 효과가 있다.
이 좋은 이미지들을 살릴 수 있는 디자인을 만들어 보고 싶다.
레퍼런스 찾기
넷플릭스 나 왓챠 사이트가 생각났다. 이쪽은 영화포스터를 올리는 사이트는 아니지만 검은 백그라운드가
영화관의 느낌을 줄 수 있을것 같았다.
기술구현이 목적이긴 하지만 대충 컨셉정도만이라도 생각해 보는 것이 작업을 재밌게 해 줄것 같아서 찾아봤다.
작업폴더 생성
작업폴더를 만들었다.
로컬에서 뼈대 작업 후 깃헙에 업로드하고, 디테일한 기능을 추가할 예정이다.
html 마크업
목표는 시맨틱태그 사용과 가독성 좋은 구조를 가지는 단순한 마크업을 하는 것이다.
페이지 상단에는 타이틀과 검색창을, 아래에 영화 리스트가 있는 구조로 나눌 것이다.
css 작업
우선 웹폰트와 초기화코드를 복사해 왔다.
그리고 약갼의 수정을 거쳐서 타이틀 영역을 마무리했다.
TMDB API로 데이터 불러오기
1. 회원가입> 로그인 > 설정 > API 에 들어간다.
2. API 키 요청을 클릭한 뒤 Developer / Professional 선택사항이 뜨는데 Developer를 선택한다.
3. 주소, 앱 이름 등 정보를 쓰라고 뜨는데 대충 입력하면 심사없이 key가 발급된다.
key 발급 후 API Reference에 들어와서 사용언어를 JS로 설정해 주었다.
라는것 까지는 알겠는데 리스트는 어디서 받아오는것인가? 에서 한번 막혀서 튜터님께 여쭤보았다.
좌측에 내가 받아올 데이터의 테마를 확인할 수 있는데,
프로젝트 주제가 인기있는 영화를 받아오는것이니 popular 항목으로 들어가준다.
그리고 FETCH REQUEST 에서 인기있는 영화 리스트를 받아올 수 있는 코드를 복사할 수가 있다.
Try it 을 눌러 바로 JSON 데이터를 확인할 수도 있고,
기본 코드에 console로 데이터를 출력해주는 부분이 있어서
프로젝트 파일에 복사한 뒤 데이터가 잘 불러와지는지 확인할 수도 있다.
fetch 코드를 업데이트 했다
기본적인 fetch 형태에서
첫번째로 사용할 속성을 분리해주었다.
분리한 데이터중 영화정보에 관한 속성은 리스트 출력 함수에서 사용하고,
total_results 라는 속성은 타이틀 바로 아래에 있는 텍스트에 span id='total_movie'을 만들어 사용했다.
total_page 속성은 나중에 페이지 기능을 추가하게 되면 사용할 예정인데 거기까지 하게될지는 잘 모르겠다.
아무튼 영화리스트가 잘 뜨는것까지는 확인을 했다 여기까지만 로컬에서 작업하고, git에 업로드했다.
오늘의 후기: 포스팅에서는 막힘이 없는것 같지만
API 부분에서 너무 막막했다. 뭐랄까 왜 영어를 잘 해야되는지 뼈저리게 느낀 시간이었다.
한 30분정도 시도해보다가 류 튜터님께 여쭤봐서 바로 해결했다.
아.. 그리고 고민할때 약간 앓는 소리를 냈는데, 그때 마이크가 켜져있어서 너무 창피했다.
앞으로 남은 큰 산은 검색과 북마크인데,
이번 프로젝트는 처음으로 git에 업로드하여 직접 커밋하는 프로젝트이기도 하고 열과 성을 쏟아서 작업해보고싶다.