부트캠프에서 과제가 주어졌다.
구현 해야하는 UI
1) 영화 API를 받아 영화 리스트 조회
2) 영화 리스트 검색
조건
- 순수 바닐라 자바스크립트만 사용할 것
아래 유튜브 강의를 많이 참고하였다.
https://www.youtube.com/watch?v=9Bvt6BFf6_U
만든 순서 및 유용한 기능
1) HTML 뼈대 생성
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에서 가져다쓰는게 가능 }
기존 레이아웃이 있고 그 레이아웃으로부터 틀이 이동하는 변형을 줄 수 있음.
3) 서버 구현
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)로 들어가야 안에 있는 내용물을 쓸 수 있기 때문에 저렇게 썼다.
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 부분)