ReviewZIP
1.[Lint] ESLint + Prettier 적용하기
1. ESLint, Prettier VScode 확장 설치 2. ESLint 설치 ESLint 초기화 3. Prettier 설치 충돌 없애기 ✔️ 추가적인 플러그인 eslint-config-prettier 는 프리티어와 충돌하는 ESLint규칙을 끄는 역할을
2.[TanStack Query] TanStack Query란?
웹 애플리케이션에서 데이터 가져오기, 캐싱, 동기화 및 서버 상태 업데이트를 간편하게 도와주는 라이브러리( 이전에는 React Query였으나 React외 다른 프레임워크에서도 사용할 수 있게함으로써 TanStack Query로 이름 변경)데이터 가져오기 및 캐싱 :
3.[TanStack Query] 무한스크롤 기능 구현
기본 세팅은 해당 링크를 참고useInfiniteQuery 훅 : 여러 페이지의 데이터를 관리하고, 다음 페이지를 요청하는 기능을 제공getNextPageParam : 다음 페이지를 요청할 때 사용할 페이지 번호를 결정하는 함수initialPageParam : 처음 쿼
4.[TanStack Query] 검색 기능 구현
‘TMDB’에서 Search-Movies API를 활용하여 영화를 검색하는 api를 구하려고 합니다. Search-Movies API 의 query params를 살펴보면 query 가 필수 요소로 들어가야한다고 나와있습니다. 저는 영화이름을 검색하여 결과값을 내는 기
5.[Tanstack Query] 캐싱 설정(staleTime, gcTime, refetchOnWindowFocus)
API 상태 관리와 캐싱을 위해 useQuery를 도입하였습니다.하지만 개발자도구>Network 탭을 확인해본 결과, 페이지를 이동하거나 다시 접근할 때마다 동일한 API 요청이 발생하는 것을 발견하였습니다. 적용 전 이를 해결하기 위해 useQuery의 옵션인 sta
6.[React] Form 외부 버튼으로 입력값 전달하기
해당 프로젝트의 Order페이지에 Input을 입력하는 요소가 존재합니다. 결제하기(Submit) 버튼을 누르면 input에 입력한 값들이 다음페이지로 넘어가면서 값들도 같이 넘어갈 수 있도록 구현하려고 합니다. 버튼이 form 외부에 있을 때 제출 이벤트 발생 일
7.[⚠️ ERROR] React에서 "uncontrolled input to controlled" 경고 해결하기
input type="checkbox"를 버튼 형태로 렌더링한 영역을 클릭했을 때 다음과 같은 에러가 발생:⇒ React는 처음에는 uncontrolled로 보이는데 나중에 값이 생기면서 갑자기 controlled로 바뀌니 혼란스러운 상황이라고 경고를 날리고 있는 것입
8.[🚀트러블슈팅] 특정 모바일 앱 브라우저에서 발생하는 스크롤 이슈
Detail 페이지의 배경 이미지 영역에 대한 스타일을 적용한 아래와 적용한 후 배포하였습니다.이는 PC 및 대부분의 브라우저에서는 정상적으로 작동하였으나iOS Safari 앱, 삼성 인터넷 앱 브라우저 등에서는 스크롤이 발생하는 문제를 발견하였습니다. 100vh는 전