Today I Learn

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

리액트를 이용하여 모달컴포넌트를 개발하던 중 에러 발생 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 해석: 경고! 언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지 않지만 메모리 누수가 발생된다. 해결방법으로 useEffect의 cleanup function을 이용해라 에러코드 import { useEffec..

개인프로젝트로 유튜브 클론코딩을 하고있는데 만들고 배포를 했더니 이미지가 엑박이 뜨는 상황이 발생했다 어렴풋이 절대경로를 사용해야 하는데..~ 라는 걸 알고있었지만 제대로 알지 못해 발생한 일이기 때문에 이번 기회에 정리해보려고 한다. https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev 공식문서를 찾아봤는데 답이 바로있었다.. 멍충 다음과 같이 자바스크립트 내에서는 process.env.PUBLIC_URL 을 사용하면..