부트캠프에서 과제가 주어졌다.
> 영화 정보 사이트 만들기
구현 해야하는 UI
1) 영화 API를 받아 영화 리스트 조회
2) 영화 리스트 검색
조건
- 순수 바닐라 자바스크립트만 사용할 것
아래 유튜브 강의를 많이 참고하였다.
https://www.youtube.com/watch?v=9Bvt6BFf6_U
만든 순서 및 유용한 기능
1) HTML 뼈대 생성
- header 태그 : 페이지 title, 검색창, 검색 버튼
- main 태그: 영화정보가 붙는 창(div: 영화 포스터, 타이틀, 평점, etc)
2) CSS 꾸미기
-
box-sizing: border-box (<-> content-box)
박스 크기를 균일하게 유지하게 해주는 속성> Option
보통 css할 때 div를 사용해서 묶어주는데 컨텐츠들을 포함한 박스 크기를 고정시켜주는 속성이다. 내용물 텍스트의 길이가 길어지거나 그림이 갑자기 안뜬다거나 할 때 종종 박스 크기가 제멋대로 일 때가 있는데 고정시켜줘서 편한 기능이다.
아래는 옵션 두 가지인데 전체 박스를 어떻게 설정할 것이냐 이다.
border-box: 컨텐츠를 포함해 보더와 패딩을 합친 박스 크기
content-box: 컨텐츠만을 포함하고 보더와 패딩은 제외한 박스 크기 -
:root 기능
:root 는 CSS 변수 기능이다.
사용자가 자주쓰는 값을 담아줄 변수를 만들어 저장한다.
예를 들어 내가 만드는 웹페이지의 컬러를 잡을 때 그 색을 이름으로 만들어놓고 계속 가져다 쓰는 기능이다.
:root { --first-color: white; --second-color: rgb(61 162 136); } body { background-color: var(--second-color); // root에서 가져다쓰는게 가능 }
- transform
2D변환(전환)하는 기능
그 중에서도 translate(이동효과) Y축에 대한 변형을 사용
기존 레이아웃이 있고 그 레이아웃으로부터 틀이 이동하는 변형을 줄 수 있음.
3) 서버 구현
- TDMB 사용 : 오픈 영화 DB API 공유 사이트
1) 회원 가입 후 로그인
2) 홈페이지에서 내 페이지(오른쪽 상단 조그만 동그라미) 설정 클릭
3) API 클릭 후 API키 요청
---> DB를 받아오려면 API인증 키가 필요하다. 이게 없으면 인증이 안됐다고 안열림
4) 신청양식 채우고 제출
5) 내 페이지 다시 들어가서 API에 문서 클릭
6) 내가 원하는 API URL 가져오기
-> 이 때 본인이 원하는 언어를 선택 후 기능이 되는지 안되는지 확인 한 다음에 가져오면 된다.
나는 6)에서 문제가 있었다.
그대로 fetch를 가져와서 console.log를 찍어보면 계속해서 API-Key가 누락됐다는 결과가 떴다.
그래서 해결 방법은 아래 fetch에서 링크만 가져온 다음 API-key를 뒤에 붙이는 거다.
const API_KEY = '받은 API-key'
const URL = '받은 URL'
const API_URL = API_KEY + URL위와 같이 설정하면 편하게 URL을 가져다 쓸 수 있기 때문에 변수 선언을 해서 가져다 사용했다.
또, 위에 fetch를 그대로 가져다 사용하면 then다음에 오는 response 부분이 너무 길어져서 아예 함수를 선언해서 코드를 작성했다
- 웹 페이지에 데이터 가져오고 데이터 붙이기
function showMovies(data) {
fetch(url).then(res => res.json()).then(data => {
showMovies(data.results)
})
}받은 URL과 API를 붙여서 브라우저에서 열면 아래 캡쳐본과 같이 뜬다.
console.log(data.results)로 들어가야 안에 있는 내용물을 쓸 수 있기 때문에 저렇게 썼다.
- 페이지 내에서 검색하기 구현
검색하는 기능은 내가 처음 써보는 함수여서 이해가 조금 어려웠다.
1) TMDB사이트에 검색 기능 구현하는 가이드 찾기
아래 캡쳐본과 같은 위치에 검색 기능을 사용하는 방법을 친절하게 알려주고 있다.
자세히 보면 검색기능 구현을 하려면 사용하는 url이 조금 다르다.
따라서 검색기능 url을 또 변수 선언한다.
const searchURL = `https://api.themoviedb.org/3/search/movie?${API_KEY}&query=`보면 url 중간에 api_key를 또 입력하라 그래서 나는 귀찮아서 백틱을 쓴다음 api_key자리가 들어가는 공간에 ${API_KEY}를 넣었다.
2) javascript 변수 선언 및 함수 코드
const form = document.getElementById('form')
const search = document.getElementById('search')
form.addEventListener('submit', (e) => {
e.preventDefault()
const searchInput = search.value
if(searchInput) {
getMovies(searchURL+'&query='+searchInput)
}
})
3) HTML
<header class="head">
<h1>Find Your Movies</h1>
<form id="form">
<input type="text" id="search" placeholder="Search" class="search">
<button type="submit" class="searchBtn">Go</button>
</form>
</header>위와 같이 입력하면 input창에 검색어를 입력하고 엔터 혹은 go버튼을 누르면 타이틀 키워드 기준으로 검색한 영화 포스터만 보여준다(getMovies 부분)
