간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)이전 리팩토링 과정(1) - [스켈레톤 UI] 화면 깜빡거림 해결이번 리팩토링은 페이지가 있는 게시글 목록에서 다른 페이지로 이동할 경우 화면이 깜빡거리는 현상이 발생하여 `tanstack query` 의 `prefetchQuery` 를 이용하여 해당 문제를 해결했다. 💡 변경 방법기존에는 페이지를 이동하고 나서 해당 페이지의 데이터를 요청했다. 따라서 필연적으로 깜빡거리는 문제가 발생했다.따라서 미리 데이터를 요청하는 `prefetchQuery` 를 사용해보기로 했다. 방법은 생각보다 어렵지는 않았다. `onMouseOver` 이벤트를 이용해서 페이지 버튼에..
간략한 팀프로젝트 소개카카오 지도 api를 이용한 등산 관련 커뮤니티 플랫폼특정 산에 같이 등산할 사람을 모집하고, 신청할 수 있다. (벙개)💡 화면 깜빡거림벙개 상세페이지에서 필요한 api 데이터는 다음과 같다. 상세 페이지 데이터상세 페이지 데이터에 등록된 산 데이터상세 페이지 데이터에 등록된 신청자 목록총 3번의 네트워크 요청을 필요로 한다. 신청자 목록(3번) 같은 경우 join 으로 불러오려 했으나 `json-server`를 사용했고 공식문서를 참조하여 join을 시도해봐도 빈 배열로만 데이터를 불러와지고 해결이 안되어 어쩔 수 없이 한 번 더 불러오는 과정을 거쳤다. 🚨문제점 사용자가 상세페이지를 들어오면 네트워크 요청이 처리되고 리렌더링이 발생하면서 화면이 깜빡거리는 모습을 볼 수 있다..
🚨 useRef + IntersectionObserver + state 충돌원인이 맞는지는 모르겠지만 `Ref`와 `Observer` 를 넣어준 DOM 요소에서 사용하는 state값을 변경하려고 하니 데이터는 변경이 되는데 리렌더링은 되지 않는 문제가 발생했다. 문제를 찾게 된 계기는 혹시나 해서 ref를 지워봤더니 setState가 제대로 동작을 했다. 문제 코드{displayedPosts.map((post, index) => ( // 기타 생략 ..setState가 안 되던 state가 `displayedPosts` 이다. 데이터 구조는 대강 이렇게 생겼다. displayedPosts 구조const [displayedPosts, setDisplayedPosts] = useState([ {..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest](4) - [불어나는 코드 모듈로 분리]이번 리팩토링은 고정으로 사용되는 초기값, 상수값 등을 상수로 선언하도록 변경했다. 💡 기존 코드function getSlicedOverview(overview) { if (!overview) return "줄거리가 없는디" if (overview.length >= 80) { return `${overview.slice..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. (1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거] 이번 리팩토링도 위의 두 개와 비슷하게 코드를 압축하고자 하는 목적으로 진행하였다. 객체 형식의 데이터를 spread 문법으로 전달하고, 받을 때 rest를 사용해서 받도록 변경하였다. 💡 기존 코드 인자로 넘기는 함수/* 어쩌구 저쩌구 로직들 ... */ const movies = data.results;const targetMovie = movies.filter(item => item.id === Number(get..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 첫 번째 리팩토링으로 [불필료한 API_URL 관리]를 진행했었다. 이번에는 함수들에 공통적으로 들어가는 매개변수를 제거하고 전역 변수로 변경하는 작업을 진행했다. (첫 번째보다 비교적 매우 간단하게 작업) 기존 코드document.addEventListener("DOMContentLoaded", () => { const params = new URLSearchParams(window.location.search); const movieId = params.get("id"); if (movieI..
💡 TMDB API - 영화에 대한 각종 정보를 가져올 수 있는 사이트 Getting StartedWelcome to version 3 of The Movie Database (TMDB) API. This is where you will find the definitive list of currently available methods for our movie, tv, actor and image API.developer.themoviedb.org 간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 프로젝트에 대한 기능을 완성하고 몇 가지 수정하고 싶..