분류 전체보기

💡 시작하며 첫 개인 프로젝트를 시작했던게 얼마 안된거 같은데 벌써 개인프로젝트, 토이프로젝트1,2를 지나 미니프로젝트까지 마무리 했습니다. 시간이 어떻게 지나갔는지 모를만큼 3주가 빨리 지나갔네요. 미니프로젝트에서는 처음으로 백엔드 수강생과 함께 프로젝트를 진행했습니다. 그동안은 강사님이 제공해주는 API를 사용하거나 firebase를 사용하거나했는데 이번에는 백엔드와 함께 진행하며 처음부터 어떤 데이터를 요청하고 응답받을 지 정하고 수시로 회의를 진행하며 방향을 정해나갔습니다. 처음하는 백엔드와의 협업인 만큼 시행착오도 있었지만 그럼에도 불구하고 많은걸 배울 수 있었던 프로젝트 였습니다. ✍🏼 프로젝트 계획 백엔드와 같이 프로젝트를 진행할 때는 패캠에서 제공해준 공용 노션이 있어서 그곳에서 회의내용과..

🤷🏻‍♀️ 제목이 필터링 기능 잔혹사인 이유는? 그냥 내가 혼자 삽질을 하다가 두 번 일하는 잔혹한 일이 벌어졌기때문 홈페이지 카테고리 필터링 기능구현을 맡은 나 이미 필터링 기능을 구현해 본 나는 자신만만하게 이전에 했던 코드를 참고해서 필터링 기능을 구현하기 시작했다. 그런데? 문제가 생겨버렸다. 아직 백엔드의 데이터를 사용하기 전 간단하게 목데이터를 만들어 사용하고 있었는데 내가 만든 필터링 기능이 전체 데이터를 필터링 하는게 아니라 이미 받아온 데이터에 한해서 필터링을 하고 있던 것이다. 그니까 무한스크롤을 구현하기로 한 우리 프로젝트에서 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를 사용했다. 내가 슬라이드 기능을 구현해야할 때마다 애용(?)하는 라이브러리이다. 가장 구현하기 쉽고 제공하는 형태도 다양해서 사용하기 좋다. 이번에 만들어 보면서 알게된 점이 단순하게 기본형태로도 만들 수 있지만 잘 이용하면 커스텀도 가능하고 반응형으로 만들 수 있다는 걸 알게되었다. 덕분에 구현하고 싶은..