Dachae's DevLogs

Intersection Observer Intersection Observer API는 DOM 요소가 다른 요소나 브라우저의 뷰포트와 교차하는지(Intersection)를 비동기적으로 관찰할 수 있는 웹 API입니다. 이 API를 사용하면 스크롤 이벤트를 직접 감지하지 않고도, 어떤 요소가 화면에 들어오거나 나갈 때를 효율적으로 감지할 수 있어 성능과 코드의 가독성 모두에서 이점을 제공합니다. 1. Intersection Observer란?웹 개발에서 특정 요소가 뷰포트(또는 다른 요소)와 교차되는 시점을 감지하고 싶을 때, 기존에는 scroll 이벤트와 getBoundingClientRect() 를 조합해서 구현하곤 했습니다. 하지만 이 방법은 성능에 큰 부담을 주고 복잡했습니다.이를 해결하기 위해 ..

크로스 브라우징(Cross-Browsing) 웹사이트는 다양한 사용자 환경에서 동일하게 동작해야 합니다. 하지만 브라우저마다 렌더링 방식과 지원하는 기능이 조금씩 다르기 때문에, 같은 코드라도 브라우저마다 레이아웃이 깨지거나 기능이 제대로 작동하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위한 전략이 바로 크로스 브라우징(Cross-Browsing)입니다.이 글에서는 크로스 브라우징의 개념부터, 주요 원인, 해결 방법까지 자세히 다룹니다. 1. 크로스 브라우징이란?크로스 브라우징(Cross-Browsing)은 웹사이트나 웹 애플리케이션이 다양한 브라우저 환경에서 일관된 동작과 UI를 보장하도록 개발하는 것을 의미합니다.대표적인 브라우저에는 다음과 같은 것들이 있습니다:Google ChromeMo..

브라우저 동작 원리 웹 브라우저의 주소창에 https://www.example.com과 같은 URL을 입력했을 때, 그 단순한 동작 뒤에는 수많은 복잡한 일이 일어납니다. 이 과정을 이해하면 HTTP, DNS, 브라우저 렌더링 등 핵심 웹 기술들의 동작 원리를 자연스럽게 익힐 수 있습니다. 이 글에서는 사용자가 주소창에 URL을 입력한 순간부터 웹사이트가 화면에 나타나기까지 어떤 일들이 발생하는지 단계별로 설명합니다. 1. URL 분석 및 구성 요소 분해먼저 브라우저는 사용자가 입력한 URL (Uniform Resource Locator) 을 분석합니다.예시 URL : https://www.example.com:443/path/index.html?search=query#sectionhttps – 프..

MutationObserver 현대 프론트엔드 프레임워크는 대부분 가상 DOM을 통해 효율적인 UI 업데이트를 제공합니다. 하지만 가상 DOM만으로는 감지할 수 없는 직접적인 DOM 변경도 존재합니다. 예를 들어,외부 라이브러리(jQuery, D3 등)가 DOM을 직접 조작할 때슬롯(slot)이나 iframe처럼 프레임워크 외부에서 변경이 일어날 때사용자 입력이나 비동기 처리로 DOM 구조가 바뀔 때이럴 때 사용할 수 있는 도구가 바로 MutationObserver입니다.이 글에서는 MutationObserver의 기본 개념부터 Vue, React에서 실전 적용하는 방법까지 자세히 다뤄보겠습니다. 1. MutationObserver란?MutationObserver는 브라우저가 제공하는 표준 Web AP..

검색 엔진 최적화 (SEO) SEO는 더 이상 마케터만의 영역이 아닙니다. SPA(싱글 페이지 애플리케이션), 정적 사이트, 서버 사이드 렌더링 등 다양한 기술이 사용되는 현대 웹에서는 개발자의 코드 설계가 SEO에 직접적인 영향을 미칩니다.이 글에서는 웹 개발자가 직접 고려하고 구현할 수 있는 기술 중심의 SEO 전략을 소개합니다. 1.  SEO란 무엇인가? SEO(Search Engine Optimization)는 검색엔진(주로 Google, Bing 등)이 웹사이트를 더 잘 이해하고, 검색 결과 상단에 노출되도록 만드는 모든 기술적·콘텐츠적 작업입니다. 2.  개발자가 알아야 할 SEO 핵심 영역a.  HTML 마크업 구조화 (Semantic HTML)검색엔진은 HTML을 통해 페이지 구조를 파악합..

localStorage, sessionStorage, Cookie 웹 페이지에서 데이터를 저장해야 할 때 localStorage, sessionStorage, cookie 중 무엇을 선택해야 할지 고민되시나요? 이 세 가지는 저장 위치는 같지만, 수명, 용량, 사용 목적이 다릅니다.이번 글에서는 각각의 차이점과 특징, 언제 어떤 걸 써야 하는지 실전 예제와 함께 정리합니다. 1.  localStorage, sessionStorage, Cookie 비교 항목 localStorage sessionStorage Cookie 저장 위치브라우저브라우저브라우저수명브라우저에 영구 저장 (명시적 삭제 전까지)브라우저 탭을 닫을 때까지만료 시간 설정 가능용량 제한약 5~10MB약 5~10MB약 4KB서버 전송❌ 전송..

CSR과 SSR 웹 애플리케이션을 개발할 때 CSR과 SSR이라는 용어를 자주 접하게 됩니다. 이는 각각 Client Side Rendering과 Server Side Rendering을 의미하며, 사용자에게 페이지를 보여주는 방식에 따른 중요한 차이를 나타냅니다. 이 글에서는 CSR과 SSR의 핵심 차이를 이해하고, 각 방식이 언제 적합한지에 대해 설명합니다. 1.  CSR(Client Side Rendering)과 SSR(Server Side Rendering)a.  CSR (Client Side Rendering)CSR은 브라우저(클라이언트)가 HTML, CSS, JS 파일을 받아와서 Javascript를 통해 페이지를 동적으로 구성하는 방식입니다.작동 방식브라우저가 최소한의 HTML 문서와 JS ..

브라우저 렌더링 과정 웹사이트에 접속하면 눈앞에 멋진 UI가 펼쳐지죠. 하지만 그 화면이 실제로 만들어지기까지는 수많은 과정이 숨어 있습니다. 브라우저는 HTML, CSS, JS 같은 리소스를 해석하고, DOM과 CSSOM을 만들고, 렌더 트리를 통해 화면에 그려줍니다.이 글에서는 브라우저가 어떻게 웹 페이지를 렌더링하는지, 전체 과정을 단계별로 정리하고, 성능 최적화 포인트도 함께 소개합니다. 1. 브라우저 렌더링 흐름 요약HTML 파싱(DOM 생성) → CSS 파싱(CSSOM 생성) → Render Tree 생성 → Layout → Paint → Compositinga. HTML 파싱 → DOM 트리 생성브라우저는 서버로부터 받은 HTML 문서를 파싱(parser) 하여 DOM(Document..