하루 기록

쓰로틀링(Throttling)과 디바운스(Debouncing)는 자주 발생하는 이벤트를 제어하여 성능을 최적화하는 기법으로, 주로 스크롤, 리사이즈, 텍스트 입력 같은 빈번한 사용자 상호작용에 사용됩니다. 두 기법 모두 불필요한 함수 호출을 줄여 성능 문제를 방지하지만, 그 동작 방식과 적용 상황이 다릅니다.1. 디바운스 (Debouncing)디바운스는 마지막 이벤트가 발생한 후 일정 시간이 지나기 전까지는 함수 호출을 미루는 기법입니다. 사용자가 계속해서 이벤트를 발생시키는 동안 함수 호출은 지연되며, 마지막 이벤트 이후 일정 시간이 지나면 비로소 함수가 실행됩니다.동작 방식이벤트가 발생할 때마다 타이머를 설정합니다.만약 새 이벤트가 이전 타이머가 끝나기 전에 발생하면, 이전 타이머를 취소하고 새로운 ..

Zustand, Context API, Redux는 모두 상태 관리를 위한 도구이지만, 각 도구는 사용 목적, 복잡도, 성능 최적화 측면에서 차이가 있다. 1. ZustandZustand는 간단하고 가벼운 상태 관리 라이브러리로, 함수형 프로그래밍에 기반을 두고 있으며, 상태를 효율적으로 관리할 수 있습니다.특징간결함: 상태 정의와 사용 방식이 매우 간단합니다. useStore 훅을 사용하여 상태를 구독하고 관리합니다.성능 최적화: Zustand는 상태의 일부분만 구독할 수 있어, 구독된 상태가 변경된 컴포넌트만 리렌더링 됩니다. 이로 인해 리렌더링 성능이 최적화됩니다.미들웨어 지원: 미들웨어나 비동기 로직도 처리할 수 있지만, Redux처럼 구조화된 미들웨어가 아닌 단순한 기능적 미들웨어를 제공합니다...

SSR (Server-Side Rendering)과 CSR (Client-Side Rendering)은 웹 애플리케이션을 렌더링하는 두 가지 방식으로, 각각 고유한 장점과 단점이 있습니다.1. SSR (Server-Side Rendering)SSR은 웹 페이지의 HTML을 서버에서 미리 생성하여 클라이언트(브라우저)로 전달하는 방식입니다. 사용자가 페이지를 요청하면, 서버가 HTML을 렌더링하고 클라이언트로 전송합니다.특징HTML은 서버에서 완성된 형태로 전달됨클라이언트 측에서 별도의 JavaScript 로직이 없더라도 페이지가 바로 보임장점빠른 초기 로드 시간: 서버에서 완성된 HTML을 전송하기 때문에 초기 로딩이 빠릅니다. 특히 저사양 기기나 느린 네트워크 환경에서 이점이 큽니다.SEO 최적화: 검..

페이지 방문 순서를 history stack에 저장한다.  내장 함수push : 새로운 URL 추가replace : 현재 URL을 새로운 URL로 교체back : 뒤로가기 reload : 새로고침 (히스토리 스택에 영향 없음) router.replace의 사용 예시 로그인 페이지에서 사용자가 정상적으로 로그인을 완료했을 때, router.push 가 아니라 router.replace를 쓰곤한다.뒤로 가기 버튼으로 다시 로그인 페이지에 다시 접근하는 것을 막기 위함이다. history stack 의 데이터에 접근하는 방법은? 없다. stack 자체를 조회할 수 없기에 각각의 페이지 이동 시 push가 맞는지 replace가 맞는지 적절히 잘 쓰는 것이 좋다.로그인 페이지가 n개의 단계로 페이지 이동하면서 ..

정적 metadata 설정// layout.tsx 또는 특정 페이지 컴포넌트 파일 export const metadata = {     title: '초보 개발자를 위한 리액트 입문',     description: '리액트를 처음 배우는 개발자를 위한 기초부터 심화까지의 과정을 담은 페이지' }; 동적 metadata 설정import fetchProductDetails from '../path/to/api'; export async function generateMetadata({ params }) {     const product = await fetchProductDetails(params.id);     return {        title: `${product.name} - 상품 정보`,  ..

1. 원하는 로티 파일 찾아서 다운받기https://lottiefiles.com/featured-free-animations Featured Free Lottie Animations - Curated Motion DesignsExplore our featured free Lottie animations, handpicked for quality and creativity. Discover free animations to enhance your projects with stunning motion graphics.lottiefiles.com 2. 다운받은 파일을 프로젝트 내의 폴더로 옮기기 3. lottie player 설치npm i react-lottie-player  4. Lottie renderin..