NEXT.js 란? Vercel이 개발한 오픈소스 자바스크립트 프레임워크로 리액트를 더 편리하게 이용할 수 있도록 기존에 제공하지 않던 추가적인 기능을 제공한다. 즉, 리액트의 확장판이라고 할 수 있다. 둘의 차이점을 꼽자면 넥스트는 프레임워크이고 리액트는 라이브러리 라는 점이다. 💡 프레임워크 vs 라이브러리는 무슨 차이가 있을까? 기능 구현의 주도권이 누구에게 있는가? 프레임워크 : 프레임워크 자신이 주도권을 가짐 예를들어 페이지 라우팅을 구현해야 한다고 할 때 프레임워크가 정해 놓은 기능을 이용해서 정해 놓은 방법대로 구현해야함. 자유도 낮음 많은 기능이 미리 제공됨 쉽게 말해 자동차처럼 특화된 기능이 있고 해당 기능과 연관된 기능도 함께 제공되어 정해진 용도로만 활용이 가능함 라이브러리 : 프로그..
🚨 문제 상황 위에 사진과 같이 필터값은 제대로 받아와서 해당 필터값에 따른 데이터를 받아오지만 해당 카테고리를 눌렀을 때 상태값이 초기값으로 돌아가서 제대로 동작하지 않는 문제가 발생함 카테고리 코드 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react"; import { Navigation } from "swiper/modules"; import "swiper/css"; import { FaArrowLeft, FaArrowRight } from "react-icons/fa"; import { useState } from "react"; type FiltersArray = { filters: string[]; onFilterChange: (fi..
숙박예약 사이트를 진행하는 프로젝트에서 필수적으로 필요했던 체크인 - 체크아웃 달력! 달력을 직접 만들어서 구현해보는게 좋을 지 라이브러리를 사용할 지 고민 많이 했는데 직접 구현하는 건 사실 상 조금 비효율적인거 같아서 라이브러리를 활용하기로 했다! 내가 필요한 기능은 체크인 - 체크아웃 기간을 선택할 수 있을 것 날짜를 상태값으로 받을 수 있을 것 달력을 커스텀 할 수 있을 것 달력에 년도와 월을 표시할 수 있을 것 지난 날짜는 선택할 수 없게 막을 수 있을 것 달력 라이브러리는 생각 보다 많았는데 그 중 내가 구현하고 싶은 기능에 맞는 라이브러리 인 react-date-range 를 선택했다! react-date-range hypeserver.github.io 그리고 날짜를 받으면서 원하는 형식으로..
💡 시작하며 첫 개인 프로젝트를 시작했던게 얼마 안된거 같은데 벌써 개인프로젝트, 토이프로젝트1,2를 지나 미니프로젝트까지 마무리 했습니다. 시간이 어떻게 지나갔는지 모를만큼 3주가 빨리 지나갔네요. 미니프로젝트에서는 처음으로 백엔드 수강생과 함께 프로젝트를 진행했습니다. 그동안은 강사님이 제공해주는 API를 사용하거나 firebase를 사용하거나했는데 이번에는 백엔드와 함께 진행하며 처음부터 어떤 데이터를 요청하고 응답받을 지 정하고 수시로 회의를 진행하며 방향을 정해나갔습니다. 처음하는 백엔드와의 협업인 만큼 시행착오도 있었지만 그럼에도 불구하고 많은걸 배울 수 있었던 프로젝트 였습니다. ✍🏼 프로젝트 계획 백엔드와 같이 프로젝트를 진행할 때는 패캠에서 제공해준 공용 노션이 있어서 그곳에서 회의내용과..
🤷🏻♀️ 제목이 필터링 기능 잔혹사인 이유는? 그냥 내가 혼자 삽질을 하다가 두 번 일하는 잔혹한 일이 벌어졌기때문 홈페이지 카테고리 필터링 기능구현을 맡은 나 이미 필터링 기능을 구현해 본 나는 자신만만하게 이전에 했던 코드를 참고해서 필터링 기능을 구현하기 시작했다. 그런데? 문제가 생겨버렸다. 아직 백엔드의 데이터를 사용하기 전 간단하게 목데이터를 만들어 사용하고 있었는데 내가 만든 필터링 기능이 전체 데이터를 필터링 하는게 아니라 이미 받아온 데이터에 한해서 필터링을 하고 있던 것이다. 그니까 무한스크롤을 구현하기로 한 우리 프로젝트에서 1페이지에서만 받아오는 데이터만 필터링 할 수 있게 만들었다는것..!! ㅠ 자신만만해 했지만 꽤나 걸린 코드를 다 고칠 수 밖에 없었다는 슬픈이야기.. 다음에는..
프로젝트를 진행하면서 막연히 리액트쿼리를 사용해보자! 하고 기본적인건 사용해봤는데 무한스크롤을 구현해보려고 찾아보니 리액트쿼리에 있는 useInfiniteQuery를 사용해서 무한스크롤을 구현할 수 있다는걸 알게되었다. 사용해볼수록 찾아볼수록 유용한 기능은 많은 거 같아서 재밌다! useInfiniteQuery 리액트쿼리에서 useInfiniteQuery Hook은 인피니트 스크롤링과 같은 페이징된 데이터를 처리할 때 사용된다. 사용 방법은 useQuery와 비슷하고 주어진 쿼리를 실행하여 페이징된 데이터를 가져온다. 기본 설정하기 const { data, status, error, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery(..
