프론트에서 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)는 대한민국의 남해에 위치한 섬이자 대한민국에서 가장 큰 섬이다. 또한 제주도는 행정구역상 제주특별자치도에 속한다. 섬의 면적..

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

모바일 메뉴가 화면에 나오면 스크롤이 일어나지 말아야 할 때도 있다. 스크롤 방지를 안 하면  스크롤 방지모바일 메뉴가 보이면 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"; ..

가장 기본이 되는 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..

날짜 선택하는 캘린더 라이브러리 중 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..