1. 영화 콜렉션 페이지 만들기
1)index.html
- script type="module" 추가 및 연결 파일 main.js로 변경
- 예시 카드 코드 삭제
<body>
<script type="module" src="./main.js"></script>
<header>
<h1>내배캠 최고 평점 영화 콜렉션</h1>
</header>
<form class="search">
<label>영화 검색 : </label>
<input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요">
<button type="submit">검색</button>
</form>
<section class="card-list"></section>
</body>2)main.js
- movie.js와 search.js import
- generateMovieCards() 함수 호출로 html에 카드 목록 생성
- 검색 입력 칸에 커서 활성화 (.focus())
- form class 이름으로 form 변수 생성하고 addEventlistener 호출
- searchHandle() 함수 호출
import { generateMovieCards } from "./movie.js";
import { handleSearch } from "./search.js";
generateMovieCards();
const searchInput = document.querySelector("#search-input");
searchInput.focus();
const form = document.querySelector(".search");
form.addEventListener("submit", (event) => {
event.preventDefault();
handleSearch(searchInput.value);
});3)movie.js
- generateMovieCards() 함수 export
- API fetch
- 카드 클릭 시 id 출력 로직을 이벤트 위임으로 처리
export const generateMovieCards = async () => {
const movies = await fetchMovieData();
const cardList = document.querySelector(".card-list");
cardList.innerHTML = movies
.map(
(movie) => `
<div class="movie-card" id="${movie.id}">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
<h3 class="movie-title">${movie.title}</h3>
<p>${movie.overview}</p>
<p>Rating: ${movie.vote_average}</p>
</div>`
)
.join("");
//id 출력
cardList.addEventListener("click", handleClickCard);
// 이벤트 위임: 하위요소에서 발생한 이벤트를 상위요소에서 처리
function handleClickCard(event) {
// 카드 외 영역 클릭 무시
if (event.target === cardList) return;
if (event.target.matches(".movie-card")) {
alert(`영화 id: ${event.target.id}`);
} else {
// 카드의 자식 태그 (img, h3, p) 클릭 시 부모의 id로 접근
alert(`영화 id: ${event.target.parentNode.id}`);
}
}
};
//API 가져오기
async function fetchMovieData() {
const options = {
method: "GET",
headers: {
accept: "application/json",
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NThhODc2ZTY5NDA4NWY4YTA1MmQyNjc5MTRhY2RlMiIsInN1YiI6IjYxYzNjZjY5MzdiM2E5MDBjMzQ2YzYyYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.pPkre3BdMQtujbkqtPmW7TC_022A-ZR2M_ZShzd_kDU",
},
};
const response = await fetch(
"https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1&include_adult=false",
options
);
const data = await response.json();
return data.results;
}4)search.js
- handleSearch export
- 지난 번 완성하였던 유효성 검사 코드 삭제 (현 코드에서 검색어 없이 검색할 경우 기본 목록 출력으로 돌아오는 반면, 유효성 검사를 추가할 시 기본 목록 출력으로 돌아갈 수 없는 문제 발생으로 삭제)
- toLowerCase()를 사용하여 대소문자 구분 없이 검색어가 포함된 검색 결과 도출
export const handleSearch = (searchKeyword) => {
// if (!searchKeyword) {
// alert("입력하지 않았습니다.");
// document.getElementById('search-input').focus();
// return false;
// }
const movieCards = document.querySelectorAll(".movie-card");
movieCards.forEach((card) => {
const title = card.querySelector(".movie-title").textContent.toLowerCase();
const searchedValue = searchKeyword.toLowerCase();
if (title.includes(searchedValue)) {
card.style.display = "block";
} else {
card.style.display = "none";
}
});
};5)style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgb(95, 160, 146)
}
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
}
.movie-card {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.587);
margin: 20px;
padding: 20px;
width: 300px;
justify-self: center;
background-color: rgb(226, 242, 202);
border-radius: 10px;
cursor: pointer;
user-select: none;
}
.movie-card img {
width: 100%;
border-radius: 10px;
}
header {
background-color: #416656;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
color: rgb(226, 242, 202);
text-decoration: overline;
text-decoration-style: double;
}
.search {
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0;
border-bottom: 1px solid black;
}
.search label {
font-size: 25px;
color: rgb(239, 244, 232);
}
.search input {
margin-left: 20px;
min-width: 200px;
padding: 5px 10px;
}
.search button {
margin-left: 10px;
padding: 5px;
}
h3 {
margin-bottom: 10px;
}2. 문법 - 객체
1) 기본 객체 생성 예시
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};2) 생성자 함수로 객체 생성
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");3) 객체 속성 접근
console.log(person.name); // "홍길동"
console.log(person.age); // 303. 객체 메소드
1) Object.keys() / Object.values()
객체의 속성이름/속성값 배열로 반환
2) Object.entries()
객체를 2차원 배열로 변환.
3)Object.assign()
객체를 복사하여 새로운 객체 생성
let person = {
name: "홍길동",
age: 30,
gender: "남자"
};
let newPerson = Object.assign({}, person, { age: 35 });
console.log(newPerson); // { name: "홍길동", age: 35, gender: "남자" }4) 객체 비교
let person1 = {
name: "홍길동",
age: 30,
gender: "남자"
};
let person2 = {
name: "홍길동",
age: 30,
gender: "남자"
};
console.log(person1 === person2); // false
console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true5) 객체 병합 (전개 연산자 ...)
let person1 = {
name: "홍길동",
age: 30
};
let person2 = {
gender: "남자"
};
let mergedPerson = {...person1, ...person2};
console.log(mergedPerson); // { name: "홍길동", age: 30, gender: "남자" }4. git
1) branch
( === 복사본)
- git branch
(브랜치 목록과 현재 브랜치 위치 확인 가능, q로 종료) - git branch 브랜치명
(복사본 생성) - git switch 브랜치명 / git checkout 브랜치명
(브랜치 이동만 / 브랜치 이동과 부가 기능이 있음)
(둘 다 상관 없지만 깃에서는 스위치 권장) - git switch -c 브랜치명 / git checkout -b 브랜치명
(브랜치 한 번에 생성, 이동)
2) 브랜치 합치기
-
git 터미널에서 merge
git switch 메인브랜치명
git merge 합칠브랜치명 -
github에서 pull requests 사용
-> 코드 리뷰 가능
3) 문제점 / 대안책
- Main 브랜치 === 배포용
완벽하게 기능 개발해야 merge 가능
: 개발용 브랜치를 만들어서 단계별로 합침
main(배포용) < develop(테스트용) < 기능(기능 개발용) - 그냥 합치면 위험함
ex) 서로 다른 브랜치로 같은 변수명 사용
: 로컬에서 먼저 테스트 git pull origin dev
