Web Storage API는 브라우저에 데이터를 키-값 쌍으로 저장하는 메커니즘을 제공한다. localStorage와 sessionStorage는 데이터의 지속성(Persistence)과 범위(Scope)에서 결정적인 차이가 있다. localStorage는 데이터가 브라우저를 닫아도 유지되며 동일 원리(Origin)의 모든 탭/윈도우에서 공유되는 반면, sessionStorage는 데이터가 세션(탭/윈도우)이 열려 있는 동안만 유효하며 각각의 세션마다 독립적으로 관리된다. 두 저장소 모두 용량은 약 5MB 수준이며 문자열 데이터만 저장이 가능하다.배경 및 문제웹 애플리케이션 개발 시 사용자 설정, 장바구니 정보, JWT 토큰 등 클라이언트 측에 데이터를 임시로 저장해야 하는 요구사항이 자주 발생함. 기..

프록시(Proxy) 서버는 클라이언트와 서버 사이에서 중계자 역할을 수행하는 서버다. 포워드 프록시(Forward Proxy)는 클라이언트 앞에 위치하여 클라이언트를 대신해 인터넷상의 서버에 요청을 보낸다. 반면, 리버스 프록시(Reverse Proxy)는 웹 서버 앞에 위치하여 클라이언트의 요청을 대신 받아 내부 서버로 전달한다. 핵심 차이는 '누구를 대리하는가'와 '네트워크 상의 위치'에 있다.배경클라이언트와 서버가 직접 통신하는 구조는 단순하지만, 보안, 성능, 확장성 측면에서 한계가 존재한다. 예를 들어, 클라이언트의 IP를 숨겨야 하거나, 단일 서버로 감당하기 힘든 트래픽을 분산시켜야 할 때 직접 통신 방식으로는 해결이 어렵다. 이러한 문제를 해결하기 위해 중간에 중계 서버를 두는 프록시 패턴이..

웹 콘텐츠가 사용자에게 도달하는 방식은 렌더링 시점과 주체에 따라 구분된다. CSR(Client-Side Rendering)은 브라우저가 자바스크립트로 DOM을 그리는 방식으로, 초기 로딩은 느리지만 이후 인터랙션이 빠르다. SSR(Server-Side Rendering)은 요청 시마다 서버가 완전한 HTML을 생성하여 SEO에 유리하나 서버 부하가 크다. SSG(Static Site Generation)는 빌드 시점에 모든 페이지를 미리 생성하여 가장 빠르지만 데이터 갱신이 어렵다. 이 SSG의 단점을 보완하기 위해 주기적으로 정적 페이지를 재생성하는 ISR(Incremental Static Regeneration) 방식이 등장했다.배경 및 문제과거 웹은 단순히 정적 문서를 제공하는 형태였으나, 웹 애..

브라우저 주소창에 www.google.com을 입력하면, 브라우저는 먼저 DNS 조회를 통해 해당 도메인의 IP 주소를 획득한다. 획득한 IP 주소의 서버와 TCP 연결(HTTPS의 경우 TLS 핸드셰이크 포함)을 수립한 후, HTTP 요청을 보낸다. 서버는 요청을 처리하여 HTML 문서를 응답으로 보내고, 브라우저는 이 문서를 파싱하고 렌더링하여 최종적으로 화면에 구글 페이지를 표시한다. 웹 브라우저의 주소창에 URL을 입력하고 엔터를 누르는 단순한 행위 이면에는 클라이언트(브라우저)와 서버 간의 복잡한 네트워크 통신 과정이 숨어 있다. 이 과정을 이해하는 것은 웹 애플리케이션의 동작 원리, 성능 최적화, 네트워크 트러블슈팅을 위한 필수적인 기초 지식이다. 전체 과정은 크게 5단계로 나눌 수 있다.1...

브라우저 렌더링 파이프라인(Critical Rendering Path, CRP)은 브라우저가 서버로부터 HTML, CSS, JavaScript 자원을 받아 실제 화면에 픽셀로 그려내기까지의 일련의 단계를 의미함. 주요 과정은 [1. 파싱 및 트리 구축(DOM/CSSOM)] → [2. 렌더 트리 구축] → [3. 레이아웃(리플로우)] → [4. 페인트] → [5. 합성] 순으로 진행됨. 웹 성능 최적화를 위해서는 이 각 단계에서 발생하는 병목 현상을 최소화하는 것이 핵심임. 사용자가 웹 사이트에 접속했을 때 브라우저는 서버로부터 텍스트로 이루어진 HTML, CSS, JS 파일 등을 응답 받는다. 이 코드들이 사용자 눈에 보이는 UI로 전환되기 위해서는 브라우저 내부 엔진(예: Blink, WebKit, G..

데이터베이스 인덱스(Index)는 테이블의 검색 속도를 향상시키기 위한 자료구조다. 책의 색인처럼 데이터를 빠르게 찾을 수 있도록 돕지만, 저장 공간을 추가로 사용하고 데이터 변경(INSERT, UPDATE, DELETE) 시 오버헤드가 발생하는 트레이드오프가 존재한다. 대부분의 RDBMS는 B-Tree(Balanced Tree) 기반의 인덱스 구조를 기본으로 사용한다. 데이터베이스 테이블에 데이터가 적을 때는 전체 테이블 스캔(Full Table Scan)으로 데이터를 찾아도 성능 문제가 없다. 그러나 데이터가 수백만 건 이상으로 늘어나면, 특정 데이터를 찾기 위해 모든 행을 검사하는 방식은 비효율적이며 심각한 성능 저하를 초래한다. 이러한 검색 성능 문제를 해결하기 위해 인덱스 도입이 필요하다.인덱스..

요약Reflow(Layout)는 요소의 크기와 위치 등 기하학적 정보(Geometry)를 계산하는 과정이며, Repaint(Paint)는 계산된 요소를 실제 픽셀로 그리는 과정이다. Reflow는 반드시 Repaint를 동반하므로 비용이 더 높다. 렌더링 성능 최적화를 위해서는 Reflow 발생을 최소화하고, 가능한 GPU 가속을 사용하는 Composite 단계만 수행하도록 유도해야 한다.배경브라우저가 화면을 그리는 중요 렌더링 경로(Critical Rendering Path) 과정 중, DOM이나 CSSOM이 변경될 때 렌더 트리를 다시 계산하고 화면을 갱신하는 단계에서 성능 저하가 발생한다. 매끄러운 사용자 경험(60FPS 유지)을 위해 불필요한 레이아웃 재계산을 방지하는 것이 필수적이다.Reflow..

CORS (Cross-Origin Resource Sharing)는 교차 출처 리소스 공유의 약자이다. 이름 그대로, 다른 출처(Origin)에 있는 자원(Resource) 즉, API 데이터를 공유할 수 있도록 허용하는 메커니즘이다. SOP (Same-Origin Policy) - CORS의 탄생 배경CORS를 이해하기 위해 웹 보안의 근간이 되는 동일 출처 정책 (SOP)을 알아야 한다.SOP의 원칙 : 웹 브라우저는 기복적으로 같은 출처에서 온 리소스만 접근하도록 허용한다.출처 (Origin) 구성 요소 : Protocol + Domain + Port예시 : http://app.com:8080과 http://app.com:8080은 동일 출처이다.https://app.com:8080은 프로토콜이 다..