React 렌더링에 대한 최적화시키기 위한 도구인 React.memo, useMemo, useCallback 에 대해 정리 해보았다. 최적화, 메모이제이션업데이트, 변경과 같은 상황이 화면에서 이루어지면 컴포넌트를 다시 센터링하고 레이아웃 및 페인팅 과정을 다시 계산하는 상황이 발생하여 React의 성능을 점검할 때는 컴포넌트 자체의 리랜더링이 불필요하게 반복되고 있지 않은지, 그리고 내부 로직이 쓸데없이 다시 만들어지거나 복잡한 계산을 반복하고 있지는 않은지 고려해야 한다.Memoization(메모이제이션)은 Caching의 일종으로 이미 계산해 본 연산 결과를 기억해두었다가 동일한 연산을 해야 할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법으로 쓸데없이 같은 계산을 반복하게 하지 않게..

달력 (히트맵) 만들기 (1) 이어서…  이전 글에서는 달력을 만들었다면 이번 글에서는 날짜에 해당하는 포스트 수와 Home에서 이번 달 만이 아닌 다른 달과 년도를 선택할 수 있는 모달 창과 월 별 총 포스팅 수, 달력을 만든 에 넘겨줄 props 를 구한다. 날짜에 해당하는 포스트 수달력을 만들기 전에 날짜마다 포스팅 된 글 수를 구한다.map() 함수를 사용하여 각 포스트의 created_time을 추출하고, 이를 JavaScript의 Date 객체로 변환하여 해당 날짜를 한국 표준시(UTC+9)로 변환하고, 날짜 정보에서 시간 부분을 제외한 후 toISOString()을 통해 ISO 형식의 문자열로 변환해 split("T")[0]을 사용하여 날짜 부분 만을 추출하여 korDate에 저장한다.cre..

개인 웹사이트를 만들면서 깃 헙에 있는 잔디처럼 하루에 포스팅 된 글 수를 한 눈에 보고 싶어 아펙스 차트의 히트맵을 사용하여 잔디와 조금 다르게 구현했다. 구현 포인트월 별 히트 맵 ( 달력처럼 구현 )페이지 진입 시 오늘 날짜 해당 월에 대해 보여주기년, 월 선택 가능하게마우스 호버 시 포스트 갯 수 툴 팁으로 보여주기히트 맵을 사용하여 달력 구현dynamic 을 사용하여 ApexCharts를 import 시켰다.( 관련 글 : https://min-sun.vercel.app/blog/f3df2808-d7ac-4b7f-b2b4-0acda188806d ) 달력 제작 시 고려해야 할 사항전달, 다음날 날짜가 같은 주에 있는 첫 번째 주, 마지막 주 일 자 수를 구해야 한다. 이번 달 날짜 수먼저 Home..

여러 리스트 중 리스트들이 개별로 기능하는 방법에 대해 정리했다. 고려할 사항리스트 중 클릭한 리스트만 열고 닫을 수 있어야 한다.다른 리스트를 열더라도 기존 열린 리스트에 영향이 없어야 한다.리스트 click 이벤트를 주어 handleShowDetail 함수를 통해 해당 리스트의 값을(여기서는 index) 받아researchDetailLiStates에 저장된 값 중 빋아 온 리스트에 대한 값을 반전 시켜 새로운 상태를 업데이트한다.const [researchDetailLiStates, setResearchDetailLiStates] = useState({});const handleShowDetail = (index) => { // setResearchDetailLiStates 함수를 사용하여 이전 상..

useform으로 값을 넘길 때 register로 등록되지 않은 값을 추가로 넘겨야 할 때도 있다.react-hook-form 관련글 : https://minsun309.tistory.com/entry/react-hook-form-useForm userform에서 값을 최종적을 유효성 검사가 성공하면 데이터를 보내는 handleSubmit에 데이터를 인자로 받는 onSubmit함수에 데이터를 보내기 전에 특정 값을 추가해 주면 된다. 기본형 //...  데이터 추가const taemList = ["청팀", "백팀"];const [teamTxt, setTeamTxt] = useState("팀을 선택하세요");const [teamError, setTeamError] = useState(false);const..

키에 토큰(jwt)을 저장하거나 로그인 페이지 구성 시 id같은 사용자 정보를 저장하는 등 react-cookie 라이브러리를 활용하는 경우가 많 react-cookie에 대해 정리해보았다.cookie?쿠키는 사용자 웹 사이트 방문 시 생기는 4KB 이하의 작은 파일로 키와 값이 들어있는 데이터 파일 이다. 쿠키는 사용자가 페이지를 얼마나 자주 방문하는지 알려줌으로써, 사용자가 관심을 갖는 정보를 파악할 수 있도록 해주는 역할을 한다. 예를 들어 쇼핑몰 사이트의 장바구니를 상품을 넣고 며칠 후에 방문했을 때, 상품이 그래도 유지되어있는 이유는 쿠키를 활용하기 때문이다.react-cookiereact-cookie npm react-cookieUniversal cookies for React. Latest ..

관제 시스템 프로젝트 중 로그인 연장 버튼을 누르면 로그인 상태를 연장 시키는 기능을 넣어야 해서 react-idle-timer 라이브러를 활용해서 제작하여 react-idle-timer 사용 방법에 대해 정리해보았습니다. react-idle-timerReact 애플리케이션에서 사용자가 일정 시간 동안 비활성 상태일 때 특정 작업을 수행하도록 돕는 라이브러리입니다. 예를 들어, 사용자가 일정 시간 동안 키보드나 마우스 등의 입력을 하지 않는 경우 세션을 만료시키거나, 경고 메시지를 띄우는 등의 기능을 구현할 수 있습니다. 👉 선택 이유개발 효율성: react-idle-timer는 다양한 비활성화 이벤트를 기본으로 제공하며, 설정이 간단하여 직접 타이머 기능을 구현하는 것보다 빠르게 프로젝트에 적용할 수..

관리자 페이지같이 다수의 리스트가 있는 화면을 만들다 보면 경우에 따라 체크 박스를 통해 여러 리스트를 선택 후 해당 리스트들에게 특정 기능을 부여할 때가 있다.체크박스 전체 선택 / 해제 & 개별 선택thead에 있는 체크 박스 선택 시 리스트 전체 체크, 재 선택 시 전체 해제개별 선택 후에도 thead에 있는 체크 박스 선택 시 리스트 전체 체크import { useState } from "react";export default function Test() { const userDatas:any = []; for (var i = 1; i { if (checked) { setCheckItems((prev) => [...prev, id]); } else { setChe..

카테고리나 리스트 등 같은 영역에서 사용자의 집중도를 위해 다수 중 하나만 선택되어 영역이 보이거나 선택된 ui가 보여야 할 때가 있다. 리스트 선택 시 관련 정보 하나만 보이기선택 시 관련 content가 보이고 재 선택 시 닫기오픈 된 상태에서 다른 리스트 선택 시 기존 content닫히며 새 content보이기import { cls } from '@/utils/config';import { useState } from 'react';export default function List() { // 임시 데이터 const userDatas = []; for (var i = 1; i { if (countIndex === index) { setCountIndex(-1); } el..

로그인 같은 폼을 만들 때 자주 사용한 react-hook-form에서 제공한 useForm에 대해 정리 해보았다. 사용하는 이유유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다비제어 컴포넌트 방식으로 구현되어있기에 렌더링 이슈를 해결하면서도, form의 데이터와 상태를 Provider 아래라면 어느 곳에서든지 props drilling 없이 사용할 수 있다코드 단순화 및 유지보수 비용을 낮춘다 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트HTML에서,, 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 s..