React에서 getBoundingClientRect 활용하기getBoundingClientRect는 DOM 요소의 크기와 화면에서의 위치를 정확히 파악할 수 있는 메서드입니다. 이 메서드는 React에서 특정 요소가 화면에 보이는지 감지하거나, Lazy Loading, 애니메이션 트리거 등을 구현할 때 매우 유용합니다. 아래는 getBoundingClie...

Next.js에서 Utterances 댓글 시스템 구현하기Utterances는 GitHub 이슈를 활용하여 웹사이트에 간단하게 댓글 시스템을 추가할 수 있는 오픈 소스 프로젝트입니다. Next.js 프로젝트에 Utterances를 삽입하는 방법과, 테마 전환 시 깜빡임이 발생하는 방식과 깜빡임을 방지하는 방식을 각각 소개합니다.1. Utterances 기본...

useCallback, useMemo, 그리고 memo는 모두 React에서 성능 최적화를 위해 사용되는 도구이지만, 각각의 목적과 사용 사례가 다릅니다. 아래에서 그 차이점을 설명하겠습니다.1. useCallback목적**: 함수를 메모이제이션하여 불필요한 재생성을 방지.사용 대상**: 함수.사용 예시**: import React, { useCall...

Next.js의 App Router는 13버전부터 도입된 새로운 라우팅 방식으로, 기존의 Pages Router보다 더 현대적이고 유연한 기능을 제공합니다. App Router를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 관리하며 React 18의 기능을 최대한 활용할 수 있습니다. 아래는 App Router의 주요 개념과 특징, 활용법을 정리한...

React Query useMutation 사용법React Query는 React 앱에서 데이터를 fetch하고 캐시하는 것을 간단하게 만들어주는 라이브러리입니다. useMutation은 React Query에서 제공하는 함수 중 하나로, 데이터를 create, update, delete하는데 사용됩니다.useMutation 사용법useMutation 함수...

react query v4 설치yarn add @tanstack/react-queryreact query 브라우저 호환아무 버전이나 다 되는 줄 알았는데, 호환하는 브라이저가 있는걸 알았다.Chrome >= 73Firefox >= 78Edge >= 79Safari >= 12.0iOS >= 12.0opera >= 53react query 설정하기quertCl...

mysql query 순서FROM : 조회 테이블 확인 SELECT부터 처리할 것 같지만, 쿼리의 가장 첫 번째 실행 순서는 FROM 절입니다. FROM 절에서는 테이블의 모든 데이터를 가져옵니다.WHERE : 데이터 추출 조건 확인 FROM절에서 읽어온 데이터중에서 조건에 일치하는 데이터만 가져옵니다.GROUP BY : 컬럼 그룹화 WHERE...