Algoroot's space

안녕하세요, 오늘은 React Query의 setQueryData 함수를 편리하게 사용하기 위해 만든 useSetQueryData 훅에 대해 소개하려고 합니다.배경 이전에는 주로 캐싱 데이터를 업데이트할 때 UI 업데이트를 위한 Optimistic Update 용도로 사용하고는 했는데, 최근 프로젝트에서 수많은 ApI 요청으로 인한 서버 비용을 개선하기 위해 캐시를 수정하게 되었습니다.  동기 Optimistic Update를 처음 접했을 때 인피니티 쿼리에 적용하면서 다가가기 어렵고, 시간도 꽤 소요되었던 경험이었어, 처음 접하시는 분들이 더 쉽게 활용할 수 있도록 쿼리 캐시 수정용 훅을 만들었습니다. setQueryData 용도빠른 UI 업데이트어떠한 데이터를 수정, 삭제, 생성 (mutate) 한 ..

안녕하세요 오늘은 무한스크롤 데이터를 다루는 InfinityList 컴포넌트를 생성한 경험을 소개해보고자 합니다. 리액트 네이티브의 FlatList 를 아시나요? 리액트 네이티브의 FlatList는 데이터가 많을 때 사용되는 컴포넌트로, 화면에 보여지는 부분만 렌더링하는 기능을 제공합니다. 이 컴포넌트를 사용하면 대규모 데이터 목록을 효율적으로 처리할 수 있습니다. 이전 글에서는 리액트 네이티브의 FlatList와 무한스크롤 API를 React Query를 활용하여 InfinityFlatList 컴포넌트를 만드는 과정에 대해 다룬 바 있습니다. [React Native] React Native에서 useInfiniteQuery를 사용하여 무한 스크롤 구현하기: InfinityFlatList 안녕하세요. ..

안녕하세요, 오늘은 Left Navigation Bar (LNB)에 있는 리스트에 적용한 Tooltip이 스크롤시에도 사라지지 않는 문제를 해결한 과정을 공유하려 합니다. 이 글에서는 Intersection Observer API를 활용한 방법이니 익숙하지 않으신 분들은 아래의 글을 참고해주세요! [Web] IntersectionObserver API 안녕하세요, 오늘은 Web API 중 하나인 Intersection Observer API에 대해 알아보는 시간을 갖겠습니다. 현대의 웹 개발은 사용자 경험을 개선하고 페이지 성능을 최적화하는 것이 매우 중요합니다. 이를 algoroot.tistory.com 소개 이 문제를 설명하자면 다음과 같았습니다. LNB의 아이템에 호버 액션을 취하면 해당 아이템의 ..

안녕하세요. 오늘은 Google OAuth 인증을 팝업모드로 구현한 과정을 소개하고자 합니다. Background Google Ads 계정을 가져와야 하는 로직이 있었습니다. Process 1. 서버에서 Google 계정 연동을 위한 URL을 받습니다. 2. 받은 URL로 Google 계정 연동 버튼 클릭 시 팝업 창을 띄웁니다. 3. Google 연동 후 Callback URL에서 코드를 가져옵니다. 4. 가져온 코드로 User의 Google Account ID를 저장한 후 다음 단계로 넘어갑니다. 1번~3번의 과정은 클라이언트에서도 Google Client ID를 사용하면 code를 받을 수 있어 처음에는 @react-oauth/google이라는 라이브러리를 설치하여 구현하였습니다. 하지만 특정 이유..

안녕하세요 오늘은 미들웨어를 통해 유저의 URL 직접 접근을 막는 법을 소개해보고자 합니다. next 12.1.6 기준이며 현재는 12.2 이전과 이후로 쓰는 방법이 다르기 때문에 같이 포스팅하겠습니다. URL 직접접근이란? (Direct access url) 유저가 페이지에 접근할 때 URL에 직접적으로 접근하는 경우를 말합니다. 클라이언트 단에서 이런 직접 접근을 제어하는 일은 꼭 필요한데요. 예를 들어 로그인을 해야만 접근할 수 있는 마이페이지와 같은 경우 로그인하지 않은 유저가 직접 URL로 접근을 시도하면 header에 토큰을 넣어야 하는 API요청인데 없는 상태로 넣게 되어 이슈가 있는 페이지로 보이거나, 혹은 아예 그 페이지로 접근이 되어버리는 현상이 발생할 수 있게 됩니다. 보통 이런 경우..

안녕하세요 이번에는 React-date-picker을 타입스크립트 + SCSS로 완전히 새로운 UI를 구현해본 경험을 소개하고자 합니다. 거의 전체를 SCSS와 조합하여 스타일링을 새로 한 것으로 모든 영역에서 커스텀하는 것이 필요한 분들께 도움이 많이 될 것이라고 확신합니다. ** 구체적인 스타일링은 삭제하였습니다. 궁금하신게 있다면 댓글 달아주세요 :) 좌측은 React date picker에서 제공하는 기본 UI이고 우측은 제공하는 기능들을 통해 직접 커스텀한 date picker입니다. 라이브러리에서 제공하는 Demo 사이트를 통해서 필요한 옵션들을 끌어와 사용하였습니다. React-date-picker 라이브러리에서는 커스텀을 위한 여러 props를 제공합니다. 제공해주는 Props에 맞게 컴포..

안녕하세요 너무 오랜만에 블로그에 찾아왔습니다. 공부하던 시절 개발 현직자 분들이 현업에서 일하며 글쓰기 쉽지 않다는 말이 이제서야 공감이 가네요.. 좀 더 부지런해져야 겠습니다. 오늘은 프로젝트에서 구현했던 부분인 슬라이더 라이브러리 Swiper를 소개해볼까 합니다. 개인프로젝트와 직접 업무에 뛰어들면서의 차이는 디자인과 같게 구현해야한다는 점이죠. 이러한 면에서 어느정도 커스텀이 유용한 라이브러리를 찾는 것도 중요하다는 생각이 드는데요, 처음에는 Slick이라는 라이브러리를 설치해 구현했다가 디자인대로 커스텀하는 것에서 불편함이 느껴져서 다시 찾아보았고, npm trends에서도 최근 1년 사용성도 더 많고 업데이트도 빠르며 데모(Demo)가 잘 나와있는 Swiper라는 라이브러리르 사용하게 되었습니..

프로젝트에서 구현해야 하는 기능 중 유저들의 목록을 Excel 파일로 다운로드하게 하는 기능이 있었다. 과정은 아래와 같았다. 1. Button '등록자 목록 다운로드' 생성 2. Confirm Modal 생성 3. '확인' 클릭시 등록자 목록 파일 자동 다운로드 (API 요청 후 file data 받기) 3-1. API 요청 후 response로 file data 받기 3-2. DOM Element a tag 생성 후 href에 가공된 URL 넣어서 link()시키기 4. 성공시 모달 창 닫기 2. Confirm modal에서 '확인' 클릭시 React-Query의 mutate 함수를 실행시켜 POST 요청을 하면 response data로 파일 값이 들어온다. HTTP 요청 메서드가 POST인 이유는..