Today I Learn

TreeNodeProps 타입 정의type TreeNodeProps = { id: number; name: string; children?: TreeNodeProps[];};트리 노드의 구조를 타입으로 정의한다.각 노드는 id, name, children(자식 노드 배열, 선택적)을 가질 수 있다.children이 없는 노드는 리프 노드(자식이 없는 노드)다. 트리 데이터 예시const treeData: TreeNodeProps[] = [ { id: 1, name: "Parent", children: [ { id: 2, name: "Child 1", children: [ { id: 3, name: "Grandchild ..

포트폴리오 사이트를 react로 구현하던 중 모달 기능이 필요하여 라이브러리를 사용하지 않고 만들었다.// Modal.jsximport React from 'react';export default function Modal({ open, close, title, children }) { if (!open) return null; return ( {title} × {children} );}  모달의 기본적인 틀만 만들어 준 후 나머지는 모달을 사용하는 페이지에서 설정해주도록 한다. 이 때 애니메이션의 fadeIn, fadeOut을 사용하기 위해..

next js 에서 google analytics tagmanager를 사용하려면 두가지 단계를 거쳐야 한다. 1. 에 GTM 스크립트를 배치한다 여기서 여러가지 방법이 있지만 가장 간단한 react-gtm-module 라이브러리를 이용하려고 한다. 2. google tag manager에서 history 변경 트리거를 생성한다. 사용방법 1. React-gtm-module 설치 yarn add react-gtm-module 타입스크립트 사용중이라면 yarn add @types/react-gtm-module 2. gtm추적 코드 삽입 gtmId를 env파일에 보관한다(경로는 임의등록) // .env.production PUBLIC_ENV=production GA_TRACKING_ID=GTM-xxx 이후 ..

const [searchText, setSearchText] = useState('') const wrapBold = (str:string) => { const replacedStr = str?.replace(new RegExp(searchText + '', 'gi), `${searchText}`) } return ( )

next.js에서 스크롤 위치 복원 구현하는 방법 페이지 이동 후 뒤로가기 버튼을 선택하면 페이지 상단으로 스크롤이 이동되지 않고 스크롤이 유지되기를 원했다. 1. next.js는 scrollRestoration을 기본적으로 지원한다. next.config.js 파일에서 scrollRestoration을 true로 설정해주기만 하면 된다. 하지만 이 방법은 실험적인 방법이라고 하며 내 프로젝트에서는 동작하지 않았다. const nextConfig = { experimental: { scrollRestoration: true, }, }; module.exports = nextConfig; 2. 브라우저의 세션스토리지를 사용하는 방법 import { useEffect } from 'react'; import..

react에서 인쇄기능을 사용할 때 reat-to-print라는 라이브러리를 사용 할 수도 있지만 생각보다 간단한 기능이라 window.print() 함수를 사용하여 만들었다. import useRef from 'react'; import ReactDOM from 'react-dom'; const printRef = useRef(null); const onClickPrint = () => { if (ReactDOM && ReactDOM.findDOMNode(printRef.current)) { const printContent = ReactDOM.findDOMNode(printRef.current) as HTMLElement; const printContents = printContent.innerHTM..

내가 원했던 것 select box로 나타냈던 날짜포맷에서 1월은 31일까지, 2월은 28일까지 등 해당 월에 맞는 일 수 를 나타내고 싶었다 날짜 가져오기 const [form, setForm] = useState({ year: nowYear, month: "01", day: "01", }); 날짜 계산하는 코드 const now = new Date(); let years = []; for (let y = now.getFullYear(); y >= 1930; y -= 1) { years.push(y); } let month = []; for (let m = 1; m ( {item} ))}

React Spinners 설치 $ npm install react-spinners --save Spinners 모양 고르기 React Spinners www.davidhu.io 위 사이트에 접속하여 원하는 모양의 스피너를 고른다. 나는 FadeLoader를 선택함 사용예시 - Loading.jsx import React from "react"; import FadeLoader from "react-spinners/FadeLoader"; function Loading() { return ( ); } export default Loading; - Result.jsx const Result = () => { const [loading, setLoading] = useState(null); useEffect(..

const openModal = () => { setModalOpen(true); document.body.style.overflow = "hidden"; }; const closeModal = () => { setModalOpen(false); document.body.style.overflow = "unset"; }; 모달창을 여는 이벤트에 hidden값 혹은 unset값 주기 모달 창 오픈할 때 hidden으로 스크롤 막아주고, 모달창을 닫은 후엔 unset을 준다

오랜만에 input을 다뤄봤는데 은근히 헷갈렸다 form({phone: e.target.value.replace(/[^0-9]/g, "")})} /> 1000 단위마다 콤마 찍기, 신용카드 넘버 포맷, 전화번호 하이픈 등 참고 [React.js] input box에 1000단위마다 자동으로 comma 넣기 react-number-format npm pakage를 이용하여 쉽게 구현할 수 있다. npm install react-number format 예제구현 - 1000 단위마다 콤마 찍기 import React from 'react'; import NumberFormat from 'react-number-.. wonblog.tistory.com