매일매일

Streaming SSR이란?`Streaming SSR`은 서버에서 렌더링된 HTML을 한 번에 완성해서 보내는 방식이 아니라, 준비된 부분부터 점진적으로 스트리밍해서 클라이언트에게 전달하는 기술입니다.기존 SSR은 서버에서 모든 데이터를 처리한 뒤 완전한 HTML을 전송하는 반면, Streaming SSR은 서버가 데이터를 준비하는 즉시 HTML 조각을 스트림 형태로 보내고, 클라이언트는 이를 실시간으로 렌더링합니다. 장점Streaming SSR의 가장 큰 장점은 `초기 로딩 시간`을 단축할 수 있다는 점입니다.HTML의 일부라도 준비되는 즉시 클라이언트가 렌더링을 시작하므로 TTFB(Time To First Byte)가 개선됩니다.데이터가 많거나 복잡한 대규모 어플리케이션에서 효과적이며, 사용자가 중..

1. 이미지 포맷 최적화전통적인 JPEG나 PNG 대신 압축 효율이 높은 최신 포맷을 사용하면 이미지 품질을 유지하면서도 파일 크기를 크게 줄일 수 있습니다.최신 이미지 포맷`WebP``AVIF`이러한 최신 포맷들은 일부 구버전 브라우저에서 지원되지 않을 수 있습니다. 이 경우 요소를 사용해 호환성 문제를 해결할 수 있습니다: 브라우저는 위에서부터 순서대로 지원하는 포맷을 선택하여 표시합니다:AVIF 지원 시 -> image.avif 사용WebP 지원 시 -> image.webp 사용둘 다 미지원 시 -> image.jpg 사용  2. 이미지 사이즈 조정실제 화면에 표시되는 크기보다 큰 이미지는 불필요한 데이터 전송을 야기합니다.최적화 방법서버에서 필요한 크기로 `리사이징`하여 전송`Respo..

기본 개념`useEffect`와 `useLayoutEffect`는 모두 컴포넌트가 렌더링된 후 특정 작업을 수행하기 위해 사용됩니다. 하지만 각각의 실행 시점과 목적이 다르기 때문에, 상황에 따라 적절한 Hook을 선택해야 합니다.  useEffect`useEffect`는 렌더링이 완료된 후 비동기적으로 실행됩니다. 즉, 화면이 사용자에게 실제로 표시된 이후에 실행됩니다.주요 특징비동기적 실행화면 표시 후 실행성능에 미치는 영향이 적음사용 사례useEffect(() => { // API 데이터 가져오기 fetchData().then(data => setData(data)); // 이벤트 리스너 등록 window.addEventListener('resize', handleResize); // 클린..

리액트에서 `index`를 key로 사용하는 것은 권장되지 않는 이유는 배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생할 수 있기 때문입니다.리액트에서 `key`를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제됐는지를 추적합니다. 그러나 index를 key로 사용하면 배열의 순서가 변경될 때 리액트가 요소들을 잘못 인식할 수 있습니다. 예를 들어 배열에 새로운 요소가 중간에 추가되면 그 뒤에 있는 요소들의 인덱스가 모두 변경되게 된다. 리액트는 이를 새로운 요소로 인식해 불필요하게 재렌더링을 하거나, 요소의 상태를 잘못 처리할 수 있습니다.// 초기 상태의 할일 목록const todos = [ { text: '운동하기' }, // index: 0 { text: '공부하..

`이벤트 전파`에는 DOM(Document Object Model)에서 이벤트가 발생했을 때, 그 이벤트가 어떠한 방식으로 전파되는지를 설명하는 개념입니다.이벤트 전파에는 크게 세 단계로 나눌 수 있습니다.캡처링(Capturing)타겟(Target)버블링(Bubbling) 클릭! 1. 캡처링(Capturing)`캡처링`은 이벤트가 DOM 트리의 최상위 요소(document 또는 window)에서 시작해, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계입니다. 즉, 부모에서 자식으로 아래로 내려가며 이벤트가 전파되는 단계를 `캡처링`이라고 합니다.// 캡처링 예시element.addEventListener('..

브라우저가 웹 페이지를 화면에 표시하기 위해 거치는 과정을 `브라우저 렌더링 파이프라인`이라고 합니다. 브라우저 렌더링 파이프라인은 5단계로 구성됩니다.DOM 생성CSSOM 생성렌더 트리 생성레이아웃페인팅컴포지팅1. DOM 생성브라우저가 HTML 파일을 받으면, 이 파일을 바이트(byte) 단위로 읽기 시작합니다. 브라우저의 HTML 파서(Parser)는 이 바이트들을 문자로 변환하고, 이 문자들을 HTML 토큰으로 변환합니다. 이 HTML 토큰들은 각각의 태그와 그 안에 포함된 텍스트, 속성 등을 의미하게 됩니다.HTML을 생성하게 되면, 브라우저는 이를 기반으로 `DOM 트리`를 생성합니다. DOM 트리는 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 태그가 노드(node)가 되어 `부모 -..

메모이제이션(Memoization)리액트를 성능 최적화하는 방법에는 대표적으로 `메모이제이션`을 말할 수 있습니다.리액트의 `memo`를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화 합니다. 특히, 렌더링 비용이 큰 컴포넌트에서 유용합니다.import React, { memo } from 'react';const MyExpensiveComponent = memo(({ data }) => { // 복잡한 연산이나 많은 DOM 조작이 필요한 컴포넌트 console.log('Expensive component rendered'); return ( {data.map(item => ( {it..