FrontEnd/React (3) 썸네일형 리스트형 Zustand로 전역 상태 관리 하기 ZustandZustand는 독일어로 ‘상태(state)’를 의미합니다. 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리입니다.Store란?스토어(Store)는 애플리케이션의 여러 상태를 중앙에서 관리하는 패턴을 말합니다.(상태는 관리하는 데이터를 의미합니다)이를 통해 컴포넌트 간 데이터를 쉽게 공유하고 상태를 업데이트할 수 있습니다.이 스토어는 Zustand가 제공하는 create 함수를 사용해 생성됩니다.스토어 생성 예시import { create } from 'zustand'const useCounterStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state... Virture Dom Diffing 알고리즘이란? 1. Virtual DOM이란?브라우저의 DOM(Document Object Model)은 조작 비용이 비싸고 느립니다. 그래서 React는 렌더링 성능을 높이기 위해 실제 DOM의 가벼운 사본(Virtual DOM) 을 메모리에 유지합니다. 2. Diffing 알고리즘이란? 실제 UI에 변화가 생기면 React는 다음 단계를 수행합니다.새로운 Virtual DOM을 생성이전 Virtual DOM과 비교(diff) 해서 바뀐 부분 찾기최소한의 실제 DOM 업데이트 수행이 “2번 단계”, 즉 두 트리 구조를 비교하는 알고리즘이 바로 Diffing 알고리즘입니다. 3. 어떻게 작동할까? (React 기준)DOM 트리 노드를 가장 효율적으로 교체하는 방법은 어떻게 알 수 있을까요?React는 몇 가지 가.. Lighthouse로 프론트엔드 성능 개선하기 해당 글은 Velog에서 옮겨온 글 입니다.문제점1. 첫 화면 컨텐츠 렌더링시 버벅거리는 문제첫 화면에서 AOS 라이브러리를 사용하여 이미지에 flip 효과를 주는 애니메이션을 적용했다.하지만 해당이미지가 렌더링 될 때 커튼처럼 버벅거리며 렌더링되었고 깜빡거리면서 보여지는 문제가 발생했다.해당 문제는 두 가지의 방법으로 해결했다.CSS의 will-change 속성으로 해결CSS 작업에서 스타일 계산, 레이아웃 처리, 애니메이션 프레임 계산 등을 CPU가 담당하는데, CPU가 과도하게 사용되는 경우 버벅거리고 깜빡이는 문제가 발생할 수 있다.CSS의 will-change 속성은 브라우저에게 요소의 예상 변경 사항을 미리 알려주는 역할을한다.이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할 .. 이전 1 다음
