#browser
노트 65개
Frontend › CSS
CSS 점진적 향상: 폴백과 피처 쿼리새 CSS 기능을 지원하지 않는 브라우저를 '똑같이 보이게'가 아니라 '쓸 만하게' 지원하는 방식. 모르는 CSS는 무시된다는 규칙, 새 레이아웃이 옛 레이아웃을 덮어쓰는 규칙, @supports 피처 쿼리로 폴백을 정리하는 패턴, 브라우저 대신 컴포넌트에 매기는 지원 등급, 무거운 폴리필을 피하는 이유, 실제 브라우저 테스트까지.
Frontend › CSS
CSS Houdini: 렌더링 엔진에 끼어드는 API브라우저 CSS 엔진의 파싱·스타일·레이아웃·페인트·합성 단계에 개발자 코드를 걸 수 있게 하려는 저수준 API 묶음. CSS 폴리필이 왜 어려운지에서 출발해 워크릿, Properties and Values(@property), Typed OM, Paint·Layout·Animation Worklet의 역할과 2026년 기준 지원 상태를 정리한다. 모든 브라우저에 들어간 것은 @property와 일부 Typed OM뿐이다.
Frontend › CSS
CSS가 동작하는 방식: 핵심 개념과 픽셀이 되기까지속성 암기보다 먼저 익혀야 할 CSS의 핵심 개념(캐스케이드·상속·특정도, 박스 모델, 일반 흐름, 서식 맥락, 흐름 안팎, 정렬, 크기 결정)과, 브라우저가 CSS를 해석·캐스케이드·계산해 레이아웃으로 넘기는 과정.
Frontend › Graphics
Canvas 2D API<canvas>에 JavaScript로 픽셀을 그리는 즉시 모드 그래픽 API. SVG와의 차이(비트맵 vs DOM), getContext의 종류, 상태 스택과 Path2D, 고해상도 화면에서 흐려지지 않게 devicePixelRatio로 키우는 법, 레이어 분리·오프스크린 미리 그리기·정수 좌표·alpha: false 같은 성능 요령, OffscreenCanvas로 워커에서 그리기, 접근성 한계를 정리한다.
Frontend › Graphics
WebXR: 브라우저의 VR·AR브라우저에서 VR 헤드셋과 AR 기기에 3D 장면을 보여 주는 WebXR Device API. 세션 종류(inline·immersive-vr·immersive-ar), 기준 공간과 3DoF·6DoF, XR 전용 프레임 루프와 눈마다의 뷰, 입력 소스, AR 모듈(히트 테스트·앵커·DOM 오버레이)을 정리하고, 평면 화면·휴대폰 AR·헤드셋을 한 페이지로 지원하는 점진적 향상과 브라우저 지원 범위, 전신인 WebVR을 다룬다.
Frontend
JavaScript브라우저를 조작할 수 있는 유일한 언어이자, ECMAScript 표준을 따르는 동적 타입 언어.
Frontend › JavaScript
가비지 컬렉션과 메모리 누수JavaScript 엔진은 루트에서 참조를 따라 닿을 수 있는(reachable) 값만 남기고 나머지를 자동으로 회수한다. 루트와 도달 가능성, 서로 참조해도 닿을 수 없으면 지워지는 '섬', 기본 알고리즘 mark-and-sweep과 순환 참조에 약했던 참조 카운팅, 세대별·점진적·병렬·유휴 시간 수집 같은 최적화(V8의 스캐빈지·mark-compact·쓰기 장벽), 그리고 GC가 막지 못하는 누수 패턴(전역, 잊힌 타이머·리스너, 클로저, 떨어져 나간 DOM, 끝없는 캐시)과 WeakMap·WeakRef·FinalizationRegistry를 정리한다.
Frontend › JavaScript
마우스·포인터·키보드 이벤트사용자 입력 장치가 만드는 DOM 이벤트. 클릭 한 번이 만드는 mousedown·mouseup·click 순서, button과 보조키(Ctrl·Cmd), mouseover·mouseout과 mouseenter·mouseleave의 차이와 relatedTarget, 마우스·터치·펜을 한 코드로 받는 포인터 이벤트(pointerId·pointercancel·touch-action·포인터 캡처·포인터 락), HTML 드래그 앤 드롭 API와 직접 만드는 드래그, key와 code·자동 반복·IME 조합을 다루는 키보드 이벤트를 정리한다.
Frontend › JavaScript
바이너리 데이터와 파일: ArrayBuffer, Blob, FileJavaScript가 바이트를 다루는 층위를 정리한다. 메모리 덩어리 ArrayBuffer와 그것을 읽는 뷰(TypedArray·DataView), 문자열과 바이트를 잇는 TextEncoder·TextDecoder, 타입이 붙은 불변 바이너리 Blob과 그 하위 File, 그리고 Blob을 화면·다운로드·업로드에 쓰는 object URL·data URL·FileReader·Promise 메서드까지.
Frontend › JavaScript
브라우저에서 JavaScript가 동작하는 원리: 이벤트 루프싱글 스레드인 JavaScript가 렌더링과 나눠 쓰는 메인 스레드, 실행 컨텍스트가 쌓이는 콜 스택, Web API, 태스크·마이크로태스크 큐, 이벤트 루프의 협업으로 화면을 멈추지 않고 비동기 작업을 처리하는 방식. 태스크 하나 → 마이크로태스크 전부 → 렌더링 순서의 한 바퀴, queueMicrotask, 긴 작업 쪼개기·진행률 표시·이벤트 처리 뒤로 미루기, 무거운 일을 메인 스레드 밖으로 빼는 Web Worker.
Frontend › JavaScript
요소 크기·스크롤·좌표JavaScript로 요소와 창의 크기·스크롤·위치를 읽고 바꾸는 법. offset·client·scroll 계열 기하 속성이 각각 무엇을 재는지, CSS width 대신 기하 속성을 읽는 이유, 창 크기와 문서 높이, scrollTo·scrollIntoView와 스크롤 막기, 창 기준(clientX·getBoundingClientRect)과 문서 기준(pageX) 좌표, elementFromPoint를 정리한다.
Frontend › JavaScript
자바스크립트에서 타임존 다루기타임존은 오프셋이 아니라 한 지역의 표준시·서머타임 변경 이력 전체이고, 표준은 IANA tz database다. JS의 Date는 OS의 로컬 타임존에 묶여 있어 오프셋을 더하고 빼는 방식으로는 다른 타임존의 날짜 연산을 정확히 할 수 없다.
Frontend › JavaScript
책임감 있는 자바스크립트JS는 압축해도 파싱·실행 비용이 그대로 남아 저사양 기기에서 가장 비싼 자원이다. 웹 플랫폼(HTML·CSS)을 먼저 쓰고, 트리 셰이킹·코드 분할·최신 문법 빌드·작은 대체재로 줄이고, 서드파티 스크립트는 담당자를 두고 관리한다. 성능은 저사양 Android와 느린 4G, 표준 지원은 Baseline으로 기준을 잡는다.
Frontend › JavaScript
타이머: setTimeout과 setIntervalsetTimeout은 한 번, setInterval은 반복해서 콜백을 예약한다. 예약은 비동기라 다음 줄이 먼저 돈다. 반환된 ID를 저장해야 clearTimeout·clearInterval로 취소할 수 있고, 지연 시간은 최소 대기일 뿐이다. 즉시 시작하는 interval, 재귀 setTimeout, Promise로 감싼 sleep, 애니메이션용 requestAnimationFrame, React에서의 정리까지.
Frontend › JavaScript
페이지 생명주기와 리소스 로딩 이벤트문서가 열리고 닫히는 동안 일어나는 이벤트. DOMContentLoaded가 기다리는 것과 기다리지 않는 것, load와 readyState, 떠날 때의 beforeunload·pagehide·visibilitychange와 숨은 탭의 rAF 정지·타이머 제한, 피해야 할 unload, sendBeacon·keepalive로 마지막 데이터 보내기, 스크립트·이미지의 load·error 이벤트와 crossorigin 속성으로 다른 출처 스크립트의 오류 정보 얻기를 정리한다.
Frontend › JavaScript
DOM 이벤트: 전파, 위임, 커스텀 이벤트DOM 이벤트는 캡처 → 타깃 → 버블 순서로 트리를 오간다. 핸들러를 붙이는 세 방법(HTML 속성·on 속성·addEventListener)과 handleEvent 객체, target과 currentTarget의 차이, 전파·기본 동작 제어와 stopPropagation 대신 defaultPrevented로 알리기, 부모 하나로 자식 이벤트를 받는 이벤트 위임과 data 속성 행동 패턴, once·passive·signal 옵션, Event·CustomEvent 생성과 dispatchEvent의 동기 실행, 바깥 클릭 감지 패턴을 정리한다.
Frontend › JavaScript
DOM 조작JavaScript로 DOM 요소를 선택·탐색하고(live·static 컬렉션, 표 탐색 속성), 노드의 내용(innerHTML+=의 함정, outerHTML 대입, textContent)을 다루고, 속성(property)과 어트리뷰트(attribute)의 동기화 규칙, 클래스와 인라인 스타일·계산된 스타일을 읽고 쓰고, 요소를 만들어 원하는 위치에 넣고 지우는 방법. 문자열 HTML을 넣는 법과 위험, 리플로우를 줄이는 일괄 삽입까지 다룬다.
Frontend › JavaScript
JavaScript 애니메이션: requestAnimationFrame과 Web Animations APICSS로 부족한 애니메이션을 JavaScript로 만드는 두 방법. requestAnimationFrame 위에 duration·timing·draw로 나눈 범용 animate 함수를 짜고, 타이밍 함수(power·back·bounce·elastic)와 easeOut·easeInOut 변환을 직접 만든다. 브라우저 엔진을 그대로 쓰는 element.animate()는 재생 제어, finished 프로미스, commitStyles, 스크롤 타임라인을 준다.
Frontend › JavaScript
JavaScript 주석: 쓰는 법과 네 가지 문법무엇을 주석으로 쓰고 무엇을 코드로 말할지(무엇·어떻게 대신 왜, 함수 추출, JSDoc), 그리고 ECMAScript 명세에 정의된 주석 네 가지(//, /* */, #! 해시뱅, <!-- --> HTML 유사 주석)의 문법과 동작, 유래를 정리한다. 주석은 공백처럼 취급되지만 줄바꿈을 품은 여러 줄 주석은 줄바꿈으로 취급되고, 나머지 두 형식은 인터프리터 지정과 옛 브라우저 호환을 위해 생겼다.
Frontend › JavaScript
JavaScript는 인터프리터 언어일까, 컴파일 언어일까현대 JS 엔진(V8)은 파싱 → 바이트코드 실행 → 자주 쓰는 코드만 단계적으로 JIT 컴파일하는 혼합 방식이라 둘 중 하나로 딱 자르기 어렵다. V8의 Ignition·Sparkplug·Maglev·TurboFan 파이프라인과 TypeScript 컴파일러·Babel의 단계를 비교하고, 최적화가 기대는 히든 클래스·인라인 캐시·배열 요소 종류를 정리한다. JavaScriptCore·SpiderMonkey의 대응 단계와 OSR, 측정·명시적 코드·벤치마크의 한계 같은 최적화를 대하는 법, Full-codegen·Crankshaft에서 Ignition·TurboFan으로 바뀐 역사도 담았다.
Frontend › JavaScript
MutationObserverDOM 트리의 변화(자식 추가·삭제, 속성, 텍스트)를 지켜보다 모아서 알려 주는 MutationObserver. observe 옵션(childList·subtree·attributes·characterData·attributeFilter·oldValue), MutationRecord의 내용, 서드파티 스크립트가 넣는 DOM에 반응하기와 동적으로 들어온 콘텐츠를 한곳에서 처리하는 쓰임, takeRecords·disconnect, 마이크로태스크로 전달되는 특성과 무한 루프 주의, 폐기된 뮤테이션 이벤트를 정리한다.
Frontend › JavaScript
Selection과 Range문서의 일부를 가리키는 Range(시작·끝 경계점)와 사용자의 현재 선택을 나타내는 Selection(anchor·focus). Range를 만들고 내용 지우기·복제·감싸기, 선택 읽기와 바꾸기, selectionchange 이벤트, input·textarea 전용 선택 API(selectionStart·setSelectionRange·setRangeText)로 커서 위치 다루기, 선택 막기, DOM을 바꾸지 않고 칠하는 CSS Custom Highlight API를 정리한다.
Frontend › React
React에서 음성 녹음하고 파일로 보내기getUserMedia로 마이크 권한을 얻고 MediaRecorder로 녹음해 Blob을 만든 뒤, 다운로드 링크로 저장하거나 FormData(multipart/form-data)로 서버에 보내는 흐름. react-media-recorder로 간단히 쓰는 방법까지.
Frontend
Web브라우저가 문서를 해석하고 서버와 상태를 주고받는 웹의 기본 구조.
Frontend › Web
권한 모델과 기기 API브라우저가 기기 기능을 여는 방식. 보안 컨텍스트·Permissions-Policy·사용자 동작·권한 프롬프트를 묶어 보여 주는 Permissions API의 query()와 granted·denied·prompt 상태, 그리고 권한이 걸린 기기 API인 위치, 기기 방향·움직임(iOS의 requestPermission), 게임패드(폴링), 음성 합성·인식, 진동의 쓰임과 지원 범위를 정리한다.
Frontend › Web
리소스 힌트와 미리 불러오기: preconnect·preload·fetchpriority·Speculation Rules브라우저가 스스로 늦게 발견하는 자원을 앞당기는 힌트. 다른 출처 연결은 preconnect·dns-prefetch, 늦게 발견되는 중요한 자원은 preload, 우선순위는 fetchpriority로 조정한다. 다음 이동을 위해서는 prefetch, Speculation Rules의 prefetch·prerender, 서비스 워커 프리캐싱을 쓰되 확신이 있을 때만 쓴다.
Frontend › Web
미디어 캡처와 Web Audio API브라우저에서 카메라·마이크·화면을 받아 다루는 Media Capture and Streams(MediaStream·MediaStreamTrack의 소스와 소비자, getUserMedia·getDisplayMedia, enumerateDevices)와, 소리를 노드 그래프로 만들고 가공하는 Web Audio API(AudioContext, 소스·효과·분석·출력 노드, 정밀한 예약 재생, 자동 재생 정책과 resume, AudioWorklet)를 정리한다.
Frontend › Web
브라우저 기본 동작을 존중하기스크롤바·스크롤·선택 강조색·글자 크기·고대비·키보드 포커스·클립보드·방문 기록은 OS와 브라우저가 모든 앱에 같은 방식으로 제공하는 기능이다. 사이트가 이를 바꾸면 외부 일관성이 깨져 일부 사용자가 밀려난다. 덮어쓰지 말고, 필요하면 기본 위에 선택지를 더한다.
Frontend › Web
브라우저 렌더링 과정브라우저의 구성 요소와, HTML을 DOM으로·CSS를 CSSOM으로 파싱해 렌더 트리로 레이아웃(리플로우)·페인팅·합성을 거쳐 화면을 그리는 과정. HTML 파서의 특성, 스크립트·스타일 시트의 차단, 더티 비트와 강제 동기 레이아웃, 변경마다 다시 도는 단계까지.
Frontend › Web
브라우저 실시간 통신: 롱 폴링, SSE, WebSocket 클라이언트서버가 먼저 보내는 데이터를 브라우저에서 받는 세 가지 방법의 클라이언트 쪽 구현을 정리한다. 재요청 루프로 만드는 롱 폴링, HTTP 위의 텍스트 스트림인 SSE(EventSource의 메시지 형식·자동 재연결·Last-Event-ID와 fetch로 직접 읽는 방법), 그리고 WebSocket API의 바이너리·버퍼·종료 코드·재연결까지.
Frontend › Web
브라우저 아키텍처: 다중 프로세스, 내비게이션, 렌더러 스레드, 입력 처리Chrome을 예로 브라우저가 프로세스를 어떻게 나누는지(브라우저·렌더러·GPU·네트워크 등, 사이트 격리), 주소를 입력한 뒤 어느 프로세스가 무엇을 하며 페이지를 커밋하는지, 렌더러 안의 메인·컴포지터·래스터 스레드가 프레임을 만드는 방식, 입력 이벤트가 컴포지터를 거쳐 메인 스레드로 가는 길과 passive 리스너·이벤트 병합까지.
Frontend › Web
브라우저 지문 채취와 User-Agent 축소지문 채취는 UA·글꼴·화면·캔버스 렌더링처럼 오래 변하지 않는 특성을 모아 쿠키 없이 사용자를 식별한다. 수동·능동 방식과 엔트로피로 이해하고, 브라우저는 API 미구현·권한 요청·값 뭉개기·UA 동결로 대응한다. 사이트는 UA 스니핑을 기능 감지와 Client Hints로 바꾸고 넓은 환경에서 시험한다.
Frontend › Web
서드파티 쿠키와 브라우저 추적 방지사파리 ITP와 파이어폭스 Total Cookie Protection은 서드파티 쿠키를 막거나 사이트별로 분할하고, 크롬은 단계적 폐지를 철회해 일반 창에서는 사용자 설정에 맡긴 뒤 Privacy Sandbox API 대부분을 정리했다. 브라우저를 가리지 않고 동작하려면 임베드 상태는 CHIPS(Partitioned)로, 꼭 필요한 교차 사이트 접근은 Storage Access API로 처리한다.
Frontend › Web
서드파티와 프라이버시: 감사와 Referrer·Permissions 정책광고·임베드·분석·스크립트·패키지 같은 서드파티는 IP·Referer·쿠키를 받고, 스크립트는 페이지 전체 권한을 가진다. 기술·비기술 감사로 실제 요청을 파악하고, 정적 공유 링크·퍼사드·nocookie 임베드로 줄이며, Referrer-Policy·Permissions-Policy·CSP Report-Only로 범위를 묶는다.
Frontend › Web
서비스 워커 등록·스코프·생명주기와 업데이트서비스 워커는 페이지와 서버 사이에서 스코프 안의 요청을 가로채는 별도 스레드의 스크립트다. 등록 → 설치 → 활성화 순서로 생명주기를 밟고, 파일이 한 바이트라도 바뀌면 새 버전이 설치되지만 옛 버전이 모든 창에서 물러날 때까지 대기한다. skipWaiting·clients.claim의 위험, 메모리 상태가 사라지는 수명, 브라우저별 디버깅 도구를 정리한다.
Frontend › Web
성능 측정 API: Navigation·Resource·User Timing과 PerformanceObserver브라우저가 실제 사용자 환경에서 기록하는 성능 항목(performance entry)을 읽는 API들. 문서 요청은 Navigation Timing, 하위 자원은 Resource Timing, 앱이 직접 찍는 구간은 User Timing의 mark·measure로 재고, 모두 PerformanceObserver에 buffered로 구독해 모은다. 교차 출처 자원은 Timing-Allow-Origin 헤더가 있어야 세부 시간이 보인다.
Frontend › Web
웹 성능 지표와 LighthouseFCP·LCP·INP·CLS·TTFB 같은 웹 성능 지표의 뜻과 기준값, Core Web Vitals 세 지표가 무엇을 어떻게 재는지(LCP 후보 요소, INP의 세 구간, CLS의 세션 창), 실험실·필드 데이터와 web-vitals 라이브러리로 재는 법, Lighthouse를 정리했다. 지표별 개선법은 따로 나눈 최적화 노트로 연결한다.
Frontend › Web
웹 워커로 메인 스레드 비우기웹 워커는 JS를 메인 스레드가 아닌 별도 스레드에서 돌린다. DOM과 window에는 접근할 수 없고 postMessage로만 메인 스레드와 대화한다. 가져오기·파싱·대용량 계산처럼 DOM이 필요 없는 무거운 일을 옮기면 긴 작업이 줄어 INP가 좋아지고, 그 일에 쓰는 라이브러리의 다운로드·컴파일 비용도 함께 빠진다.
Frontend › Web
웹 표준은 어떻게 만들어지나: W3C·WHATWG·WICG웹 플랫폼의 표준은 W3C 권고안 트랙(WD → CR → REC), WHATWG의 리빙 스탠더드, WICG의 인큐베이션, TC39의 단계별 제안이라는 서로 다른 절차로 만들어진다. 권고안의 성숙 단계와 '독립적인 구현 둘' 같은 진입 조건, CSS가 레벨 단위 모듈로 쪼개진 이유, WHATWG가 HTML·DOM을 맡게 된 경위, 표준 상태와 브라우저 구현 상태를 확인하는 곳을 정리한다.
Frontend › Web
이전 페이지 URL 알아내기사용자가 어느 페이지에서 왔는지 알아내는 세 가지 방법(document.referrer, 직접 기록, 쿠키·sessionStorage)과 각각의 한계.
Frontend › Web
지연 로딩: 이미지·iframe·퍼사드화면 밖 이미지·iframe은 loading='lazy'로 미뤄 첫 화면 자원에 대역폭을 몰아 준다. 첫 화면 이미지와 LCP 후보에는 절대 쓰지 않는다. 무거운 서드파티 임베드는 가짜 UI(퍼사드)를 보여 주다 상호작용할 때 바꾸고, 네이티브로 미룰 수 없는 video·배경 이미지는 IntersectionObserver 기반 라이브러리로 미룬다.
Frontend › Web
창과 프레임: 팝업, iframe, postMessage다른 창(팝업)과 프레임(iframe)을 열고 서로 참조하는 법, 동일 출처 정책이 창 사이에서 허용하는 것과 막는 것, sandbox 속성, 출처가 달라도 안전하게 대화하는 postMessage와 같은 출처 탭끼리의 BroadcastChannel, 그리고 내 페이지가 남의 iframe에 갇혀 클릭을 빼앗기는 클릭재킹과 그 방어 헤더까지 정리한다.
Frontend › Web
쿠키와 세션상태가 없는 HTTP에서 브라우저와 서버가 사용자를 기억하기 위해 쓰는 쿠키와 세션.
Frontend › Web
클라이언트 사이드 라우팅: 해시, History API, Navigation APISPA가 새로고침 없이 화면을 바꾸면서도 페이지마다 고유한 URL과 뒤로 가기를 유지하는 방법. 링크·AJAX·해시(hashchange)·History API(pushState·popstate) 방식의 차이, 새로고침 때 서버가 해야 할 일(index.html 폴백, Accept 헤더로 HTML·JSON 나눠 응답), 모든 이동을 한 이벤트로 받는 Navigation API를 정리한다.
Frontend › Web
포커스 속성과 details·dialogHTML만으로 포커스를 다루는 속성(tabindex·contenteditable·autofocus·disabled·inert)과 JavaScript 없이 동작하는 두 인터랙티브 요소를 요소 사전처럼 정리한다. 포커스를 빼는 세 방법의 차이, <details>/<summary>의 open·name·마커·오류 처리, <dialog>의 show·showModal·close, method="dialog"와 returnValue, ::backdrop, 열고 닫을 때의 포커스, commandfor로 스크립트 없이 여는 법까지 다룬다.
Frontend › Web
프론트엔드 개발자가 알아야 할 지연 시간 숫자네트워크 왕복, 파싱, 프레임 예산, 사람의 체감 한계를 밀리초 단위로 정리한 표. 지연은 워터폴로 곱해지므로 요청 체인을 서버로 옮기고, JS를 줄이고, 사용자 가까이 배포한다.
Frontend › Web
DOM과 BOM브라우저가 HTML 문서를 파싱해 메모리에 올린 객체 트리와, 이를 다루는 API. window의 두 역할과 DOM·CSSOM·HTML 명세의 구분, 공백·주석까지 노드가 되는 규칙과 파서의 자동 교정, 노드 클래스 계층과 확인 방법, 문자열 HTML 대신 DOM이 필요해진 이유와 프레임워크 시대에 DOM API를 익히는 법도 다룬다.
Frontend › Web
IndexedDB브라우저에 내장된 출처별 트랜잭션 키-값 데이터베이스의 API. 버전으로 스키마를 바꾸는 upgradeneeded, 객체 저장소·키·인덱스·키 범위·커서로 저장하고 찾는 법, 자동 커밋되는 트랜잭션의 함정과 오류 처리, 다른 탭과의 버전 충돌, 그리고 네이티브 개념이 idb 래퍼에서 어떻게 보이는지 정리한다.
Frontend › Web
INP 최적화: 긴 작업 쪼개기와 양보INP는 입력 지연, 처리 시간, 표시 지연의 합이다. 필드 데이터로 느린 상호작용을 찾고, 시작할 때의 스크립트 평가를 줄여 입력 지연을, 핸들러를 가볍게 하고 메인 스레드에 양보해 처리 시간을, DOM 크기·content-visibility·클라이언트 HTML 렌더링을 손봐 표시 지연을 줄인다.
Frontend › Web
Intersection Observer와 관찰자 API스크롤 이벤트로 위치를 계산하는 대신, 요소가 화면(또는 스크롤 영역)에 얼마나 보이는지 브라우저가 알려 주는 IntersectionObserver. root·rootMargin·threshold 옵션, 무한 스크롤·지연 로딩·끝까지 읽음 감지 패턴, 크기 변화를 보는 ResizeObserver와 DOM 변화를 보는 MutationObserver를 정리한다.
Frontend › Web
LCP 최적화: 네 구간으로 나눠 줄이기LCP는 TTFB, 자원 로드 지연, 자원 로드 시간, 요소 렌더 지연의 합이다. 두 「지연」 구간은 0에 가깝게, 나머지 둘은 40%씩이 목표다. LCP 자원을 HTML에서 바로 발견되게 하고, fetchpriority로 앞당기고, 지연 로딩하지 않고, 작게 만들고, 막는 CSS·JS와 긴 작업을 걷어 낸다.
Frontend › Web
PWA 기능과 OS 통합PWA가 운영 체제와 이어지는 기능을 지원 범위별로 정리한다. 웹 푸시와 알림(iOS는 16.4부터 홈 화면 웹 앱에서만, 18.4부터 선언적 웹 푸시), 앱 배지, 공유하기와 공유 대상, 파일 시스템 접근과 파일 핸들러, 프로토콜 핸들러, 링크 캡처, 연락처 선택기, 하드웨어 API, 그리고 Project Fugu·오리진 트라이얼로 새 기능을 시험하는 법과 기능 감지·권한 요청 원칙을 다룬다.
Frontend › Web
PWA 설치와 설치 유도설치 기준은 브라우저마다 다르다. Chrome은 HTTPS, name·아이콘(192·512px)·start_url·display를 갖춘 매니페스트와 최소한의 사용자 참여를 본다. 데스크톱 Chromium·Android(WebAPK와 바로 가기)·iOS 홈 화면·macOS Safari의 Dock 추가·Firefox의 Windows 작업 표시줄 웹 앱까지 플랫폼별 설치 방식, beforeinstallprompt로 직접 띄우는 설치 버튼, display-mode로 실행 방식을 알아내는 법, 앱 스토어 배포를 정리한다.
Frontend › Web
PWA 오프라인 데이터와 저장소 관리URL로 요청하는 자산은 Cache Storage에, 검색·조합할 구조화 데이터는 IndexedDB에 둔다. 저장소 할당량은 출처 단위로 묶이고 StorageManager.estimate()로 확인한다. 브라우저는 압박이 생기거나 오래 쓰지 않으면 데이터를 지우므로 persist()로 영속 저장을 요청하고, 지워진 뒤에도 앱이 온라인에서 다시 뜨게 만든다. 데이터를 뒤에서 최신으로 유지하는 백그라운드 동기화 계열 API도 정리한다.
Frontend › Web
PWA와 서비스 워커 캐시 전략PWA는 HTTPS·웹 앱 매니페스트·서비스 워커 세 가지를 갖춘 웹사이트일 뿐이고, 사이트 종류와 상관없이 득이 된다. 서비스 워커로 캐시를 직접 다룰 수 있게 된 만큼, 필요한 것만 작게 요청하고 미디어를 중요도별로 나눠 캐시하고, 캐시 크기를 제한해 사용자의 데이터와 디스크를 아낀다.
Frontend › Web
Web Storage: localStorage와 sessionStorage브라우저에 키-값 문자열을 저장하는 localStorage·sessionStorage의 API, 객체를 JSON으로 직렬화해 저장하고 복원하는 법, 다른 탭과 동기화하는 storage 이벤트, 예외 처리와 보안상 넣지 말아야 할 것을 정리한다.
Frontend › Web
WebAssembly: 브라우저의 두 번째 언어C·C++·Rust 같은 언어를 컴파일해 브라우저에서 거의 네이티브 속도로 돌리는 바이트코드 형식 WebAssembly(Wasm)를 정리한다. JavaScript와 비교해 어디서 시간이 줄어드는지(받기·파싱·컴파일·재최적화·실행·GC), Module·Memory·Table·Instance라는 네 개념과 JS API, 툴체인, MVP 이후 Wasm 2.0·3.0에 들어간 기능, 브라우저 밖 실행(WASI)과 쓸 곳·안 쓸 곳까지.
Frontend
Electron: 웹 기술로 데스크톱 앱 만들기Electron은 Chromium과 Node.js를 한 앱에 묶어 HTML·CSS·JavaScript로 macOS·Windows·Linux 데스크톱 앱을 만든다. 앱 수명과 OS 기능을 맡는 메인 프로세스, 창마다 뜨는 렌더러 프로세스, 둘을 잇는 preload·contextBridge·IPC 구조와, 기본으로 켜진 컨텍스트 격리·샌드박스 같은 보안 기본값, 패키징과 릴리스 주기, OS 웹뷰를 쓰는 Tauri와의 차이를 정리한다.
Computer Science › Network
브라우저에 URL을 입력하면 일어나는 일주소창에 URL을 입력한 뒤 화면이 그려지기까지의 흐름. HSTS·서비스 워커·HTTP 캐시 확인, DNS 조회, TCP 연결, TLS 핸드셰이크, HTTP 요청·응답, 렌더링을 순서대로 잇고 각 단계의 상세 노트로 연결한다.
Computer Science › Network
HTTP 캐시Cache-Control, ETag·Last-Modified로 브라우저와 CDN이 응답을 재사용하는 HTTP 캐시. 신선도와 재검증, 자주 쓰는 지시어, 자산별 캐시 전략을 정리한다.
AI & Data
클라이언트 사이드 웹 AI: 내장 AI API, 라이브러리, 런타임브라우저에서 AI를 돌리는 방법은 브라우저가 들고 있는 모델을 부르는 내장 AI(Chrome의 Summarizer·Translator·Prompt API 등)와, Transformers.js·WebLLM 같은 라이브러리로 직접 고른 모델을 돌리는 방식 두 가지다. Chrome 내장 AI API의 현재 상태와 쓰는 법, 라이브러리별 쓰임, Wasm·WebGPU·WebNN 런타임을 정리한다.
Tools
Chrome DevToolsChrome에 내장된 웹 개발자 도구 모음. 여는 법, 할 일별로 어느 패널을 쓰는지, 명령 메뉴·단축키·설정, 검색·문제·변경사항 같은 보조 도구를 한곳에 모은 DevTools 노트 안내.
Tools › Chrome DevTools
DevTools Application 패널: 저장소·서비스 워커Application 패널은 매니페스트·서비스 워커·캐시 저장소(PWA), Local/Session Storage·IndexedDB·쿠키, 저장소 지우기, bfcache 테스트, 추측 규칙(prefetch·prerender) 디버깅, 프레임 보안 정보를 한곳에서 보고 고치는 곳이다. 무엇을 확인하려 할 때 어느 탭을 열고 무엇을 보는지 정리한다.
Tools › Chrome DevTools
DevTools Console 활용Chrome DevTools 콘솔로 메시지를 읽고 걸러 내는 법, console.table·group·time·assert·count·trace 같은 Console API와 %c 서식, 실시간 표현식, $0·$_·$()·$$()·copy()·monitorEvents·getEventListeners·queryObjects 같은 콘솔 전용 유틸리티, 페이지 위에서 JavaScript를 실행하는 법을 정리했다.
Tools › Chrome DevTools
DevTools로 JavaScript 디버깅하기Chrome DevTools Sources 패널로 JavaScript를 디버깅하는 법. 상황별 중단점(줄·조건부·로그포인트·DOM·XHR/fetch·이벤트 리스너·예외·debugger 문), 단계 실행과 Scope·Watch·Call Stack, 스니펫, 소스 맵과 무시 목록, 로컬 파일에 저장하는 Workspaces와 응답을 바꿔 끼우는 로컬 재정의, Recorder까지 정리했다.