과제3 TMDB API를 활용한 인기 영화 조회 - 개인 과제 프로젝트 📢 프로젝트 소개 프로젝트 명 : TMDB API를 활용한 인기 영화 조회 프로젝트 프로젝트 일정 : 2024.01.03 - 2024.01.08 깃 허브 링크 : 바로가기! 배포 링크 : 바로가기! ✏️ 프로젝트 설명 순수 바닐라 자바스크립트 + TMDB 오픈 API 를 활용하여 인기 영화 조회 및 검색 구현 💻 프로젝트 구현 기능 이번 과제는 필수 요구사항과 선택 요구사항이 있었다. 필수 요구사항 순수 바닐라 자바스크립트 사용하기 TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 영화정보 리스트 UI 구현(필수 정보 : 제목, 내용 요약, 포스터 이미지 경로, 평점, 영화 id) 영화 검색 UI 구현 선택 요구사항 css - flex, grid 사용하기 웹사이트 랜딩 또는 새로고침 후 검색 입력.. 2024. 1. 9. 검색 결과가 없을 때 일치하는 항목이 없을 경우 아래와 같이 결과가 없다는 문구가 담긴 영역이 추가되도록 하였는데, 결과가 없을 때마다 추가되어 계속 쌓이게 됐다... 한 번만 추가되어야 하는 영역이라 어떻게 체크해야 할지 고민했는데, querySelector로 조회했을 때 없으면 null 값이 나와서 if 문에 넣어서 해결했다. if(!document.querySelector('.no-data')){ const noDataDiv = document.createElement('div'); noDataDiv.className = "no-data"; noDataDiv.innerText = '검색 결과가 없습니다.'; $movieBox.append(noDataDiv); } 2024. 1. 5. 검색어의 공백 제거 검색할 때 검색어의 공백을 제거하여 띄어쓰기가 달라도 검색이 되도록 구현하는 중에, '반딧불이의묘'라고 검색해도 해당 영화가 노출되지 않았다. 예상했던 결과는 검색어의 공백이 삭제되어 '반딧불이의묘'라고 값이 변경되는 것이었다. 왜 계속 안되는지 로그를 계속 찍어봤는데, trim()을 사용해서 문제가 됐다. 막연하게 trim() 은 공백을 제거한다고 알고 있었는데 너무 얕게 알고 있었다. trim() trim() 메서드는 문자열의 앞, 뒤 공백을 제거한 후 원본 문자열을 훼손하지 않고 새로운 문자열을 반환한다. 그래서 문자열의 공백을 제거할 다른 방법을 찾게 되었다. split으로 공백 기준으로 문자열을 나눈다. split 으로 나눈 배열을 join으로 합친다. split() split() 메서드는 문자.. 2024. 1. 4. 이전 1 다음
