Front-end

🤷🏻‍♀️ 제목이 필터링 기능 잔혹사인 이유는? 그냥 내가 혼자 삽질을 하다가 두 번 일하는 잔혹한 일이 벌어졌기때문 홈페이지 카테고리 필터링 기능구현을 맡은 나 이미 필터링 기능을 구현해 본 나는 자신만만하게 이전에 했던 코드를 참고해서 필터링 기능을 구현하기 시작했다. 그런데? 문제가 생겨버렸다. 아직 백엔드의 데이터를 사용하기 전 간단하게 목데이터를 만들어 사용하고 있었는데 내가 만든 필터링 기능이 전체 데이터를 필터링 하는게 아니라 이미 받아온 데이터에 한해서 필터링을 하고 있던 것이다. 그니까 무한스크롤을 구현하기로 한 우리 프로젝트에서 1페이지에서만 받아오는 데이터만 필터링 할 수 있게 만들었다는것..!! ㅠ 자신만만해 했지만 꽤나 걸린 코드를 다 고칠 수 밖에 없었다는 슬픈이야기.. 다음에는..

프로젝트를 진행하면서 막연히 리액트쿼리를 사용해보자! 하고 기본적인건 사용해봤는데 무한스크롤을 구현해보려고 찾아보니 리액트쿼리에 있는 useInfiniteQuery를 사용해서 무한스크롤을 구현할 수 있다는걸 알게되었다. 사용해볼수록 찾아볼수록 유용한 기능은 많은 거 같아서 재밌다! useInfiniteQuery 리액트쿼리에서 useInfiniteQuery Hook은 인피니트 스크롤링과 같은 페이징된 데이터를 처리할 때 사용된다. 사용 방법은 useQuery와 비슷하고 주어진 쿼리를 실행하여 페이징된 데이터를 가져온다. 기본 설정하기 const { data, status, error, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery(..

팀프로젝트를 진행하면서 리액트쿼리를 사용하게 됐다. 초반에 개인 프로젝트를 진행하면서 zustand를 사용해보고 관련 영상을 찾아보다가 우연히 우아콘 영상을 보고 리액트쿼리에 관심을 가지고 있던차에 사용해 볼 수 있었다. ✨ 참고로 제가 봤던 영상은 이 영상입니다! 간단하게 어떻게 사용하는지 정리해두고 보면서 익숙하게 사용할 수 있도록 하려고한다. 📌 TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizin..

처음으로 백엔드와의 프로젝트를 진행하며 가장 크게 느낀점은...? 데이터가 필요하다...! 막연히 레이아웃을 짜고 틀은 만들었는데 막상 사용할 수 있는 데이터가 없으니 프로젝트 속도가 더뎌지는 기분이 들고 이렇게 있다가 나중에 발등에 불 떨어진듯 진행하게 될것 같은 예감이 들었다.ㅋㅋㅋㅋ 멘토링 시간에 질문했더니 멘토님께서 MSW를 추천해주셨다. 프로젝트 시작부터 알았다면 더 좋았겠지만 나중을 위해서라도 지금 단단히 공부해두려고 한다. Getting started Three steps to get started with Mock Service Worker. mswjs.io Mock Service Worker(MSW)란? Service Worker를 사용해 네트워크 호출을 가로채고 응답을 보내주는 API ..

📌 Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 프로젝트 진행 중 카테고리 부분을 구현하다가 슬라이드 기능을 넣고 싶어서 swiper를 사용했다. 내가 슬라이드 기능을 구현해야할 때마다 애용(?)하는 라이브러리이다. 가장 구현하기 쉽고 제공하는 형태도 다양해서 사용하기 좋다. 이번에 만들어 보면서 알게된 점이 단순하게 기본형태로도 만들 수 있지만 잘 이용하면 커스텀도 가능하고 반응형으로 만들 수 있다는 걸 알게되었다. 덕분에 구현하고 싶은..

📌 근래에 프로젝트들을 진행하면서 꼭 필수적으로 들어가는 기능들이 있었다. 구태여 프로젝트 뿐만아니라 대부분 사이트에 있는 필수 기능이기도 한 바로 회원가입, 로그인 기능이다! 토이프로젝트를 진행하면서 JSON Server로 로그인기능을 구현해보기는 했는데 Firebase가 훨씬 더 구현하기 간편한 것 같다. 로그인 기능 이해하기 1. 회원가입 서비스를 사용하는 사람들은 우선 회원가입을 하는데 email, password 등 필요한 정보를 db에 저장한다. 2. 로그인 그 후 사용자들은 email, password를 입력하면 db에서는 해당 user를 구별하여 해당 user에 대한 token을 전달한다. 3. 로그인 이후 token을 전달 받은 사용자들은 db에 해당 token을 header에 넣어 원하..