오늘은 팀과제를 위해 팀원분들과 과제물의 방향성에 대해 함께 논의하고 각자 기능을 나눠 맡아 하루종일 정신 없는 하루를 보냈다.
혼자 하는 것도 힘든데 여럿이서 함께 해보려니 쉬운 일이 아니었다🥹 팀원분들 모두 너무 친절하시고 적극적이셔서 다행이지만 알고 있는 것들도 다르고 어떤 것을 구현하는 데에 있어서 각자 머릿속에 그리고 있는 내용 역시 다르다보니 생각하는 바를 적절히 표현하고 명확히 전달하는 게 어려웠던 것 같다... 그래도 어떻게 대략적인 틀이 잡혀가는 것 같으니 내일도 달려보자...
오늘 준비한 에너지가 모두 소진되어 TIL을 무사히 작성할 수 있을지 모르겠다🥹 일단 써보자...!
자바스크립트로 기능 만들기
- 검색창 만들기
나는 상단에 있는 nav 영역 오른쪽에 검색창을 넣었다.
<div class="search">
<div class="searchInput">
<input type="text" id="searchInput" placeholder="영화 제목으로 검색해 보세요" autofocus></input>
</div>
<div class="searchBtn">
<button type="button" id="searchBtn" title="검색하기"
style="background-color: #000000; border:2px solid #000000; height: 35px">
<img src="img/search.png" width="25">
</button>
</div>
</div>검색창은 이렇게 input과 button을 div로 묶어서 만들었는데, button 안에는 돋보기 모양 이미지를 넣어주어사용자가 검색 버튼임을 인지할 수 있도록 했다.
음, 이 부분은 해설 영상에서도 튜터님이 말씀해주셨고, 이후 개인 피드백을 주신 튜터님도 공통적으로 지적해주셨는데, 나 역시 해설 영상을 보며 div가 아니라 form으로 input과 button을 묶어 보려고 했으나 자꾸만 오류가 나서 결국은 포기하고 div로 남겨두게 되었다.
<script>
/** 검색창에 엔터키로 검색 실행 */
searchInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
search();
}
});
</script>form태그를 사용했더라면 이 코드는 필요가 없었을 것이다. 다음 플젝때는 아예 처음에 짜기 시작할 때부터 form태그를 사용하는 것이 좋겠다.
검색 버튼에는 '검색하기'가 title값으로 들어가 있고
왼쪽 사이트 로고와 사이트명 텍스트 역시 '처음으로'를 넣어주었으며 클릭 시 페이지가 새로고침되도록 했다.
- 검색 기능 구현하기
<script>
const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
function search() {
fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
.then(response => response.json())
.then(data => {
const allMovies = data.results.map(movie => ({
id: movie.id,
title: movie.title,
overview: movie.overview,
posterPath: `https://image.tmdb.org/t/p/w500${movie.poster_path}`,
voteRate: movie.vote_average,
}));
const keyword = searchInput.value.toLowerCase().trim();
if (!keyword) { // 검색어를 입력하지 않았을 때
alert('검색어를 입력해주세요.');
return;
}
</script>사실 이번 개인과제를 하면서 가장 어려웠고 가장 많은 머리카락이 쥐어뜯긴💥💥 부분이라고 할 수 있겠다. 처음에는 데이터 붙이기와 비슷한 형식으로 만들었는데, 그렇게 했더니 내가 사용했던 '평점 순으로 정렬한 영화' 리스트 내에서 검색이 이루어지는 것이 아니라, TMDB의 전체 영화 라이브러리에서 검색이 되는 것이다.
예를 들어 검색어 'godfather'를 사용해서 검색하면, 메인 화면에서 표시되었던 '평점 순으로 정렬한 영화 20개' 중에서만 검색이 되어서 이렇게 2개의 결과가 나타나야 하는데, TMDB가 갖고 있는 모든 영화들 중에서 godfather 키워드에 해당되는 영화는 모조리 다 출력이 되는 것이다. 반나절을 이 문제를 가지고 chatGPT랑 끙끙 앓다가 결국 튜터님에게 헬프를 요청했다.
튜터님의 어드바이스에 따라 검색 함수가 실행될 때 '평점 순으로 정렬한 영화' api 데이터를 한번 더 fetch 하고, 이 값을 변수에 저장해 둔 다음, 그 변수에서 접근하여 활용하는 방식으로 구현하게 되었다. 처음에는 뭐가 뭔지 전혀 알 수 없어서 그냥 검색하고 chatGPT 쓰고 하라는대로 복붙해 둔 데서 쫌쫌따리 할 수 있는 만큼만 건드려 보는 수준이었는데, 지금 생각해보니 저것보다 더 간결하게 만들 수 있었을 것 같기도 하다. 또 오늘 팀과제를 위해 TMDB api들과 사용방법을 뜯어봤는데, 약간 감이 오는 것 같기도 하다.
input에 아무 입력도 하지 않고 검색을 실행하게 되면 이렇게 alert창이 뜨고 아무 기능도 수행되지 않는다.
또한 검색 결과가 없는 경우에도 마찬가지이다.
이렇게 첫번째 개인과제가 마무리되었다. 튜터님으로부터 피드백도 받았다! 어우 정신없어... 얼른 마무리 할 건 마무리하고 조별과제에 집중해야겠다.
<개선해야 할 점>
1. 다음엔 미디어쿼리 등을 활용해서 반응형으로 도전해보기
2. 스크립트를 한 파일에서 모두 다루지 말고 모듈 단위로 나눠 만들기
3. 공통 클래스 활용해서 CSS 더 간결하게 관리하기
<이번 프로젝트를 통해 느낀점>
1. '대부' 왜 이렇게 인기가 많을까 궁금🤔 갠적으론 2보다는 1이 나았다. OST 레전드
2. div 중앙/가운데 정렬 진짜 할 때마다 안된다.
3. 검색 기능 정말 어려운 건 줄 알았는데 생각보다 내가 해볼 수 있는 거였구나!
(그러나 이 사람은 검색 기능 때문에 nnnnnn번의 패닉 타임을 가졌다)
