민ズl으l 개발일ブl

1. 정렬현재는 금메달갯수를 기준으로 정렬했는데, 사용자가 select태그의 option을 클릭한 값에 따라 정렬가능하게 구현하게씀!먼저 구조부터 짰는데 이때 리액트에서 예상치 못한 오류가! gold ... option태그에 selected를 넣으면 아래와 같이 오류가 뜬다👻오류내용에 해답이 있듯이 `defaultValue` or `value`을 쓰면 됨!그래서 defaultValue로 바꾸면 에러해결💫 1-1. 정렬할 필터값들을 배열로 저장한다음 map으로 뿌리기const filterList = ["gold", "silver", "bronze", "total"]; {filterList.map((item, i) => ( {item} ))} 1-2. 그리고 선택..

이번 프로젝트는 드디어 리액트로! 익숙하던 CRA대신 vite로 셋팅👀1. 입력창먼저 입력하는 부분을 map으로 돌리기!const formArrName = ["country", "gold", "silver", "bronze"];return ( ... {formArrName.map((name, i) => ( {name} ))} ) 2. 입력한 데이터 뿌리기그리고 입력한 데이터를 담을 useState 하나,데이터들을 저장할 useState 하나 만든후const [inputValues, setInputValues] = useState({ // 입력한 데이터를 담음 country: "", ..

프로젝트 개요🎬이번 프로젝트는 영화 검색 사이트로, 인기영화, 영화 검색 리스트를 목표로 구현했다.사용자는 인기 영화, 영화 상세 정보를 얻어갈 수 있다.기술 스택🧷프론트엔드 : 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태그를 붙여..