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 함수를 사용하여 이전 상..

진행 중인 프로젝트에서 하단으로 이동하는 버튼이 필요해 알아보았다. 하단 버튼은 페이지 총 Height인 document.body.scrollHeight를 scrollTo()함수의 top값에 넣어 주면된다. ⭐ scroll이 이루어진 영역을 기준으로 scrollTo 함수를 실행해야 작동한다.아래 코드는 스크롤이 생기는 window영역으로 기준을 잡아 window.scrollTo() 를 실행시킨다.const Area = document.querySelector(".area");const moveBtn = document.querySelector(".down-btn");moveBtn.addEventListener('click', () => { window.scrollTo({ top: document...

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..

React의 Flux 패턴에 대해 알아보았다. MVC 패턴MVC는 Model, View, Controller의 약자입니다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여집니다. 사용자가 View를 통해 데이터를 입력하면, Controller가 그 입력을 처리해 Model을 업데이트할 수 있습니다. 이 구조에서는 데이터 흐름이 양방향으로 일어날 수 있습니다.  문제는 애플리케이션의 규모가 커지면 아래와 같이 복잡해집니다.View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View에 데이터를 전달하는 상황이 발생합니다. 규모가 커질..

관제 시스템 프로젝트 중 로그인 연장 버튼을 누르면 로그인 상태를 연장 시키는 기능을 넣어야 해서 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..