TECH NOTES
기술노트
현장에서 검증된 개발 지식을 기록합니다.
747372717069686766656463
Frontend
scheduler.yield() — 긴 작업을 쪼개 INP를 살리는 법
긴 자바스크립트 작업을 scheduler.yield()로 잘게 쪼개 메인 스레드를 양보하고 INP를 개선하는 법. setTimeout·requestIdleCallback·Web Worker와 무엇이 다른지, 언제 써야 하는지 예제로 정리했다.
Frontend
content-visibility: auto — 긴 페이지 렌더링 비용을 줄이는 CSS 한 줄
화면 밖 요소의 렌더링을 통째로 건너뛰어 긴 페이지의 초기 렌더 비용을 줄이는 CSS 속성. contain-intrinsic-size 짝 사용법과 가상화와의 차이, 스크롤바가 튀는 함정과 해결책까지 실전 위주로 정리했다.
Frontend
Vue 3.6 Vapor Mode 완전 정리 — Virtual DOM 없이 0.7초 FCP 달성
Vue 3.6 Vapor Mode의 작동 원리, 성능 벤치마크, 사용 방법. Virtual DOM 없이 FCP 0.7초 달성
Infra
Nginx 캐싱 전략 — proxy_cache로 백엔드 부하 줄이기
Nginx의 proxy_cache 기능을 활용하여 백엔드 서버 부하를 줄이고 응답 속도를 높이는 캐싱 전략과 설정 방법을 실전 예제로 설명합니다.
Infra
Linux 디스크 I/O 성능 분석 — iostat fio blktrace
Linux 서버의 디스크 I/O 병목을 진단하기 위한 iostat, fio, blktrace 도구의 사용법과 성능 분석 방법을 실전 예제로 설명합니다.
Backend
Node.js 클러스터 모드와 PM2 프로덕션 최적화
Node.js 클러스터 모듈과 PM2를 활용하여 멀티코어 CPU를 최대한 활용하고 프로덕션 환경을 최적화하는 방법을 설명합니다.
Frontend
Next.js Image 최적화 심화 — blur placeholder와 CDN 전략
Next.js Image 컴포넌트의 blur placeholder 생성, 외부 이미지 CDN 연동, 반응형 이미지 전략을 심층적으로 살펴봅니다.
Database
데이터베이스 정규화와 비정규화 — 실전 판단 기준
데이터베이스 정규화의 각 단계별 목적과 실무에서 비정규화를 선택해야 하는 구체적인 상황 및 판단 기준을 정리합니다.
Database
Connection Pool 최적화 — HikariCP PgBouncer 설정 가이드
데이터베이스 Connection Pool의 동작 원리를 이해하고, HikariCP와 PgBouncer의 최적 설정을 워크로드에 맞게 튜닝하는 방법을 다룹니다.
Frontend
React 성능 프로파일링 — DevTools로 병목 찾기
React DevTools Profiler를 활용하여 불필요한 리렌더링과 성능 병목을 찾아내고, 실질적인 최적화를 적용하는 방법을 다룹니다.
Database
데이터베이스 인덱스 내부 구조 — B-Tree와 LSM-Tree 비교
데이터베이스 인덱스의 핵심 자료구조인 B-Tree와 LSM-Tree의 내부 동작 원리, 성능 특성, 적합한 사용 사례를 비교합니다.
Backend
Node.js 메모리 누수 탐지와 해결 — Heap Snapshot 분석
Node.js 애플리케이션의 메모리 누수를 Heap Snapshot, --inspect, 프로파일링 도구로 탐지하고 해결하는 체계적인 방법을 실전 사례와 함께 소개합니다.