CSR (Client-Side Rendering)CSR은 브라우저가 HTML을 직접 만들고, 자바스크립트로 화면을 동적으로 구성하는 렌더링 방식입니다 초기 로딩 과정 (CSR 기준)브라우저가 서버에 요청하면 빈 HTML + JS 번들을 받습니다.이 JS번들을 완전히 다운로드, 파싱, 실행합니다.React컴포넌트가 실행되고, 화면이 만들어집니다.이후 페이지 렌더링 과정 (CSR에서 페이지 전환 등)이미로드된 JS가 클라이언트에서 동작하면서 화면을 다시 그려줍니다.React 가상 DOM을 사용해 변경된 부분만 찾아내어 실제 DOM에 최소한의 변경 적용변경된 DOM에 대해 CSS 스타일 재계산이 이루어집니다.변경된 DOM과 CSS 정보를 바탕으로 렌더 트리를 재구성리플로우(레이아웃 재계산)와 리페인트(화면 다..

https://github.com/acdlite/react-fiber-architecture 이 문서를 참고하였습니다.1. React Fiber란 무엇인가요?React Fiber는 React의 핵심 알고리즘(reconciler)을 완전히 새로 구현한 것입니다. 애니메이션, 레이아웃, 제스처와 같은 사용자 경험 중심 작업을 더 잘 처리하려고 설계되었습니다. 기존에는 어떤 문제가 있었던 걸까요?React 15까지는 재귀호출기반 동기 렌더링이였습니다. 즉 한번 렌더링이 시작되면 중단 없이 끝까지 실행되어야했습니다. 결과적으로 렌더링이 길어지면 에니메이션이 끊기고 사용자 입력이 무시되며 전체 앱이 멈춘듯한 느낌이 들었습니다. 그렇기때문에 React 팀은 다음과 같은 목표를 가지고 Fiber를 설계했습니다. Fi..

그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(React + TailwindCSS 기준으로 짜드릴게요.) "라이트모드, 다크모드 같은 토글뿐만 아니라 시스템 설정을 따라가게 할 수도 있는 거 알고 계신가요?" 전체 흐름은localStorage에 사용자가 선택한 테마가 있는지 확인 → 있으면 그걸 적용없으면 시스템 설정을 따라감 (matchMedia)사용자가 토글하면 localStorage 업데이트 "CSS 선택자를 사용해서 다크 테마를 적용합니다." "중요한 점은, 태그에 있는 dark 클래스를 동적으로 변경한다는 것입니다. (하위 소스코드 참고)" 그럼 "버튼을 눌러 다크모드를 토글하는 컴포넌트" 같이 한번 간단하게 구현해볼게요.(NextJs+ Tailwi..

브라우저 렌더링 이해하면 성능 최적화의 길이 보인다. 브라우저 렌더링 과정을 알면 웹 페이지 성능을 최적화하고, 디버깅을 쉽게 하며, 웹 애플리케이션의 사용자 경험을 개선하는 데 중요한 정보를 얻을 수 있습니다. 우선 간략하게 5가지로 나누어본후 상세로 설명하겠습니다.1. 성능 최적화렌더링 과정 최적화: 페이지가 어떻게 렌더링되는지 이해하면 페이지 로딩 속도를 빠르게 하거나, 불필요한 리소스를 줄이는 방법을 알 수 있습니다. 예를 들어, 이미지나 스크립트가 렌더링 성능에 미치는 영향을 파악하고, 이를 최적화할 수 있습니다.렌더링 차단 요소 분석: 자바스크립트나 CSS가 페이지 렌더링을 차단하는 방식에 대해 알면, 페이지 로딩을 더 빠르게 할 수 있는 방법(예: 비동기 로딩, CSS 최적화 등)을 찾을 수..

컴포넌트를 분리하던중 깨닳은것을 적고자한다import React from "react";import Pagenation from "../common/Pagenation";import SearchBox from "../common/SearchBox";import heart from "../../images/icon/heart.svg";import "./../css/ProductList.css";import { Link } from "react-router-dom";const Product = ({ productLists }) => { return ( {productLists?.map((data) => ( ..

싱글페이지 애플리케이션이란 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. 이를 이해하기위해선 싱글페이지 애플리케이션이란 개념이 생기기전에 사용되던 멀티 페이지 애플리케이션이 어떻게 작동하는지 살펴봐야한다. 멀티페이지 애플리케이션에서는 사용자가 다른페이지로 이동할때마다 새로운 html을 받아오고, 페이지를 로딩할때마다 서버에서 CSS,JS, 이미지 파일등의 리소스를 전달받아 브라우저의 화면에 보여주었다. 각페이지마다 다른 html 파일을 만들어서 제공을 하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용하기도했다. 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않..