자주 사용하는 라이브러리 중 데이터를 관리하고 동기화 해주는 react-query에 대해 정리해보고자 한다.react-qury?react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 공식 홈 Overview | TanStack Query React DocsTanStack 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, synchronizing and updating server state..

개인 작업으로 크리스마스 파티 초대장을 만들면서 눈 내리는 효과를 적용하고 싶어 시도해보았다.Next.js에서 emotion을 활용해 눈 내리는 효과를 만들었다. 각 눈송이 사이즈, blur, 눈 내리는 속도 설정필요한 상수snowSizeBase: 눈송이의 기본 크기를 나타냅니다. 모든 눈송이의 크기는 이 값을 기반으로 무작위로 조절된다.browserBuffer: 눈송이가 나타날 수 있는 브라우저 화면 외의 추가적인 여유 공간을 나타냅니다. 이 값은 눈송이가 화면을 벗어나지 않도록 하는 역할을 한다.leftPosition: 눈송이의 시작 위치의 왼쪽 한계를 나타냅니다. 화면 왼쪽 끝으로부터 이 값만큼 떨어진 위치까지 눈송이가 나타난다.animateSpeedBase: 눈송이가 화면을 향해 떨어지는 속도를 ..

프로젝트를 진행 하다 보면 리스트 페이지에서 pagination기능을 적용하고는 한다. 따로 라이브러리는 사용하지 않고 자바스크립트로 pagination을 구현했다.현재 제작한 개인 블로그에서도 한 페이지 당 9개 포스트로 조건 별로 pagination을 구현했다.기본 paginationPagination 설정currentPage : 초기 값 1로 설정하여 첫 페이지부터 보이게 한다.indexOfLast / indexOfFirst ****: 현재 페이지에 따라 보여줄 블로그 목록의 시작과 끝 인덱스를 계산한다.{blogs?.results.slice(indexOfFirst, indexOfLast).map((item: ListResults) => ...} ****: 현재 페이지에 해당하는 블로그 목록을 슬라..

프론트에서 filter() 함수를 통해 검색 기능을 만들 수 있어 개인 블로그에도 검색 기능을 넣었다.검색어먼저 input 태그의 input의 value값은 event.target.value으로 useState에 value값을 넣어 주며 입력 시 데이터를 필터 할 함수( handleSearchInputChange() ) 에 event.target.value을 넘긴다. React에서 input 관리 관련 글 React에서 input 관리가장 기본이 되는 React에서 input 상태를 어떻게 관리하는지 정리했다. onChange를 통해 useState에 value값을 넣어주면 된다.input의 value값은 event.target.value 이다.import React, { useState } from "..

관제 시스템 프로젝트를 진행하면서 기능, 내용 설명에 대한 온보딩 (= Product tour) 을 추가하기로 하여 react-joyride를 적용하여 사용법에 대해 정리하고자 한다. react-joyride npm react-joyrideCreate guided tours for your apps. Latest version: 2.8.2, last published: 3 months ago. Start using react-joyride in your project by running `npm i react-joyride`. There are 215 other projects in the npm registry using react-joyride.www.npmjs.com  react-joyride Ho..

여러 프로젝트에서 자주 사용하는 탭 기능에 대해 정리해보았다.tab으로 보여줄 데이터const tabData = [ { title: "Seoul", content: "서울 Seoul. 서울은 대한민국의 수도로서 정치, 경제, 사회, 문화의 중심지이다. 서울의 면적은 605㎢로서 도쿄의 23개 특별구와 비슷하며, 싱가포르와 뉴욕시보다 다소 작은 크기이다. 서울은 외사산과 내사산에 둘러싸인 분지의 지형이다.", }, { title: "Jeju", content: "제주도(濟州島, 영어: Jeju Island)는 대한민국의 남해에 위치한 섬이자 대한민국에서 가장 큰 섬이다. 또한 제주도는 행정구역상 제주특별자치도에 속한다. 섬의 면적..

페이지의 다크 모드, 스타일을 LocalStorage에 저장 후 활용하는 경우가 많다.현재 블로그에서도 테마 저장은 theme 키로 블로그, 프로젝트 페이지 스타일과 포스트 순서를 blog_page_state / project_page_state 이 키로 저장하고 있다.그래서 저장, 가져오기, 삭제하는 방법에 대해 정리했다.LocalStorage 값 저장기본 코드 : localStorage.setItem('key','value')react 에서 아래 코드와 같이 저장하거나 특정 이벤트가 발생하여 저장 할 수 있다.useEffect(() => { localStorage.setItem("save", "saveStorage"); }, []); LocalStorage 값 가져오기기본 코드 : localS..

React에서 부모에서 자식 간에 값을 넘기는 방법에 대해 정리해보았다.부모에서 자식으로 값 전달부모에서 Props를 이용해서 Child 컴포넌트에 전달한다.⭐ props를 이용한다.props란, properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다.(자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻)자식이 부모로부터 받아온 값을 사용할 때 방식1번객체 비 구조화를 사용하여 props를 선언한다. 이 경우, Child 컴포넌트는 **user**라는 속성을 직접 사용할 수 있다. 이 방식은 코드를 간결하게 유지하고 가독성을 높일 수 있다. 2번2번 방식은 **props**라는 객체를 통해 모..

이번에는 이전 스크롤 위치를 기억하면서 모달 창이 보이면 body 스크롤을 방지하는 방법에 대해 알아 보았다. 모달 창을 여는 index.tsx 로 close를 넘긴다.//index.tsxexport default function Home() { const [modal, setModal] = useState(false); const showModal = () => { setModal(true); }; const close = (x: any) => { setModal(x); }; return ( {[1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13].map((x) => ( ..

모바일 메뉴가 화면에 나오면 스크롤이 일어나지 말아야 할 때도 있다. 스크롤 방지를 안 하면  스크롤 방지모바일 메뉴가 보이면 body에 스타일을 주어 스크롤을 방지한다.// 모바일 메뉴 오픈시 스크롤 방지 useEffect(() => { if (showMobileMenu) { document.body.style.overflowY = "hidden"; document.body.style.position = "fixed"; document.body.style.width = "100%"; document.body.style.height = "100%"; } else { document.body.style.position = "relative"; ..