웹 개발을 하다 보면 로그인, 인증, 사용자 정보 보호와 관련된 문제를 반드시 마주하게 된다. 기존에는 쿠키와 세션으로 상태를 관리했지만, 특히 SPA(Single Page Application)나 API 기반 서비스에서는 서버에 상태를 저장하지 않고도 안전하게 인증과 정보 교환을 처리할 필요가 있다. 바로 이때 등장하는 것이 JWT(Json Web Token)다.JWT를 이해하면 다음과 같은 장점을 활용할 수 있다:서버에 상태를 저장하지 않고도 사용자를 인증할 수 있다.클라이언트와 서버 간 정보를 안전하게 전달할 수 있다.SPA나 모바일 앱 등 비동기 통신 환경에서 편리하게 사용 가능하다.즉, 현대 웹과 앱 개발에서 JWT는 필수 기술이다. 1. JWT의 구조JWT는 헤더(Header), 페이로드(Pa..

웹 개발의 흐름은 곧 렌더링 방식의 역사라고 해도 과언이 아니다.오늘날의 React, Next.js, Vue, Nuxt.js 같은 프레임워크는 SPA, CSR, SSR, 그리고 Hybrid Rendering이라는 철학 위에 세워져 있다.이번 글에서는 이 네 가지 개념의 관계와 진화 과정을 한눈에 이해할 수 있도록 정리해본다. 1. SPA의 등장 배경초기의 웹은 정적 HTML 문서로 구성되어, 사용자가 페이지를 이동할 때마다 서버가 완성된 HTML을 새로 내려주는 방식(SSR) 을 사용했다. 이 방식은 단순했지만, 페이지 전환 시마다 전체 새로고침이 발생(리로드)하여 깜빡이는 현상이 있어 사용자 경험(UX)이 끊기고, 매번 서버로부터 전체 문서를 받아오므로 네트워크 낭비가 있어 대규모 애플리케이션 구성에 ..

웹 개발을 하다 보면 z-index를 설정했음에도 겹치는 요소의 순서가 예상과 다르게 나타나는 경우가 있다. 이런 현상의 핵심 원인은 CSS의 stacking context에 있다. 1. 부모 요소의 stacking contextz-index는 같은 stacking context 내에서만 비교된다.부모 요소에 position: relative|absolute|fixed|sticky 와 z-index가 설정되어 있으면 그 부모 안에서만 자식들의 z-index가 적용된다. 즉, 자식 요소들의 z-index가 같더라도 부모 stacking context가 다르면 부모 요소의 순서에 따라 겹침 순서가 달라질 수 있다. 부모의 z-index 가 더 높으면, 자식들의 z-index 도 같이 높아진다고 이해하면 된다..

React 를 이용한 웹 개발에서 성능 최적화와 관련해 가장 많이 언급되는 개념 중 하나가 바로 Virtual DOM이다. React를 비롯한 현대 프론트엔드 라이브러리는 이 개념을 활용해 효율적인 렌더링을 구현한다. 1. Virtual DOM이란?실제 DOM과 달리 Virtual DOM은 메모리 상에 존재하는 가벼운 자바스크립트 객체 사본으로, 상태(state)나 속성(props)이 바뀌면 실제 DOM을 직접 수정하지 않고 먼저 Virtual DOM을 갱신한다. 그 후 이전 Virtual DOM과 비교(diffing)하여 최소한의 변경만 실제 DOM에 반영하는 과정을 중재(또는 조정. Reconciliation)이라고 부른다. 2. Virtual DOM의 작동 원리1. 컴포넌트 상태 변경 → Virtu..

웹페이지를 개발하다 보면 DOM(Document Object Model)이 자주 등장한다. DOM은 단순히 HTML 문서를 보여주는 것이 아니라, 웹 문서를 프로그래밍적으로 접근하고 조작할 수 있는 트리 구조의 모델이다. 브라우저는 HTML과 CSS를 파싱해 DOM과 CSSOM을 생성하고, 이를 결합해 렌더 트리를 만들기 때문에 DOM을 이해하는 것은 웹 개발의 핵심이다. 1. DOM 이란?DOM은 웹 문서의 구조화된 표현을 제공하며, HTML이나 XML 문서의 모든 요소, 속성, 텍스트를 노드로 나타낸다. 트리 구조를 가지고 있어 각 요소는 부모와 자식 관계를 갖고, 개발자는 이를 통해 특정 노드에 접근하거나 조작할 수 있다.예를 들어 자바스크립트를 사용하면 페이지의 내용을 동적으로 변경할 수 있다.d..

브라우저는 단순히 HTML 파일을 보여주는 도구가 아니다.네트워크, 렌더링 엔진, 자바스크립트 엔진이 유기적으로 협력해 웹페이지를 보이는 형태로 만드는 복잡한 시스템이다. 1. 브라우저의 렌더링 프로세스웹페이지가 화면에 표시되기까지의 과정은 다음과 같다. 1. 리소스 요청과 응답브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 이 과정은 주소창에서 시작된다. 브라우저의 주소창에 URL을 입력하고 엔터를 누르면, URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 가진 서버로 요청이 전송된다.요청 전송 후 응답을 받아오기까지 네트워크에서 일어나는 일들 알아보기2. HTML, CSS 파싱과 렌더 트리(Rende..