Ch.Covelope

React Reconciliation - 리액트 리컨실리에이션(재조정)1. React Reconciliation 개념 및 동작 과정1.1. 정의Reconciliation은 리액트가 UI를 효율적으로 업데이트하는데 사용하는 핵심 과정으로, state/props가 변경될 때 새로운 Virtual DOM 트리를 생성하여 (실제 컴포넌트 인스턴스가 아닌 가상의 React Element 트리(Virtual DOM)) 이전 트리와 비교하여 변경된 부분만 DOM에 반영합니다.1.2. 주요 알고리즘 - DiffingReact는 O(n³) 복잡도의 완벽한 트리 비교 대신, 두 가지 가정을 기반으로 O(n) 휴리스틱 알고리즘을 사용합니다:가정 1: 다른 타입의 엘리먼트는 다른 트리를 생성한다가정 2: 개발자가 key pr..

1. 크리티컬 렌더링 패스 (Critical Rendering Path) 핵심 개념브라우저가 HTML, CSS, JavaScript를 받아서 화면에 픽셀을 그리기까지의 필수 단계들입니다. 이 경로가 짧고 빠를수록 초기 로딩 속도가 빨라집니다. 🎯 6단계 프로세스1. HTML 파싱 → DOM 생성브라우저가 HTML을 위에서 아래로 읽으면서 DOM 트리를 만듭니다 태그를 만나면 파싱이 멈춥니다 (파서 블로킹)이게 스크립트를 body 끝에 두는 이유입니다2. CSS 파싱 → CSSOM 생성CSS 파일을 파싱해서 CSSOM 트리를 만듭니다CSS는 렌더링 차단 리소스입니다 (CSSOM 완성 전까지 렌더링 안됨)화면에 아무것도 안 보이는 이유가 여기 있습니다3. DOM + CSSOM → 렌더 트리 생성실제로 화면..

JavaScript btoa(), atob(), 한글 인코딩 , 디코딩 - encodeURIComponent 활용법📌언제 필요할까?JavaScript에서 한글을 Base64로 인코딩하다가 오류를 만난 개발자btoa() 함수에서 "Failed to execute 'btoa'" 에러를 경험한 분한글 문자열을 안전하게 Base64로 변환하고 싶은 분encodeURIComponent의 정확한 동작 원리가 궁금한 분🚨 문제 상황: btoa() 한글 인코딩 오류JavaScript에서 한글 문자열을 Base64로 인코딩하려고 할 때, 다음과 같은 오류를 만나게 됩니다:// ❌ 오류 발생 코드const korean = "한글입니다";const encoded = btoa(korean); // Uncaught DO..

JavaScript 핵심 개념 이해하기 : 프로토타입, 실행 컨텍스트, this 바인딩 정리 2(철학적 관점 간단 정리) 자바스크립트 프로토타입이란?자바스크립트 프로토타입(JavaScript Prototype)은 객체 간 속성과 메서드를 공유하는 메커니즘입니다. Java나 C++의 클래스 기반 상속과 달리, JavaScript는 기존 객체를 참조하여 새로운 객체를 만드는 프로토타입 기반 상속을 사용합니다.프로토타입 체인의 핵심 개념프로토타입 체인은 객체가 다른 객체의 속성에 접근할 수 있게 해주는 연결 구조입니다. 이는 마치 가족 구성원들이 서로 다른 특징을 공유하는 것과 비슷합니다.클래스 기반 vs 프로토타입 기반 비교클래스 기반 모델의 특징클래스 기반 언어(Java, C++)는 다음과 같은 특징을 가..

트리 쉐이킹이란? 개발 모드와 프로덕션 모드 차이 “트리 쉐이킹(Tree Shaking)”은 더 이상 선택이 아닌 필수입니다. 사용하지 않는 코드를 제거해 번들 크기를 줄이고, 웹사이트 로딩 속도를 높이는 핵심 최적화 기법이죠. Vite는 최신 프론트엔드 개발 환경에서 가장 각광받는 빌드 도구로, 트리 쉐이킹을 어떻게 다루는지 제대로 이해하면 프로젝트 성능을 한 단계 업그레이드할 수 있습니다.트리 쉐이킹이란?트리 쉐이킹은 “나무를 흔들어 죽은 잎을 털어낸다”는 의미에서 유래한 용어입니다.자바스크립트 애플리케이션에서 실제로 사용되지 않는(Dead Code) 코드를 빌드 과정에서 제거해, 최종 번들 파일을 더 작고 빠르게 만들어줍니다.Vite 개발 모드 – 네이티브 ES 모듈, 번들링 없이 빠르게!1. 번들..

