전체 글
279개의 글 · 8개 연도
2026
68- 앱 웹뷰의 핵심 웹 지표를 공용 관측 인프라로 보내기
- 페이지를 떠나는 순간 핵심 웹 지표를 보내기
- web-vitals는 언제 핵심 웹 지표를 보고하는가
- SWE-bench로 코딩 에이전트의 모델을 비교하는 방법
- 번들러는 import를 어떻게 기억하는가
- number-flow 성능 개선기: 애니메이션을 합성 스레드로 옮기기
- Next.js 앱의 Marp 슬라이드를 오프라인에 저장하기
- Rails가 왜 좋았는지는, 만든 사람이 내려놓고 나서야 보였다
- 떠난 페이지는 죽지 않고 숨는다: Next.js cacheComponents와 React Activity
- 소스맵 없이 토스증권의 JavaScript 추적해보기
- V8 커버리지와 소스맵으로 번들 분석기 만들기
- 블로그의 JavaScript가 언제 실행되는지 추적해보기수정
- 실행하지 않는 JavaScript를 10MiB까지 늘려봤다
- 블로그를 고친 뒤 첫 화면을 다시 재봤다수정
- 블로그의 마크다운 파이프라인을 Rust/WASM으로 옮기기수정
- Tailwind를 StyleX로 옮기며 다시 따져본 성능수정
- 『npm Deep Dive』가 2026년 세종도서 학술부문에 선정되었습니다수정
- 『남은 판단은 누가 배우는가』 베타리더 모집이 마감되었습니다수정
- 여러 웹뷰에서 하나의 웹 운영하기: 환경 분기를 어댑터로 모은 과정수정
- 드롭인 호환의 진짜 비용: markdownlint-cli2를 Rust로 옮기며 버린 것들
- 외부 SDK를 뜯어서 내 맘대로 다시 만들기: 단, 로직은 한 줄도 건드리지 않고
- 서비스 워커 경유 비용 실측: GA4가 답하지 못한 대조군을 랩에서 만들기수정
- 서비스 워커 캐싱 적용기: App Router의 함정들과 GA4 실측수정
- OG 스크래핑 서버를 Node.js로 짓는다면 (2): SSRF는 어떻게 뚫리는가수정
- OG 스크래핑 서버를 Node.js로 짓는다면 (1): 런타임 선택부터 에러율과 지연까지수정
- Next.js turbopack에서 싱글톤이 두 개가 됐다: scope hoisting 버그와 순환 import
- framer-motion 배너에서 프레임드랍 없애기: 두 번의 삽질과 이징 함수수정
- 서비스 워커 캐싱의 동작 원리: 프록시, 라이프사이클, 다섯 가지 전략수정
- number-flow를 구형 브라우저로 이식하기: 다섯 가지 결정과 두 가지 번복수정
- typescript@7을 설치하면 벌어지는 일들: 블로그 모노레포 마이그레이션 기록
- 책을 쓰고 있습니다: 『남은 판단은 누가 배우는가』 인터뷰와 베타리더 모집이 마감되었습니다수정
- 오토스케일링은 자동이지만 즉시가 아니다: HPA의 시간을 구간별로 실측한 기록수정
- 파드는 어떻게 종료되는가: 배포 중 에러의 원인과 해결을 실측한 기록수정
- 트래픽은 어떻게 내 파드에 도착하는가: ClusterIP부터 port-forward까지수정
- 내 Next.js 앱은 어떻게 파드가 되는가: 컨테이너와 파드를 직접 열어본 기록수정
- 프론트엔드 개발자를 위한 쿠버네티스 개념 지도: 파드에서 오토스케일러까지수정
- Node.js 파드는 왜 그 크기인가: NODE_OPTIONS부터 파드 수까지 직접 재본 사이징수정
- 『프런트엔드 성능 최적화 Deep Dive』가 출간되었습니다.
- 프론트엔드는 어디서 왔고, 에이전트 이후 어디로 가는가수정
- 마지막으로 코드를 진지하게 읽은 게 언제인가수정
- 코드를 읽거나 설명할 줄 몰라도, 스펙을 만족하고 버그를 고칠 수 있다면 상관없을까수정
- AI가 기획과 개발, 디자인의 경계를 지운다면, 무엇이 남는가수정
- React cache() 딥다이브: 소스 코드로 읽는 요청 단위 메모이제이션수정
- TanStack npm 공급망 공격 분석: pull_request_target은 왜 위험한가수정
- Bun rewrite가 폭로한 것: OSS는 외부 AI만 막을 수 있었다수정
- 오래 쓸 수 있는 패키지는 무엇이 다른가
- PR diff에서는 보이지 않는 비용: 우리는 사용자가 받는 코드를 리뷰하고 있지 않다
- 'use cache' 디렉티브 딥다이브: 캐시 경계의 끝까지수정
- 'use client' 디렉티브 딥다이브: 클라이언트 경계의 끝까지
- AI는 내가 보이는 수준까지만 나를 증폭한다수정
- 왜 여전히 Next.js를 쓰는가수정
- Next.js의 성능은 충분히 빠른가수정
- React는 누구의 것인가
- Cloudflare가 Next.js를 다시 만든 이유
- Next.js Edge Runtime의 흥망성쇠
- React 서버 함수 딥다이브: "use server"의 끝까지수정
- React의 <ViewTransition>: 브라우저 네이티브 애니메이션을 React답게
- Node.js vm 모듈의 함정: 샌드박스가 아닌 이유
- Infinite Scroll의 몰락 — Google은 왜 무한 스크롤을 걷어냈는가수정
- Effect 시스템 심층 분석: 모나드에서 Algebraic Effects까지, 그리고 Effect-TS의 선택
- Node.js Deep Dive (가제) 베타 리더를 모십니다.수정
- React Compiler 딥다이브: 원리부터 결과물까지
- AI가 코드를 짜는 시대, 프론트엔드 엔지니어링은 어디로 가는가
- 코딩 에이전트 핵심 개념 완전 가이드수정
- IntersectionObserver 싱글톤 패턴과 WeakMap으로 메모리 누수 방지하기
- TypeScript에서 switch문의 모든 케이스를 빠짐없이 처리했는지 검사하는 방법
- 거대한 JSON 응답을 효율적으로 처리하는 방법수정
- React의 "서버로 회귀"는 역사의 반복인가?
2025
28- WebGPU, 드디어 모든 브라우저에서 사용 가능해지다
- Next.js 캐싱 가이드수정
- React의 새로운 lint 규칙: set-state-in-effect
- useEvent에서 useEffectEvent까지: React의 이벤트 핸들러 안정화 여정
- React 취약점인데 왜 Next.js를 업그레이드해야 하지?수정
- React 19: ref를 prop으로 사용하기
- 블로그 정상영업합니다
- 문자열 리터럴 유니온에 string을 추가하면 자동완성이 사라지는 이유
- web performance deep dive (가제) 베타 리더를 모십니다. (마감)수정
- npm Deep Dive 온라인 저자 특강
- 웹 서비스 성능 분석 (4)
- 웹 서비스 성능 분석 (3)
- Nextjs app router의 Rendered more hooks than during the previous render 버그 패치 후기수정
- 『npm Deep Dive』 스터디원 모집중입니다!
- [네이버페이] 채용 연계형 FE 개발 인턴십
- AI 시대에 나는 왜 책을 썼을까
- 『npm Deep Dive』 가 출간되었습니다.수정
- "AI가 다 해주잖아?"라는 환상: FE의 본질과 AI 시대의 현실
- 프론트엔드 개발 환경의 변화와 과제: AI 도입과 리더십
- AI 시대 "프론트엔드, 정말 중요할까?" 라는 질문에 답합니다. (성능, AI, UI/UX, 그리고 미래)
- 프론트엔드 개발자, 3년차의 벽을 넘어: 성장의 악순환을 끊고 목표와 성취감을 찾는 법
- AI가 코드를 작성해 주는 시대, 프론트엔드 개발자인 나는 무엇을 해야 할까?수정
- 웹 서비스 성능 분석 (2)수정
- 웹 서비스 성능 분석 (1)수정
- 웹사이트 성능에 고민이 있는 서비스를 찾습니다.수정
- https://research.yceffort.kr/ 를 오픈했습니다수정
- 맵과 객체 중 무엇을 언제 쓰는 것이 좋을까?수정
- 리액트 인터뷰 가이드 번역본이 출간되었습니다.수정
2023
62022
35- 나만의 eslint 룰 만들어보기
- JSON.stringify 만들어보기수정
- 브라우저의 프리로드 스캐너(pre-load scanner)와 파싱 동작의 이해수정
- Largest Contentful Paint (LCP) 최적화하기수정
- npm, yarn, pnpm 비교해보기수정
- 타입스크립트 컴파일러는 어떻게 동작하는가?수정
- 리액트의 새로운 훅, useEvent수정
- 알아두면 유용한 타입스크립트 팁수정
- 크롬 메모리 프로파일러 사용하는 방법수정
- V8에서 관리되는 자바스크립트 변수수정
- 참조 동일성을 위한 메모이제이션수정
- 리액트의 useCallback useMemo, 정확하게 사용하고 있을까
- [블로그] PWA 임시 중지
- 리액트의 렌더링은 어떻게 일어나는가?수정
- Rust로 web assembly로 game of life 만들어보기 (2)
- 리액트 v18 버전 톺아보기수정
- 내가 타입스크립트에서 Enum을 잘 쓰지 않는 이유
- React.FC를 사용하지 않는 이유
- 리액트 훅을 사용할 때 조심해야 할 것
- Rust로 web assembly로 game of life 만들어보기 (1)수정
- 타입스크립트의 Omit은 어떻게 동작할까? Exclude, Pick 부터 알아보기수정
- 타입스크립트의 함수의 다형성수정
- 타입스크립트 타입 never 에 대해 자세히 알아보자수정
- Rust로 web assembly 만들어보기 (3) - Rust로 다양한 Web Assembly 만들어보기
- Rust로 web assembly 만들어보기 (2) - Rust로 간단한 Web Assembly 만들기
- Rust로 web assembly 만들어보기 (1) - Web Assembly란 무엇인가?수정
- [Rust] 자바스크립트에서 러스트로 (1) - rustup, hello world, 그리고 소유권과 빌림수정
- 자바스크립트 3항연산자에 대한 고찰수정
- Remix nextjs와 비교하면서 살펴보기수정
- Dockerfile 작성 가이드수정
- 더 나은 Dockerfile 작성을 위한 best practice - 2022년 버전수정
- 리액트 서버 컴포넌트의 동작 방식수정
- 웹 애플리케이션에서 자바스크립트 프로파일링 해보기수정
- colors.js와 faker.js 사태가 준 교훈
- 2021년 회고수정
2021
67- nextjs를 적용하면서 알게 된 사실들수정
- Node.js의 메모리 제한과 누수 추적 가이드수정
- node_modules도 git에서도 관리하면 어떨까?
- HTML 문서에서 DOM으로의 여정수정
- 서버에서 클라이언트로의 여정 - 브라우저와 서버는 어떻게 데이터를 주고 받을까수정
- Array vs ArrayLike, Promise vs PromiseLike
- nextjs 서버사이드에서 absolute url 가져오기수정
- 클라이언트 서버 모두에서 nextjs에서 api에러 핸들링하기수정
- nodejs의 버퍼 이해하기수정
- 좋은 자바스크립트 테스트 코드를 짜는 방법수정
- package.json에 쌓여있는 개발 부채수정
- HTML은 프로그래밍 언어인가? 라는 논쟁보다 중요한 것수정
- 프론트엔드 프로젝트를 위한 github CI workflow수정
- 리액트 18에서 변경될 새로운 SSR 아키텍쳐
- Critical Request - request 순서는 웹사이트 속도에 어떤 영향을 미치는가
- 웹 개발자가 본 사파리 15의 변화와 대응수정
- 자바스크립트에서의 정규식, 이론부터 조심해야 할 것 까지수정
- 자바스크립트에서 안전하게 난수 생성하는 방법수정
- Nodejs의 이벤트 루프 살펴보기수정
- 트리쉐이킹으로 자바스크립트 사이즈 줄이기
- uncaught async error를 올바르게 처리하기수정
- requestIdleCallback으로 최적화하기수정
- 비동기 리소스 (async resources)와 비동기 훅 (async hooks) 이해하기수정
- 브라우저와 Nodejs의 이벤트 루프는 무엇이 다를까수정
- 웹 페이지에서의 자바스크립트 메모리 사용량 벤치마킹수정
- 웹사이트의 성능지표, Core Web Vital수정
- promise.then(f, f) vs promise.then(f).catch(f) 는 무엇이 다를까?
- Export에 숨겨져 있는 심오함수정
- Nodejs 프로세스를 종료시키는 방법수정
- npm workspace와 esbuild로 monorepo 구축해보기수정
- Nodejs 모듈 (CommonJS, ECMAScript) 과 패키지, 그리고 Semver수정
- 왜 Nodejs ORM을 쓰지 말아야 할까수정
- 웹 폰트 로딩을 더 빠르게 하는 방법수정
- reduce에 spread 를 쓰면 안되는 이유수정
- Nextjs 11 릴리즈 노트 살펴보고 블로그에 적용하기수정
- ESModule을 동적으로 import 하기
- for vs for-in vs forEach vs for-of 무엇으로 자바스크립트 리스트를 돌아야 하나
- Nodejs에서 올바르게 에러 처리하기수정
- Typescript, 객체의 키와 값 타이핑하기
- 타입스크립트에서 조심해야할 습관
- Vercel에서 배포가 안됐던 이야기
- JWT의 단점과 주의사항
- HTTP1 vs HTTP2수정
- 자바스크립트 개발자를 위한 AST 이해하기 (2026년 업데이트)수정
- 디렉토리에 있는 모든 이미지 최적화 하기
- nodejs의 멀티쓰레딩과 worker threads수정
- github workflow로 lighthouse ci 추가하기수정
- CSS 성능 향상 시키기수정
- 타입스크립트 성능을 위한 팁
- 타입스크립트 type과 interface의 공통점과 차이점수정
- 리액트 서버사이드 렌더링과 컴포넌트수정
- 애플 단축어와 GCP로 내 건강정보 업로드하기수정
- 자바스크립트의 프록시
- 자바스크립트의 제네레이터와 regeneratorRuntime
- HTML과 CSS를 활용해서 콘텐츠를 숨기는 10가지 방법수정
- 자바스크립트 성능과 번들 사이즈수정
- Nodejs에서 로깅하기
- useEffect와 메모리 누수
- no return, await, return, await return 의 차이수정
- null과 undefined의 차이, 그리고 역사
- CSS와 웹페이지 성능과의 관계수정
- Nextjs에서 Server Side props를 새로고침하기
- GitHub Actions cron이 제시간에 실행되지 않는 이유와 대안수정
- overflow: auto vs overflow: scroll 왜 윈도우에서만 쓸모없는 스크롤바가 노출될까수정
- 그런데 왜 brotli를 사용하지 않는 것일까? 🤔수정
- 개발자가 알아야 하는 4가지 nodejs 디자인 패턴
- 더 나은 압축 알고리즘, Brotli수정
2020
57- 파티셔닝 캐시 (partitioning cache)
- 2020년 사이드 프로젝트 회고수정
- 서버리스로 블로그 포스트 썸네일 생성하기
- 자바스크립트 함수의 성능 측정하기
- 왜 moment 는 deprecated 되었을까
- 자바스크립트의 가비지 컬렉션수정
- V8 엔진에 대해 가볍게 살펴보기수정
- 뒤로가기, 앞으로가기의 캐시 aka bfcache
- PWA 적용 후기 및 장단점수정
- 자바스크립트 의존성 지옥
- Nodejs 성능 최적화를 위한 방법수정
- V8에서의 메모리 관리수정
- 서버 사이드 이벤트 (Server Side Events, SSE)
- eslint, prettier, editorconfig 로 코드 컨벤션을 맞춘 후기수정
- export default를 쓰지 말아야 할 이유수정
- 브라우저 탭 사이에서 통신 하는 방법
- JSX에서 && 대신에 3항 연산자를 더 선호하는 이유수정
- 자바스크립트 함수를 선언하는 여섯가지 방법
- (함수형으로) 자바스크립트로 HTML 버튼 중복 클릭 방지하기수정
- EventEmitter 구현해보기
- HTTP Cache로 불필요한 네트워크 요청 줄이기
- 왜 Async 보다는 Defer를 써야할까수정
- 리액트의 useState와 lazy initialization
- 블로그 gatsby에서 nextjs로 옮긴 이야기수정
- Create React App의 serviceWorker는 무엇일까
- styled-components로 스타일 적용하는법수정
- Node.js는 어떻게 동작하는가수정
- useEffect는 라이프 사이클 메소드가 아니다.수정
- detached window로 인한 자바스크립트 메모리 누수수정
- 자바스크립트로 다음 사전 크롤링해보기
- 재밌는 자바스크립트 면접 문제수정
- Referer와 Referer-Policy를 위한 가이드수정
- 리액트 v17.0 살펴보기수정
- Typescript 4.0 릴리즈 노트 수정
- Webpack Module Federation에 대해 알아보자수정
- typescript의 enum은 tree shaking이 되지 않는다?
- Git Cheat Sheet
- CommonJS와 ES Modules은 왜 함께 할 수 없는가?수정
- Github actions 요약수정
- Webpack을 활용한 성능향상 - 캐싱 활용하기수정
- Github 액션으로 스케쥴링 작업하기
- 자바스크립트 메모리 누수와 해결 방법수정
- 자바스크립트의 비용
- 주요 렌더링 경로 - 브라우저의 원리를 이해하고 최적화 하기
- 왜 CommonJS는 번들사이즈를 크게 하는가?수정
- 프론트엔드 개발자가 알아야 하는 Angular와 React의 Change Detection수정
- 자바스크립트 자료 구조
- Javascript Execution Context
- Nodejs에서의 암/복호화
- 자바스크립트 스킬을 향상 시킬 10개의 질문
- 자바스크립트 제네레이터수정
- var let const, 그리고 호이스팅
- javascript 일반 함수와 화살표 함수의 차이
- 자바스크립트의 private
- 자바스크립트에서 http 요청하기 - fetch에 대한 고찰
- React count down에서 배운 event-emitter 와 requestAnimationFrame
- Chrome Samesite 쿠키 정책수정
2019
15- 블로그 개편했습니다. 😎
- 자바스크립트의 이벤트루프, 태스크, 그리고 마이크로 태스크
- 2020년 목표
- 리액트 텍스트 하이라이트 만들기수정
- typescript debounce
- 브라우저 히스토리 조작
- 리액트 면접 질문 모음 (2)수정
- 리액트 면접 질문 모음 (1)수정
- 타입스크립트 타입 단언
- 리액트 면접 질문 모음
- 브라우저는 어떻게 동작하는가? - 모던 웹브라우저가 동작하는 방법
- HAProxy
- Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기
- Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기
- 업무 자동화 (1) - 구글 스프레드 시트 API 활용하기