영화검색사이트 : https://shyunis.github.io/movieSearch_project1/
깃허브 주소 : https://github.com/sHyunis/movieSearch_project1.git
🌟 영화제작사이트 만들기(최종)
⭐️ 메인홈페이지
⭐️ 메인카드페이지
✨ 추가된 기능들
- 국가별 영화검색(사이드국기모양 클릭시 해당 국가 영화로 변경)
나는 fetch관련기능, 검색기능은 index.js, 사이드메뉴 및 이외의 코드들은 event.js로 정리를 했다. 국가국기들을 클릭했을 때 해당 영화를 불러오기위해 재사용이 필요한 함수들이 index.js에 필요해 export, import를 사용해 재사용이 가능한 부분은 재사용하였다.
event.js코드
import { countryFetch, countryFetchEng } from "./index.js";
// 버튼 클릭시 한국영화로 변경
const koreaMovie = document.querySelector(".koreaMovie");
koreaMovie.addEventListener("click", (e) => {
countryFetch();
e.preventDefault();
});
// 버튼 클릭시 외국영화로 변경
const englishMovie = document.querySelector(".englishMovie");
englishMovie.addEventListener("click", (e) => {
countryFetchEng();
e.preventDefault();
});- aysnc, await을 활용해 비동기 함수로 fetch시켰다.
async function fetchUrl() {
const makeCardFetchUrl = await fetch(URL)
.then((response) => response.json())
.then((data) => {
const movies = data.results;
const movieContainer = document.getElementById("movie-container");
movies.forEach((movie) => {
const card = createMovieCard(movie);
movieContainer.appendChild(card);
});
})
.catch((error) => console.error("Error:", error));
}놓쳤던 점 🥹
프로젝트를 완성하고 나서 git으로 page배포를 진행하였다!
로컬에서 live server실행했을 때와는 다르게 폰트, 삽입한 이미지들이 보이지 않았다.
url경로를 확인해 보니 현재 파일과 동등한 위치에서는 /를 삽입할 필요가 없는데 절대경로가 잘못 설정되어있어 이미지가 뜨지 않은 것이었다..!
작업을 진행할 때는 계속 로컬에서 작업했기에 놓치고 갔던 부분이었는데
주의하고 신경써서 생활화 시켜야 겠다고 생각했다.
=> 탐색기에서 html파일을 열면 서버 환경이 오프라인 상태에서 파일을 여는 것이기 때문에 이미지 경로를 찾지 못함
해결방법 & 다시 한번 짚고가기 🙏
상대경로
- 이미지가 HTML문서와 같은 디렉토리에 있는 경우
<img src='파일명'>, <img src='./파일명'>
- 이미지가 하위 디렉토리에 있는 경우
<img src='디렉토리명/파일명'>, <img src='./디렉토리명/파일명>
- 이미지가 상위 디렉토리에 있는 경우
<img src='../파일명'>, <img src='./../파일명'>
- 이미지가 상위 디렉토리의 하위 디렉토리에 있는 경우(다른 디렉토리에 있는 경우)
<img src='../하위디렉토리명/파일명'>, <img src = './../하위디렉토리명/파일명'>
아쉬웠던 점😂
도메인주소까지는 fetch시킨 주소들이 다 동일하기 떄문에 이것또한 함수화시켜 전체코드를 간소화 했으면 어땠을까 하는 생각이 들었다. 그렇게 되면 더 많은 기능들을 추가하고 데이터를 다루는데 더 용이하지 않을까 하는 생각이 들었다. 이번 경험으로 다음 데이터 작업에는 그렇게 실천해야겠다는 좋은 교훈을 얻었다.
💥 최종 기능&구현한 것들 소개
사이트명 : This is Movie
용도 : 영화 검색 사이트(TMDB OPEN API 활용)
- 메인홈 주요기능
- css 디자인
- css keyframe 을 활용한 타이핑 글자
- 버튼 클릭 시 메인검색 페이지로 스크롤 다운- 메인검색페이지 주요기능
1. fetch를 활용한 Dom연결
2. 검색창
- 빈 칸 검색 시 alert메세지
- 원하는 영화 검색시 해당 영화 카드만 조회
3. 카드
- 클릭시 id조회
- flex를 이용한 반응형 페이지
4. 고정메뉴바
- position-sticky를 활용하여 위치고정
- 이전 버튼 클릭 시 모든 카드 돌아오기
- 검색 버튼 클릭 시 검색 메뉴로 스크롤
- 홈 버튼 클릭 시 메인홈으로 스크롤 업
- 한국국기 클릭시 한국영화변경
- 미국국기 클릭시 미국영화변경사용규칙
- 오직 Vanila JS 만 사용
- 코드컨벤션 지킬 것
💥 더 시도해보고 싶은 기능들
- 슬라이드
- 드래그
- 리뷰 (영화에 대한 리뷰를 남길 수 있도록)
- 카드별 상세페이지 추가
- 장르별 영화 표기
☘️ 마지막으로 느낀 점!
약 4~5일간 만든 프로젝트가 끝이났다..!
별 거 아닌 문제에서 시간을 많이 보내기도 했었고 데이터들을 다뤄보면서 URL의 재사용성을 높이기 위해 처음부터 생각을 좀 더 많이 하면 어땠을까를 느꼈다. 앞으로의 더 나아질 나의 프로젝트들과 팀 프로젝트를 겪으며 성장하는 개발자가 되어보자..!🔥
