FE/react17 [React] react-query useInfiniteQuery로 무한스크롤 구현하기 무한스크롤(Infinite Scroll)? 게시판 글 리스트처럼 많은 데이터를 배열로 받아오는 경우, 그 데이터가 너무 방대해지면 api 요청으로 데이터를 받아오는 시간이 오래걸릴 수 밖에 없게됩니다. 우리는 페이지네이션(pagination)으로 데이터를 일정 개수씩 분리해 받아오는 방식을 통해 이러한 문제를 해결해왔습니다. 페이지네이션 또한 좋은 선택지이지만, 오늘 날 모바일 기기를 이용해 웹에 접속하는 경우가 매우 많다보니 터치횟수를 최소화하고 콘텐츠를 끊김없이 보여주는 무한스크롤이 더 좋은 대안이 될 수 있습니다. 무한스크롤 구현방법 무한스크롤은 한 페이지의 스크롤의 바닥(세로 끝부분)에 도달할 때 api를 요청하는 방식입니다. 자 그럼 문제는 '어떻게 스크롤 바닥에 도달했는지 알 수 있는가?' 입.. 2023. 5. 22. [React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법 문제 상황 페이지에 height : 100vh 속성을 주었는데, 모바일에서 테스트해보니 스크롤이 생깁니다. 1vh는 스크린 높이의 1%이므로 100vh면 스크롤없이 스크린을 가득 채워야하는데, 모바일에서만 이런 문제가 생긴겁니다!! 문제 원인 찾아보니, 모바일에서는 상하단의 주소창과 네비바의 높이를 스크린 높이에 포함하기 때문에 여백이 생겨버린 것이었습니다. 브라우저별 상하단바의 높이를 고려해서 높이를 정하기는 너무너무너무너무 귀찮기때문에, 상하단바를 제외한 실제 내부 높이를 가져올 방법을 고려해야합니다. 해결 방법 1 : vh 재정의하기 (React에 적용하기) JavaScript의 window.innerHeigh는 현재 뷰포인트의 높이를 가져올 수 있습니다. 이 속성을 이용해서, innerHeight.. 2023. 5. 8. [React] 모바일 웹 스크롤 시 주소창, 하단바 없애기 문제 상황 모바일에서 프로젝트를 볼 때, chrome이나 safari에서 하단바와 주소창이 화면을 너무 많이 가리는 모습입니다. 실제 서비스 중인 사이트들을 확인해보면 거의 대부분 스크롤 시 하단바가 사라지는 것을 확인했는데, 무언가 모바일에 추가설정이 필요한건가? 하는 생각이 들었습니다. 그래서 좀 찾아보니 크롬과 사파리 모두 특정 버전 이후부터는 스크롤 시 주소창과 하단 바가 자동으로 숨겨지는 기능을 가지고 있었습니다. 아니 근데 왜 제가 만든 웹은 자동으로 하단바가 사라지지 않는걸까요?? 한참 서치해봐도 잘 모르겠어서 가만히 제가 만든 걸 들여다보니 뭔가..갇혀있다는 느낌을 받았달까요? 그러니까 화면 자체가 내려가는 게 아니라 내부 박스안에서 스크롤이 되고 있는 느낌이었습니다. 생각해보니 모든 페이.. 2023. 5. 6. [React] 리액트 carousel 라이브러리 없이 직접 구현하기 캐러셀(carousel)이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소이다. 버튼을 눌러 옆으로 사진이 넘어가는 모션이 마치 회전목마와 비슷하다고해서 붙여진 이름이다. 캐러셀은 용도에 따라 자동재생되게 하거나, 사용자가 수동으로 넘기도록 구현할 수도 있다. 대중적으로 이용되는 라이브러리 react-slick이라는 라이브러리가 가장 대중적으로 사용되는 캐러셀 라이브러리이다. 장점이라면 역시 문서보고 따라하면 잘 작동하는 캐러셀을 쉽게 구현할 수 있다는 점? 그리고 커스텀도 상당히 자유롭다고한다. 사실 직접 해당 라이브러리를 사용해보진 않아서 모르겠지만 많은 사람이 이용하는만큼 최적화도 잘 되어있으리라 짐작된다. 위 데모를 보면 1. 양옆 버튼을 눌러 앞뒤로 슬라이드가 부드럽게 .. 2023. 5. 6. [React] 모바일 웹 status bar 색상 변경하기 항상 크롬 inspect 모바일 뷰만 보고 개발을 해서 몰랐었는데, 배포 후 디자이너 분께서 상태바 색상을 테마에 맞게 흰색으로 변경해주실 것을 요청해주셨다. 찾아보니 크롬과 사파리 설정을 따로 해주어야한다는 글이 많았는데, 직접해보니 theme-color 메타 태그만으로도 safari 상태바 색상이 적용이 되었다. 그래서 MDN에서 찾아보니 safari도 15버전 이후로는 적용이 된다고 쓰여있었다. 웬만하면 15v 이상이지 않을까 싶으면서도.. 2021년 적용이면 비교적 최근이라는 생각이 들어서 그냥 아래 코드까지 모두 작성해주었다! **CRA로 만든 리액트 프로젝트의 경우, public폴더에 index.html에 theme-color meta tag는 기본적으로 포함되어있는데, 색상만 원하는 색상으로.. 2023. 5. 2. [React] axios interceptor header 토큰 갱신 이전 글 [React] 리액트 refresh token 구현 (with. axios interceptor) 이전 코드 import axios from 'axios'; //토큰이 불필요한 경우 export const publicApi = axios.create({ baseURL: `${process.env.REACT_APP_SERVER_IP}`, }); //토큰을 함께 보내는 instance export const privateApi = axios.create({ baseURL: `${process.env.REACT_APP_SERVER_IP}`, headers: { Authorization: `Bearer ${localStorage.getItem('accessToken')}`, }, }); //리프레시토큰.. 2023. 4. 28. 이전 1 2 3 다음
