// Frontend2026년 8월 20일 · 5 min read
프론트엔드는 이미 온톨로지를 쓰고 있다
메타태그, 접근성, 상태 관리, GraphQL. 프론트엔드가 매일 쓰는 것들을 온톨로지 관점에서 다시 읽으면 '왜 이렇게 생겼는지'가 설명된다. 이 블로그의 실제 코드로 확인했다.
Category
Frontend
Frontend 개발 전반의 구현 기록을 정리합니다.
21개의 글
All Posts
21개// Frontend2026년 6월 17일 · 4 min read
택소노미에서 온톨로지로 — 블로그 정보 구조를 다시 보기
카테고리만으로는 글이 쌓일수록 한계가 온다. 카테고리·태그·관계 이름표를 3단계로 놓고, 이 블로그가 지금 어디까지 와 있고 다음이 무엇인지 정리했다.
// Frontend2026년 6월 5일 · 7 min read
브라우저에서 비밀값을 디코딩한다는 것 — base64, atob, TextDecoder, Web Crypto
쿠버네티스 Secret 뷰어를 만들며 마주친 질문 — 백엔드가 내려준 base64를 브라우저는 어떻게 푸는가, atob의 비트 재조립과 Latin-1 함정, 화면 마스킹이 보안이 아닌 이유, 그리고 진짜 암호화인 Web Crypto까지 정리했다.
// Frontend2026년 6월 5일 · 3 min read
Web Worker로 메인 스레드 비우기 — 멀티스레딩이 없는 줄 알았던 JavaScript
JavaScript는 싱글 스레드라 무거운 작업이 UI를 멈춘다. Web Worker로 별도 스레드에서 작업을 돌리는 법, postMessage 통신, 무엇을 옮길 수 있고 무엇은 못 하는지, 그리고 SharedWorker와의 차이를 정리했다.
// Frontend2026년 5월 17일 · 6 min read
Shared Worker — 여러 탭이 공유하는 워커
Dedicated Worker가 한 탭 전용이라면, Shared Worker는 같은 origin의 여러 탭이 같은 워커 인스턴스를 공유한다. 라이프사이클, MessagePort, onconnect, 디버깅, Safari 한계까지 정리했다.
// Frontend2026년 5월 16일 · 6 min read
HTTP polling과 long polling — 실시간을 흉내내는 가장 오래된 방법
서버에 새 데이터가 생기면 클라이언트가 곧바로 알게 만들고 싶을 때 가장 먼저 시도된 방법인 HTTP polling과 long polling을, 동작 방식·트레이드오프·지금도 쓰이는 자리 관점에서 정리했다.
// Frontend2026년 5월 16일 · 7 min read
Server-Sent Events — HTTP 위의 단방향 스트림
polling의 한계를 넘어 서버가 클라이언트에 이벤트를 흘려보내는 가장 단순한 방법인 SSE를, 포맷·EventSource API·자동 재연결·HTTP/2와의 궁합·한계 관점에서 정리했다.
// Frontend2026년 5월 2일 · 12 min read
브라우저 렌더링 파이프라인과 Chrome 동작 원리
HTML이 화면의 픽셀이 되기까지 브라우저가 거치는 DOM, CSSOM, Render Tree, Layout, Paint, Raster, Composite 단계를 Chrome의 프로세스와 스레드 구조에 연결해서 정리했다.
// Frontend2026년 4월 19일 · 3 min read
contain과 content-visibility — 브라우저가 렌더링을 건너뛰는 방법
CSS contain과 content-visibility 속성이 브라우저에게 렌더링 범위를 제한하는 힌트를 주어 성능을 높이는 원리와 실무 적용 방법을 정리했다.
// Frontend2026년 4월 19일 · 3 min read
Critical Rendering Path — HTML 파싱부터 화면에 픽셀이 찍히기까지
브라우저가 HTML을 받아서 화면에 그리기까지 일어나는 일들 — DOM, CSSOM, Render Tree, Layout, Paint, Composite 단계를 순서대로 정리했다.
// Frontend2026년 4월 19일 · 3 min read
<img> 최적화 — loading, decoding, srcset, sizes 실제로 어떻게 쓰나
이미지 최적화에서 자주 보이는 loading, decoding, srcset, sizes 속성이 실제로 무슨 역할을 하는지, 언제 쓰고 언제 안 써도 되는지 정리했다.
// Frontend2026년 4월 19일 · 3 min read
키보드 내비게이션과 포커스 관리 — tabIndex, focus-visible, aria 실무 패턴
마우스 없이도 동작하는 UI를 만들기 위해 알아야 할 tabIndex 규칙, 포커스 트랩, focus-visible, aria 속성 실무 패턴을 정리했다.
// Frontend2026년 4월 19일 · 3 min read
낙관적 업데이트 — Optimistic UI를 쓰는 이유와 롤백 패턴
서버 응답을 기다리지 않고 UI를 먼저 업데이트하는 Optimistic UI 패턴이 왜 좋고, 실패 시 어떻게 롤백하는지 React와 Next.js Server Actions 기준으로 정리했다.
// Frontend2026년 4월 19일 · 3 min read
Reflow vs Repaint — 어떤 CSS 속성이 비싼가
브라우저가 화면을 다시 그리는 두 가지 방식, Reflow와 Repaint의 차이와 각각을 유발하는 CSS 속성, 성능을 높이는 실무 패턴을 정리했다.
// Frontend2026년 4월 19일 · 3 min read
스크린 리더를 직접 써보고 알게 된 것들
VoiceOver와 NVDA를 직접 사용해보면서 개발자가 놓치기 쉬운 접근성 문제들을 정리했다. 코드로 보던 것과 실제로 들리는 것은 다르다.
// Frontend2026년 4월 19일 · 3 min read
Stacking Context — z-index가 왜 가끔 말을 안 듣는가
z-index를 높게 설정했는데도 요소가 가려지는 이유는 Stacking Context 때문이다. 어떤 CSS 속성이 새로운 Stacking Context를 만드는지, 어떻게 디버깅하는지 정리했다.
// Frontend2026년 4월 19일 · 4 min read
URL을 상태로 쓰는 패턴 — searchParams로 필터·페이지네이션 관리하기
필터, 정렬, 페이지네이션 같은 UI 상태를 useState 대신 URL searchParams에 저장하면 뭐가 좋은지, Next.js App Router 기준으로 구체적인 패턴을 정리했다.
// Frontend2026년 4월 19일 · 4 min read
Web Vitals — LCP·CLS·INP 측정하고 개선하기
Google이 정의한 Core Web Vitals 세 가지, LCP·CLS·INP가 각각 무엇을 측정하는지, 어떻게 확인하고 어디서 개선할 수 있는지 정리했다.