개발 성장 일ブl

프로젝트 개요🎬이번 프로젝트는 영화 검색 사이트로, 인기영화, 영화 검색 리스트를 목표로 구현했다.사용자는 인기 영화, 영화 상세 정보를 얻어갈 수 있다.기술 스택🧷프론트엔드 : html, css, vanilla.jsAPI : TMDB개발과정🎈아이디어 구상스파르타 내일 배움 수업을 듣다가 바닐라 자바스크립트 + TMDB API를 사용하여 영화 리스트를 보여주는 사이트를 구상함디자인여러 영화 리스트 사이트를 벤치마킹하여 피그마에 디자인함마지막 구현하다가 디자인이 단조로워서 폰트랑 팝업 레이아웃를 수정함colorbg #0d0d0d 검정계열point #f2c94c 노랑 (버튼, 링크, 강조 텍스트에 사용)font #a9a9a9font기본 SpoqaHanSansNeo-Regular로고 Bad Script네..

1. 북마크 리팩토링북마크 버튼의 핸들러 함수를 따로 함수로 빼고, 함수명도 좀더 가독성 있게 바꿈클릭 이벤트는 공통 함수 파일로 뺌👻북마크 페이지에서 로컬 스로티리지에 저장된 데이터를 뿌릴때 순서가 랜덤으로 됨ㅜㅜ👉객체로 바꾼후에 push로 붙여서 저장// 전bookmarkButton.addEventListener("click", () => { if (window.localStorage.getItem(data.title)) { window.localStorage.removeItem(data.title); alert("북마크에서 삭제되었습니다."); bookmarkButton.innerHTML = "Add bookmark"; const event = new C..

이제 마지막...!!!1. 대소문자 구분없이 검색input의 value를 정규표현식 [a-zA-Z가-힣]으로 match메서드로 대소문자 구분없이 검색해서 join으로 합치기*가-힣을 안넣어주면 한국어는 제외가 됨* || [] 을 안하면 null이 반환되고, 그상태에서 join을 사용하면 에러가 뜸const handleSearch = () => { let searchInputValue = searchInput.value; const regexValue = (searchInputValue.match(/[a-zA-Z가-힣]/gi) || []).join(""); if (regexValue) getMovieData(regexValue);}; 2. 리팩토링2-1. 실시간 검색시 스로틀링 또는 디바운싱을 ..

어제 다른 수강생들과 얘기하면서 코드를 잠깐 봤는데 파일 분리를 잘하신분이 계셨다내 코드는 현재 너무 길고 가독성이 떨어지는 것 같아서 파일분리를 했다!js폴더를 만들고- api(api처리)- movieList(api에서 가져온 데이터를 뿌리는 기능)- modal(모달창)- search(검색기능)- main(호출, 기타 기능)- bookmark(북마크 기능)이렇게 파일분리를 하였다!👻경로 에러GET http://127.0.0.1:5500/js/api net::ERR_ABORTED 404 (Not Found)GET http://127.0.0.1:5500/js/search net::ERR_ABORTED 404 (Not Found)💢 원인 : 파일경로가 잘못됨💫 해결 : import { getMovieD..

1. 검색 키워드가 들어간 영화리스트 보여주기먼저 TMDB에서 SEARCH-Keyword api 가져오기!처음에는 검색전(메인 인덱스) 함수 / 검색후 함수이렇게 두개 만들고, 공통으로 사용된 부분을 또 함수로 만들려고 했다! 근데 생각해보니 아예 하나의 함수로 파라미터를 키워드를 넣어서 키워드가 있을 때랑 없을 때 를 if로 제어하면 되네?!async function getMovieData(keyword) { const url = `https://api.themoviedb.org/3/${ keyword ? `search/movie?language=ko&query=${keyword}` : "movie/popular?language=ko&page=1" }`; try { c..

1. TMDB API 연동유튜브api는 설명이 잘되어있는거였다...제일 먼저 보이는 페이지에 영화 데이터는 인기있는 영화데이터로 뿌리고 싶어서 PEOPLE LISTS-Popular api를 가져와서 뿌렸다!TMDB는 옆에 예시코드를 줘서 따로 포스트맨에 저장없이 예시코드를 mockdata파일로 만들었따-!2. 페이지에 fetch API로 데이터뿌리기(포스터,영화명,평점)fetch api로 데이터를 가져와서 forEach로 돌려서 innerHTML로 뿌렸다!평점은 소수점이 막 셋째자리까지 있고 해서 toFixed(1)로 첫째자리까지만 뽑았고,날짜는 해당 연도만 뽑기위해 slice(0,4)로 앞에 4글자를 뽑았다createDocumentFragment를 사용해서 비어있는 객체를 만든후에거기에 li태그를 붙여..