1. TMDB API 연동 및 데이터 가져오기
1-1. 프로젝트 파일 구조 설정
튜터님의 조언에 따라 src파일안에 자바스크립트 파일을 넣고 가져올 js 파일을 <script type="module">와 같이 script 태그에 type이 module 임을 명시하였다.
Module이란?
코드를 해당 파일 내부에서만 한정할 수 있도록 모듈화하는 것
즉, 한 모듈이라고 하는 것은 한 파일 안에 작성돼있는 코드를 말한다.
모듈화를 하면 기본적으로는 서로 다른 모듈(즉 서로 다른 파일)에서는 다른 파일에 있는 것들을 접근하거나 볼 수 없다.
따라서 다른 모듈에서 어떤 모듈의 함수를 이용하고 싶다면 제공하고자 하는 모듈에서는 export를, 사용하고자 하는 모듈에서는 import를 사용해야한다.
Module의 필요성
여러 개의 파일이 있을 때 각각의 파일의 모든 코드들을 global scope로 측정된다.
즉 파일 안에 작성된 함수들은 브라우저 환경이라면 window에, 노드 환경이라면 global에 등록된다.
문제는 어떤 파일들에서 중복적인 이름의 함수가 구현돼있을 때 이름 충돌이 발생한다.
가져다가 사용하는 라이브러리에서 동일한 이름으로 사용하는 함수가 있을 수도 있을 것이다.
따라서 규모가 조금이라도 큰 프로젝트라면 모듈화하는 것이 안전하다.출처 : https://10000cow.tistory.com/entry/JavaScript-%EB%AA%A8%EB%93%88%ED%99%94%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0Module
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<script type="module" src="src/script.js"></script>
</body>
</html>1-2. TMDB API 키 발급 및 API 데이터가져오기
// TMDB API 인기 영화 데이터 가져오기
const options = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4YzA0MmRkMjU5ZmY3NDY3OGZhYWQ5ZmM5OTNkZTM3MSIsIm5iZiI6MTczNjI5ODAxNC40NDYsInN1YiI6IjY3N2RjZTFlYjExZDA4ODExMTdhZjllMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.lh4p7D1aiISP-T8-lYWAbTXcJNMLecHQch9r-_-jwiQ'
}
};
//fetch(url, 옵션 객체) -> promise 타입의 객체를 반환(return)
fetch('https://api.themoviedb.org/3/trending/movie/day?language=ko-KR', options)
.then(res => res.json()) // 가지고 오면 json에 요청
.then(res => console.log(res)) //resolve
.catch(err => console.error(err)); //reject
트러블 슈팅
 |  |
|---|---|
| https://api.themoviedb.org/3/trending/movie/day?api_key=${key} 입력할 때는 제대로 뜬다. | 그러나 한글을 적용하려고 https://api.themoviedb.org/3/trending/movie/day?api_key=${key}?language=ko-KR 입력하면 유효하지 않은 키라고 뜬다. |
https://api.themoviedb.org/3/trending/movie/day?api_key=${key}?language=ko-KR 에서 api_key=${key}와 language=ko-KR사이에 ?가 아니라 &를 사용해야 했다. 그 이유는 각각이 키/값으로 이루어진 매개변수이기 때문이었다. 웹페이지 주소에 URL 매개변수를 추가하기 전에 이미 매개변수가 있는 경우에는 그 매개변수 추가를 위해 이미 ‘?’가 사용되었으므로 맨 처음 시작하는 language=ko-KR 앞에 ? 대신 &를 붙여 주어야 했던 것이다.
 |
|---|
| https://api.themoviedb.org/3/trending/movie/day?api_key=${key}&language=ko-KR 입력시 제대로 언어가 한글로 적용이 된다. |
1-3. 콘솔에서 데이터 출력확인
갈피를 못잡다가 전에 작성한 Fetch개념 익히기를 보고 따라 하니 데이터 출력이 제대로 됐다.
function trendMovie() {
const url = `https://api.themoviedb.org/3/trending/movie/day?api_key=${key}&language=ko-KR`;
fetch(url).then(res => res.json()).then(res => {
let rows = res['results'];
rows.forEach(a => {
let title = a['title'];
let overview = a['overview'];
let rating = a['vote_average'];
let poster = a['poster_path'];
console.log('title:',title);
console.log('overview:',overview);
console.log('rating:',rating);
console.log('poster:',poster);
});
})
}
trendMovie() |
|---|
| 제대로 출력되는 것을 확인 할 수 있다. |
2. 전반적인 레이아웃
2-1. HTML - 시멘틱 태그 사용해보기
2-2. CSS -Flexbox 또는 Grid 레이아웃을 사용해 스타일링을 적용
-
nav의 경우
flex를 사용하였고 영화카드를 만들기 위해서는grid를 이용하였다. -
flex 사용
nav>ul {
background-color: azure;
padding: 20px;
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
}- Grid 사용
#mainDiv {
display: grid;
/* auto-fill하고 헷갈리지 말자 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}트러블슈팅
최대한 반응형으로 만들고 싶었는데 제대로 구현이 되지 않았다. grid-template-columns이 문제라고 생각되어 repeat(3, 1fr);, repeat(auto-fill, minmax(200px, 1fr)) ; 등 다양한 변화를 주었으나 원하는 대로 구현이 되지 않았다.
결국 튜터님께서 정답을 알려주셨고 아니라 repeat(auto-fit, minmax(200px, 1fr));을 사용해야 했다.
auto-fit 은 해당 row 안에서 현재의 요소의 크기를 늘려서 너비에 맞게 채워준다. 그러나 auto-fill 은 설정된 너비 내에서 가능한 많은 셀들을 만들어주고 빈 공간이 생겨도 셀의 길이를 늘리지 않는다.
 |  |
|---|---|
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
