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

문제 Material Ui의 Dialog 모달창 클릭 시 뒤의 내용이 사라지는 현상이 있었다. 원인 cdk-global-scrollblock 클래스가 html엘리먼트에 삽입되어 position: fixed 가 되기 때문임을 알게되었다. 해결방법 Dialog에 사용할 scrollStrategy 추가 const dialogRef = this.dialog.open(DialogComponent, { width: '250px', data: data, scrollStrategy: new NoopScrollStrategy() }); scrollStrategy를 NoopScrollstrategy로 설정해주기 import { NoopScrollStrategy } from '@angular/cdk/overlay'; 참고 ..

앵귤러는 처음 다뤄봤는데 너무 간단한 것 이지만.. 리액트와 다른 부분도 많고 헷갈려서 정리! 게시글을 불러오는데 게시글 앞에 index 번호가 출력되어야 했다. {{i+1}} {{item}}

게시글 작성 24시간마다 날짜 형식 다르게 주기 게시판을 만들던 중 작성일을 넣어주어야 하는데 오늘 올린 게시글은 HH:mm 형식으로, 하루가 지난 게시글은 YYYY-MM-DD 형식으로 만들어져야 했다. 그런데 받은 코드를 살펴보니 24시간 기준으로 하루가 지난 게시글로 판단되어 전날 17:34에 올린 게시글이 오늘 오전에 봤을 때, 오늘 올린 게시글처럼 보이는 현상이 있었다 수정 전 코드 get createdAtFmt() { const timeValue = new Date(this.createdTs); const betweenTime = Math.floor( (new Date().getTime() - timeValue.getTime()) / 1000 / 60 ); const betweenTimeHour..

git 에서 remote branch 삭제하는 방법 방법1 $ git push origin --delete 방법2 $ git branch -d $ git push origin

내가 원했던 것 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(..