React의 실제 내부 구현으로 이해하는 useRefReact의 실제 내부 코드를 통해 useRef가 어떻게 동작하는지 설명해드리겠습니다. 많은 예시 대신 실제 구현부를 바탕으로 핵심 원리를 설명하겠습니다.React 소스 코드에서의 useRef 구현React 실제 구현 코드를 보면, useRef는 다음과 같이 구현되어 있습니다(약간 단순화했습니다):// React 패키지 내 ReactHooks.js 파일export function useRef(initialValue) { const dispatcher = resolveDispatcher(); return dispatcher.useRef(initialValue);}// ReactFiberHooks.js 파일 내 구현function mountRef(ini..

React의 useRef: 언제, 왜 사용하는가?React를 사용하다 보면 다양한 훅(Hook)들을 만나게 됩니다. 그중에서도 useRef는 종종 오해되거나 제대로 활용되지 못하는 훅 중 하나입니다. 이번 포스트에서는 useRef가 무엇인지, 언제 사용해야 하는지, 그리고 왜 사용하는지에 대해 자세히 알아보겠습니다.useRef란 무엇인가?useRef는 React 16.8에서 도입된 훅으로, 렌더링에 필요하지 않은 값을 참조할 수 있게 해주는 기능입니다. useRef가 반환하는 객체는 컴포넌트의 전체 생애주기 동안 유지되며, 이 객체의 .current 속성을 통해 저장된 값에 접근하거나 수정할 수 있습니다.import { useRef } from 'react';function MyComponent() { ..

소개CSS에서 길이 단위는 웹 디자인의 핵심 요소로, 요소의 크기, 간격, 여백 등을 정의하는 데 사용됩니다. 특히 px, em, rem은 가장 많이 사용되는 단위들로, 각각 고유한 특성과 용도를 가지고 있습니다. 이 글에서는 이 세 가지 단위의 개념, 차이점, 그리고 실제 활용 방법에 대해 알아보겠습니다.px (픽셀) - 절대 길이 단위정의px(픽셀)은 화면의 최소 표시 단위로, 절대 길이 단위입니다. 디스플레이 상의 하나의 점(dot)을 의미합니다.특징고정된 크기로 디바이스나 사용자 설정에 관계없이 일정한 크기를 유지정확한 디자인 구현이 가능사용자의 브라우저 설정(글꼴 크기 등)에 영향을 받지 않음반응형 디자인에는 제한적사용 예시/* px 단위 사용 예시 */.header { font-size: 2..

네트워크 통신에서 Header와 Body(Payload)의 차이목차네트워크 통신의 기본 구조Header(헤더)란?Body(페이로드)란?Header와 Body의 핵심 차이점실제 통신 예시로 이해하기자주 묻는 질문정리 및 요약네트워크 통신의 기본 구조네트워크 통신은 편지를 주고받는 것과 비슷합니다. 편지를 보낼 때는 다음과 같은 요소가 필요합니다:편지 봉투 - 받는 사람 주소, 보내는 사람 주소, 우표 등 정보 (= Header)편지 내용 - 실제로 전달하려는 메시지 (= Body/Payload)이처럼 네트워크 통신도 '누구에게, 어떻게 전달할지'에 대한 정보(Header)와 '실제 전달할 내용'(Body)으로 구분됩니다.Header(헤더)란?헤더의 정의와 역할**헤더(Header)**는 메시지에 대한 메타..

BPFDoor: 숨겨진 보안 위협목차BPFDoor란?왜 모든 리눅스 관리자가 알아야 하는가BPFDoor의 동작 원리위험성 평가감염 징후보호 전략자주 묻는 질문BPFDoor란?BPFDoor는 2022년 발견된 리눅스 시스템을 타겟으로 하는 극도로 은밀한 백도어 악성코드입니다. 이름에서 알 수 있듯이 리눅스 커널의 Berkeley Packet Filter(BPF) 기능을 악용하며, 보안 전문가들 사이에서 "유령 백도어"라고 불리기도 합니다.💡 핵심 포인트: BPFDoor는 취약점이 아닌 악성코드입니다. 이미 침투된 시스템에 설치되어 공격자에게 지속적인 접근 권한을 제공합니다.왜 모든 리눅스 관리자가 알아야 하는가BPFDoor가 일반적인 백도어와 다른 세 가지 핵심 특징:1. 탐지 어려움, 무포트 상태 대부..