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을 사용하기 위해..

Supabase AuthSupabase Auth를 사용하면 인증 및 권한 관리를 간편하게 구현이 가능하다. 지원하는 인증 방식에는 이메일 인증, Magic Link를 통한 비밀번호 없는 로그인, 전화번호를 통한 로그인, SNS로그인, 기업용 SSO등 다양한 방법으로 사용자 인증을 지원한다. 1. Confirmation URL 방식- Web Client 에서 Supabase로 회원가입 요청- Supabase에서 회원가입 처리 및 인증 링크가 담긴 이메일 전송Authentication -> Email Templates 에서 정의된 템플릿을 사용하여 이메일을 보낼 수 있다. 1. 유저는 이메일로 전송된 인증 링크를 클릭하여 로그인 할 수 있다. - 인증링크 = https://***.supabase.co/aut..

진행중인 프로젝트의 node 버전을 맞춰놨었는데 새 프로젝트에서는 다른 버전의 node가 필요한 상황이었다.구글링을 해봤는데 대부분 mac환경에서 node버전 자동화 하는 법을 올려두고있어 기록용으로 남겨둔다.나는 bash를 사용하고 있다.1. 사용하고자 하는 각 프로젝트의 node version을 설치한다.https://nodejs.org/en나는 필요한 버전이 18.14.2 와 20.17.0 버전이 필요해서 node 설치 후 npm i 해줬다. 2. 각 프로젝트의 루트 디렉토리에 .nvmrc 파일을 만든다// 1번 프로젝트의 .nvmrc18.14.2// 2번 프로젝트의 .nvmrc20.17.0nvmrc파일 안에 사용하려는 버전을 입력해야 한다. 3. bashrc 설정나는 bash를 사용하고 있기 때..

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