Front-end/React

이번 프로젝트의 필수 사항 중 하나인 리덕스툴킷! 확실히 리덕스의 아키텍처를 먼저 이해하고 보니 리덕스 툴킷이 훨씬 사용하기 쉽고 편리하다는 걸 알 수 있었다.    우선 Redux, React Redux, Redux toolkit 각각의 역할에 대해 알아보자.Redux : 상태 관리자, 프로그램이 동작하는데 필요한 데이터를 체계적으로 관리해주는 도구리덕스 자체는 리액트에 최적화되었다기 보다 자바스크립트로 된 프로젝트에 최적화된 도구라고 할 수 있다. 리액트에서 사용하기 쉽게 등장한것이 react redux이다.React Redux : 리덕스와 리액트를 연결시켜주는 도구그럼에도 불구하고 리덕스는 많은 설정을 해줘야한다는 것과 코드의 양이 방대해지는 단점들이 생김 이러한 단점들을 보완하기 위해 나온것이 R..

숙박예약 사이트를 진행하는 프로젝트에서 필수적으로 필요했던 체크인 - 체크아웃 달력! 달력을 직접 만들어서 구현해보는게 좋을 지 라이브러리를 사용할 지 고민 많이 했는데 직접 구현하는 건 사실 상 조금 비효율적인거 같아서 라이브러리를 활용하기로 했다! 내가 필요한 기능은 체크인 - 체크아웃 기간을 선택할 수 있을 것 날짜를 상태값으로 받을 수 있을 것 달력을 커스텀 할 수 있을 것 달력에 년도와 월을 표시할 수 있을 것 지난 날짜는 선택할 수 없게 막을 수 있을 것 달력 라이브러리는 생각 보다 많았는데 그 중 내가 구현하고 싶은 기능에 맞는 라이브러리 인 react-date-range 를 선택했다! react-date-range hypeserver.github.io 그리고 날짜를 받으면서 원하는 형식으로..

프로젝트를 진행하면서 막연히 리액트쿼리를 사용해보자! 하고 기본적인건 사용해봤는데 무한스크롤을 구현해보려고 찾아보니 리액트쿼리에 있는 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..

📌 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를 사용했다. 내가 슬라이드 기능을 구현해야할 때마다 애용(?)하는 라이브러리이다. 가장 구현하기 쉽고 제공하는 형태도 다양해서 사용하기 좋다. 이번에 만들어 보면서 알게된 점이 단순하게 기본형태로도 만들 수 있지만 잘 이용하면 커스텀도 가능하고 반응형으로 만들 수 있다는 걸 알게되었다. 덕분에 구현하고 싶은..

📍 투두리스트 프로젝트를 진행하며 모달창을 만들어야 할 일이 있었는데 그때는 라이브러리를 사용하는게 좋을지 그냥 코드로 만들어 보는게 좋을지 고민하다가 일단 그냥 만들어보자! 라는 마음으로 만들었다. 이번에 다른 프로젝트를 진행하며 모달창을 만들일이 또 생겼는데 이번에는 chakra를 사용해 간단하게 모달창을 만들어 보았다. 라이브러리 없이 모달창 구현하기 1. 모달창 컴포넌트 생성 및 버튼 만들기 export default function TodoEditModal() { return ( edit_square ); } 모달 컴포넌트를 생성하고 클릭했을 때 모달창을 띄울 버튼을 만든다. 2. 버튼 상태 관리해주기 import React, { useState } from 'react'; export defa..