블로그 제작 시 코드 문을 잘 보이게 하기 위해서 highlight.js라이브러리를 사용하다가 react문에서는 적절하게 표현되지 않아 최종적으로 react-highlight 라이브러리를 적용했다. react-highlight npm react-highlightReact component for syntax highlighting. Latest version: 0.15.0, last published: 2 years ago. Start using react-highlight in your project by running `npm i react-highlight`. There are 200 other projects in the npm registry using react-highlight.www.npm..

상태 관리 라이브러리 중 zustand를 종종 사용해 정리하고자 한다.  리액트에서의 전역 상태 관리 전역 상태 관리란 앱의 중앙에 위치함으로써 어느 컴포넌트든 이 데이터(상태)에 접근할 수 있으며 상태 변경이 가능하다. 전역 상태관리를 지원하는 api에는 react에 내장된 useContext 훅을 포함하여 redux, recoil, zustand, zotai, react-query 등 다양한 서드파티 라이브러리들까지 존재한다.  zustand 란 ?Zustand는 작은 용량(1.16kb의 번들 사이즈), 빠른 속도, 그리고 확장 가능성을 자랑하는 상태 관리 라이브러리입니다. 단방향 데이터 흐름(Flux패턴과 유사),  React hooks 기반으로 설계되어 있어, 복잡한 보일러플레이트 코드(  boi..

가장 기본이 되는 React에서 input 상태를 어떻게 관리하는지 정리했다. onChange를 통해 useState에 value값을 넣어주면 된다.input의 value값은 event.target.value 이다.import React, { useState } from "react";export default function Test() { const [text, setText] = useState(""); const onChange = (e: any) => { setText(e.target.value); }; const onReset = () => { setText(""); }; return ( 결과 : {text} 초기화 ..

프로젝트 진행중 swr를 활용하여 사용법에 대해 정리했다.swr 이란"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략으로 빠르고, 가볍고, 재사용 가능한 데이터를 가져온다.  설치 npm i swr// oryarn add swr  기본 사용법 import useSWR from 'swr'function Test() { const fetcher = (...args) => fetch(...args).then(res => res.json()) const {..

프로젝트를 진행하면서 엑셀 다운로드 작업 시 자주 사용하는 exceljs 대해 정리했다. 👉 선택 이유npm trends를 보면 지난 1간 라이브러리 다운로드 횟수입니다. xlsx 다운로드 수가 더 많지만 ExcelJS를 선택한 이유는 다음과 같습니다.  exceljsxlsx스타일링과 서식 지정세밀한 스타일링이 필요할 때 유리( 다양한 서식 기능, 차트, 이미지, 다양한 셀 유형을 지원 )복잡한 서식이나 스타일링에는 제한(기본적인 읽기, 쓰기 기능을 제공)호환성과 데이터 처리Excel 파일 => JSON 형식, JSON 데이터 => Excel로 변환하는 기능이 있음----세밀한 데이터 조작, 복잡한 데이터 처리 요구 사항 가능대량의 데이터를 신속하게 처리할 수 있지만, 복잡한 데이터 변환이나 고급 조작..

APEXCHART는 데이터를 시각 화 해주는 차트 라이브러리로 관리자 페이지 작업 시 많이 사용해서 사용법에 대해 정리해보자 한다.apexcharts 사이트https://apexcharts.com/ ApexCharts.js - Open Source JavaScript Charts for your websiteApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.apexcharts.com  React에서 사용 시 npm install --save react-apexcharts apexcharts..

블로그에 적용해보고자 Lottie에 대해 알아보았다. Lottie는 GIF나 MP4 같은 다른 형식에 비해 품질은 같으면서 훨씬 더 작으며 벡터에 기반하기 때문에 해상도의 영향을 받지 않고 확대하거나 축소할 수 있으며 Android, iOS, 웹 브라우저, React 등과 호환되는 고품질 JSON 인코딩 애니메이션입니다. LottieFiles LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collabora..

날짜 선택하는 캘린더 라이브러리 중 react-datepicker를 자주 사용한다. React Datepicker 공식 웹사이트 React Datepicker crafted by HackerOne reactdatepicker.com  React Datepicker 설치 npm install react-datepicker --save//oryarn add react-datepicker  React Datepicker 사용법기본 사용import DatePicker from "react-datepicker";import "react-datepicker/dist/react-datepicker.css"; // 달력 cssexport default function Home() { const [startDate, s..

포스트 글이 길거나 블로그, 프로젝트 갯 수가 많아지면 스크롤이 발생해 상단 이동 버튼을 배치하는게 좋을 것 같아 추가해보았다. 상단 이동 버튼window.scrollTo(xpos, ypos, behavior:'auto'}) ****를 사용하면 원하는 위치로 이동 시킬 수 있다.behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.)auto는 기본 값이며, 바로 위치로 이동한다. instant도 같은 동작을 한다.smooth는 부드럽게 이동하는 애니메이션 효과를 보여준다.⇒ 부드럽게 상단 위치하기 위해서 클릭 시 window.scrollTo({ top: 0, behavior: "smooth" }); 실행되게 했다.import { useEffect, use..

일반적으로 모달 닫기 버튼 외에 모달 영역 밖을 클릭 시 닫을 수 있어야 된다.  모달 열고 닫기 기본형useState를 활용해 클릭하는 버튼을 이전 값에 반대되는 값이 들어오게 해서 true면 모달 창이 보이고 false면 닫히게 만들었다.export default function Modal() { const [modal, setModal] = useState(false); return ( setModal((prev) => !prev)}> 버튼 {modal && ( 모달 )} );}  모달 영역 외 클릭시 모달 닫기 useRef를 사용하여 modalBtnRef와 modalRef를 생성하여 modalBtnRef**(모달..