Articles
개발 과정에서 겪은 기술적 경험과 인사이트를 정리합니다.
웹 캐싱 동작 원리 — HTTP 헤더, Service Worker, 캐시 파티셔닝
캐싱의 기본 개념부터 HTTP 캐시 헤더, 캐싱 전략 패턴, Service Worker 캐싱, 브라우저의 캐시 파티셔닝까지 정리합니다.
해시 테이블의 동작 원리 — JavaScript 객체와 Map은 데이터를 어떻게 찾을까
해시 테이블이 데이터를 O(1)로 찾는 원리를 처음부터 설명합니다. V8 엔진의 히든 클래스 최적화, 객체와 Map의 내부 차이, 그리고 실무에서의 올바른 선택 기준을 정리합니다.
식당 주방으로 이해하는 JavaScript 이벤트 루프
JavaScript 이벤트 루프의 동작 원리를 식당 주방 비유와 코드 예제로 쉽게 풀어봅니다. Call Stack, Web API, Task Queue, Microtask Queue의 관계와 실행 순서를 정리합니다.
ADR(Architecture Decision Records)로 기술 의사결정 기록하기
ADR이 무엇인지, 왜 필요한지, 그리고 실제 프로젝트에서 어떻게 활용했는지를 정리합니다.
Astro 컴포넌트에서 이벤트 핸들링이 addEventListener여야 하는 이유
React의 onClick에 익숙한 개발자가 Astro에서 마주하는 이벤트 핸들링 방식의 차이를, 렌더링 아키텍처와 실전 코드를 통해 설명합니다.
Claude Code Skills로 PR 워크플로우 자동화하기
Claude Code의 Skills(커스텀 슬래시 명령어)를 활용하여 PR 생성, 리뷰 분석, 답글 작성까지의 워크플로우를 자동화한 경험을 정리합니다.
Astro에서 script와 script is:inline의 차이
Astro의 두 가지 스크립트 선언 방식이 브라우저 렌더링 과정에서 어떻게 다르게 동작하는지, 그리고 View Transitions 환경에서 각각을 언제 사용해야 하는지 정리합니다.
Astro vs Next.js — 이미지 최적화는 어떻게 다를까
Astro의 빌드 타임 이미지 최적화와 Next.js의 런타임 이미지 최적화가 각각 어떻게 동작하는지 비교하고, 프로젝트 특성에 따른 선택 기준을 정리합니다.
Astro 다크모드에서 뒤로가기 시 라이트 테마가 깜빡이는 이슈 해결
Astro + View Transitions 환경에서 브라우저 뒤로가기 시 다크모드가 풀리며 라이트 테마가 순간적으로 노출되는 문제의 원인과 해결 방법을 정리합니다.
포케코리아 SEO 개선기 3편 — 기술 도감 URL 마이그레이션과 Context 전환
포켓몬 기술 도감 페이지의 버전 선택과 기술 유형 쿼리 파라미터를 Path 기반 URL로 전환하고, useSearchParams를 제거하여 Context 기반 데이터 흐름으로 개선한 과정을 정리합니다.
포케코리아 SEO 개선기 2편 — JSON-LD 구조화 데이터로 검색 노출 강화하기
퀴즈 페이지 5개의 BreadcrumbList 오류 수정, ItemList·HowTo JSON-LD 추가, 메타데이터 상수화, thin content 해소까지 12가지 SEO 개선을 체계적으로 적용한 과정을 정리합니다.
iOS 16에서 AVIF 이미지가 깨지는 문제 — 지원한다면서 왜 안 보이는 걸까
iOS 16.0~16.3의 Safari가 AVIF를 "지원한다"고 선언하면서 실제로는 렌더링에 실패하는 문제의 원인을 분석하고, picture 요소의 폴백이 왜 작동하지 않는지, 그리고 이를 해결한 과정을 정리합니다.
포케코리아 SEO 개선기 1편 — 쿼리 파라미터에서 Path URL로 전환하기
포켓몬 상세 페이지의 메가진화, 리전폼 URL을 쿼리 파라미터 방식에서 Path 기반으로 전환하고, Next.js App Router의 Route Groups와 Optional Catch-all을 활용하여 SEO를 개선한 과정을 정리합니다.
포케코리아 웹 성능 최적화 4편 — Lighthouse로 검증한 최적화 전후 비교
CSS 리팩토링, 폰트 서브셋팅, 이미지 최적화를 적용한 후 9개 페이지의 Lighthouse 측정 결과를 비교하고, 어떤 최적화가 어떤 지표에 영향을 미쳤는지 분석합니다.
포케코리아 웹 성능 최적화 3편 — srcset과 DPR로 이미지 대역폭 44% 절감하기
PageSpeed Insights의 "Properly size images" 경고를 해결하기 위해 srcset과 DPR 기반 반응형 이미지를 구현하고, fetchPriority 전략을 최적화하여 대역폭을 44% 절감한 과정을 정리합니다.
포케코리아 웹 성능 최적화 2편 — 한글 웹폰트 서브셋팅으로 126KB 줄이기
Gmarket Sans 웹폰트에 pyftsubset으로 서브셋팅을 적용하여 폰트 번들 726KB를 600KB로 줄이고, FCP와 LCP를 개선한 과정을 정리합니다.
포케코리아 웹 성능 최적화 1편 — Tailwind CSS 중복 500회를 @layer components로 정리하기
157개 파일에 걸쳐 500회 이상 반복되던 Tailwind CSS 클래스 조합을 @layer components로 추출하여 평균 70% 코드 감소를 달성한 리팩토링 과정을 정리합니다.
react-virtuoso를 활용한 리스트 렌더링 최적화
포켓몬 도감 프로젝트에서 카드 리스트의 불필요한 렌더링 문제를 react-virtuoso로 해결하고, 성능을 기존 대비 75% 단축한 과정을 정리합니다.