전체 글
368개의 글 · 8개 연도
2026
28- 06-12코드를 읽거나 설명할 줄 몰라도, 스펙을 만족하고 버그를 고칠 수 있다면 상관없을까
- 06-12AI가 기획·개발·디자인의 경계를 지운다면, 무엇이 남는가
- 05-30React cache() 딥다이브: 소스 코드로 읽는 요청 단위 메모이제이션
- 05-16TanStack npm 공급망 공격 분석: pull_request_target은 왜 위험한가
- 05-15Bun rewrite가 폭로한 것: OSS는 외부 AI만 막을 수 있었다
- 05-09오래 쓸 수 있는 패키지는 무엇이 다른가
- 05-03PR diff에서는 보이지 않는 비용: 우리는 사용자가 받는 코드를 리뷰하고 있지 않다
- 05-01'use cache' 디렉티브 딥다이브: 캐시 경계의 끝까지
- 05-01'use client' 디렉티브 딥다이브: 클라이언트 경계의 끝까지
- 04-20AI는 내가 보이는 수준까지만 나를 증폭한다
- 03-23왜 여전히 Next.js를 쓰는가
- 03-21Next.js의 성능은 충분히 빠른가
- 03-19React는 누구의 것인가
- 03-17Cloudflare가 Next.js를 다시 만든 이유
- 03-16Next.js Edge Runtime의 흥망성쇠
- 03-09React 서버 함수 딥다이브: "use server"의 끝까지
- 03-02React의 <ViewTransition>: 브라우저 네이티브 애니메이션을 React답게
- 02-27Node.js vm 모듈의 함정: 샌드박스가 아닌 이유
- 02-21Infinite Scroll의 몰락 — Google은 왜 무한 스크롤을 걷어냈는가
- 02-20Effect 시스템 심층 분석: 모나드에서 Algebraic Effects까지, 그리고 Effect-TS의 선택
- 02-19Node.js Deep Dive (가제) 베타 리더를 모십니다.
- 02-19React Compiler 딥다이브: 원리부터 결과물까지
- 02-14AI가 코드를 짜는 시대, 프론트엔드 엔지니어링은 어디로 가는가
- 01-17코딩 에이전트 핵심 개념 완전 가이드
- 01-17IntersectionObserver 싱글톤 패턴과 WeakMap으로 메모리 누수 방지하기
- 01-17TypeScript에서 switch문의 모든 케이스를 빠짐없이 처리했는지 검사하는 방법
- 01-11거대한 JSON 응답을 효율적으로 처리하는 방법
- 01-04React의 "서버로 회귀"는 역사의 반복인가?
2025
28- 12-30WebGPU, 드디어 모든 브라우저에서 사용 가능해지다
- 12-24Next.js 캐싱 가이드
- 12-16React의 새로운 lint 규칙: set-state-in-effect
- 12-15useEvent에서 useEffectEvent까지: React의 이벤트 핸들러 안정화 여정
- 12-12React 취약점인데 왜 Next.js를 업그레이드해야 하지?
- 12-11React 19: ref를 prop으로 사용하기
- 12-05블로그 정상영업합니다
- 12-05문자열 리터럴 유니온에 string을 추가하면 자동완성이 사라지는 이유
- 11-10web performance deep dive (가제) 베타 리더를 모십니다. (마감)
- 08-08npm Deep Dive 온라인 저자 특강
- 07-19웹 서비스 성능 분석 (4)
- 07-01웹 서비스 성능 분석 (3)
- 06-23Nextjs app router의 Rendered more hooks than during the previous render 버그 패치 후기
- 06-09『npm Deep Dive』 스터디원 모집중입니다!
- 06-07[네이버페이] 채용 연계형 FE 개발 인턴십
- 05-30AI 시대에 나는 왜 책을 썼을까
- 05-28『npm Deep Dive』 가 출간되었습니다.
- 05-24"AI가 다 해주잖아?"라는 환상: FE의 본질과 AI 시대의 현실
- 05-24프론트엔드 개발 환경의 변화와 과제: AI 도입과 리더십
- 05-24AI 시대 "프론트엔드, 정말 중요할까?" 라는 질문에 답합니다. (성능, AI, UI/UX, 그리고 미래)
- 05-24프론트엔드 개발자, 3년차의 벽을 넘어: 성장의 악순환을 끊고 목표와 성취감을 찾는 법
- 05-19AI가 코드를 작성해 주는 시대, 프론트엔드 개발자인 나는 무엇을 해야 할까?
- 05-12웹 서비스 성능 분석 (2)
- 05-06웹 서비스 성능 분석 (1)
- 04-26웹사이트 성능에 고민이 있는 서비스를 찾습니다.
- 03-26https://research.yceffort.kr/ 를 오픈했습니다
- 03-22맵과 객체 중 무엇을 언제 쓰는 것이 좋을까?
- 03-21리액트 인터뷰 가이드 번역본이 출간되었습니다.
2023
62022
35- 06-26나만의 eslint 룰 만들어보기
- 06-17JSON.stringify 만들어보기
- 06-12브라우저의 프리로드 스캐너(pre-load scanner)와 파싱 동작의 이해
- 06-09Largest Contentful Paint (LCP) 최적화하기
- 05-20npm, yarn, pnpm 비교해보기
- 05-15타입스크립트 컴파일러는 어떻게 동작하는가?
- 05-12리액트의 새로운 훅, useEvent
- 05-08알아두면 유용한 타입스크립트 팁
- 04-28크롬 메모리 프로파일러 사용하는 방법
- 04-21V8에서 관리되는 자바스크립트 변수
- 04-16참조 동일성을 위한 메모이제이션
- 04-16리액트의 useCallback useMemo, 정확하게 사용하고 있을까
- 04-15[블로그] PWA 임시 중지
- 04-09리액트의 렌더링은 어떻게 일어나는가?
- 04-08Rust로 web assembly로 game of life 만들어보기 (2)
- 04-04리액트 v18 버전 톺아보기
- 03-28내가 타입스크립트에서 Enum을 잘 쓰지 않는 이유
- 03-25React.FC를 사용하지 않는 이유
- 03-24리액트 훅을 사용할 때 조심해야 할 것
- 03-18Rust로 web assembly로 game of life 만들어보기 (1)
- 03-16타입스크립트의 Omit은 어떻게 동작할까? Exclude, Pick 부터 알아보기
- 03-14타입스크립트의 함수의 다형성
- 03-12타입스크립트 타입 never 에 대해 자세히 알아보자
- 03-11Rust로 web assembly 만들어보기 (3) - Rust로 다양한 Web Assembly 만들어보기
- 03-10Rust로 web assembly 만들어보기 (2) - Rust로 간단한 Web Assembly 만들기
- 03-07Rust로 web assembly 만들어보기 (1) - Web Assembly란 무엇인가?
- 02-26[Rust] 자바스크립트에서 러스트로 (1) - rustup, hello world, 그리고 소유권과 빌림
- 02-18자바스크립트 3항연산자에 대한 고찰
- 02-13Remix nextjs와 비교하면서 살펴보기
- 02-07Dockerfile 작성 가이드
- 02-05더 나은 Dockerfile 작성을 위한 best practice - 2022년 버전
- 01-29리액트 서버 컴포넌트의 동작 방식
- 01-20웹 애플리케이션에서 자바스크립트 프로파일링 해보기
- 01-17colors.js와 faker.js 사태가 준 교훈
- 01-012021년 회고
2021
85- 12-20nextjs를 적용하면서 알게 된 사실들
- 12-13Node.js의 메모리 제한과 누수 추적 가이드
- 12-11node_modules도 git에서도 관리하면 어떨까?
- 11-30HTML 문서에서 DOM으로의 여정
- 11-23서버에서 클라이언트로의 여정 - 브라우저와 서버는 어떻게 데이터를 주고 받을까
- 11-20자바스크립트 코드가 가져야할 책임감 (2)
- 11-16자바스크립트 코드가 가져야할 책임감 (1)
- 11-10읽기 좋은 자바스크립트 코드 작성하기
- 11-05Array vs ArrayLike, Promise vs PromiseLike
- 10-29nextjs 서버사이드에서 absolute url 가져오기
- 10-22클라이언트 서버 모두에서 nextjs에서 api에러 핸들링하기
- 10-15nodejs의 버퍼 이해하기
- 10-10좋은 자바스크립트 테스트 코드를 짜는 방법
- 10-06package.json에 쌓여있는 개발 부채
- 10-03HTML은 프로그래밍 언어인가? 라는 논쟁보다 중요한 것
- 09-28프론트엔드 프로젝트를 위한 github CI workflow
- 09-25리액트 18에서 변경될 새로운 SSR 아키텍쳐
- 09-22Critical Request - request 순서는 웹사이트 속도에 어떤 영향을 미치는가
- 09-19웹 개발자가 본 사파리 15의 변화와 대응
- 09-14자바스크립트에서의 정규식, 이론부터 조심해야 할 것 까지
- 09-08비동기 함수 memoize 하는 방법
- 09-01자바스크립트에서 안전하게 난수 생성하는 방법
- 08-31Nodejs의 이벤트 루프 살펴보기
- 08-27타입스크립트의 제네릭은 적절한 네이밍과 함께 사용하자
- 08-24트리쉐이킹으로 자바스크립트 사이즈 줄이기
- 08-23uncaught async error를 올바르게 처리하기
- 08-15requestIdleCallback으로 최적화하기
- 08-14비동기 리소스 (async resources)와 비동기 훅 (async hooks) 이해하기
- 08-10브라우저와 Nodejs의 이벤트 루프는 무엇이 다를까
- 08-07웹 페이지에서의 자바스크립트 메모리 사용량 벤치마킹
- 08-06웹사이트의 성능지표, Core Web Vital
- 07-30promise.then(f, f) vs promise.then(f).catch(f) 는 무엇이 다를까?
- 07-28자바스크립트 의존성 관리자(npm, yarn, pnpm)에서 보다 더 의존성 관리 잘하는 방법
- 07-22Export에 숨겨져 있는 심오함
- 07-16Nodejs 프로세스를 종료시키는 방법
- 07-06npm workspace와 esbuild로 monorepo 구축해보기
- 07-05Nodejs 모듈 (CommonJS, ECMAScript) 과 패키지, 그리고 Semver
- 07-02왜 Nodejs ORM을 쓰지 말아야 할까
- 06-27웹 폰트 로딩을 더 빠르게 하는 방법
- 06-22reduce에 spread 를 쓰면 안되는 이유
- 06-19Nextjs 11 릴리즈 노트 살펴보고 블로그에 적용하기
- 06-19K8s 공부 (4)
- 06-19ESModule을 동적으로 import 하기
- 06-15타입스크립트의 타입과 제네릭 적극 활용하기
- 06-12K8s 공부 (3)
- 06-10K8s 공부 (2)
- 06-10타입스크립트의 구조 타이핑
- 06-09K8s 공부 (1)
- 06-07for vs for-in vs forEach vs for-of 무엇으로 자바스크립트 리스트를 돌아야 하나
- 06-05Nodejs에서 올바르게 에러 처리하기
- 06-04Nodejs에 대한 잘못된 상식 몇가지
- 05-27Typescript, 객체의 키와 값 타이핑하기
- 05-26Typescript의 Immutability
- 05-25타입스크립트에서 조심해야할 습관
- 05-23suppressImplicitAnyIndexErrors 옵션을 키기 전에
- 05-17Vercel에서 배포가 안됐던 이야기
- 05-15JWT의 단점과 주의사항
- 05-12HTTP1 vs HTTP2
- 05-10자바스크립트 개발자를 위한 AST 이해하기 (2026년 업데이트)
- 05-02디렉토리에 있는 모든 이미지 최적화 하기
- 04-15nodejs의 멀티쓰레딩과 worker threads
- 03-31github workflow로 lighthouse ci 추가하기
- 03-26CSS 성능 향상 시키기
- 03-22타입스크립트 성능을 위한 팁
- 03-21타입스크립트 type과 interface의 공통점과 차이점
- 03-21알쏭 달쏭한 자바스크립트 정규식
- 03-19리액트 서버사이드 렌더링과 컴포넌트
- 03-17애플 단축어와 GCP로 내 건강정보 업로드하기
- 03-12자바스크립트의 프록시
- 03-09자바스크립트의 제네레이터와 regeneratorRuntime
- 03-05HTML과 CSS를 활용해서 콘텐츠를 숨기는 10가지 방법
- 02-27자바스크립트 성능과 번들 사이즈
- 02-26Nodejs에서 로깅하기
- 02-25useEffect와 메모리 누수
- 02-21자바스크립트의 배열, 그리고 이터러블과 이터레이터 (ES6)
- 02-15나만의 자바스크립트 polyfill 만들고 공부하기
- 02-03no return, await, return, await return 의 차이
- 02-02null과 undefined의 차이, 그리고 역사
- 02-01CSS와 웹페이지 성능과의 관계
- 01-28Nextjs에서 Server Side props를 새로고침하기
- 01-24GitHub Actions cron이 제시간에 실행되지 않는 이유와 대안
- 01-14overflow: auto vs overflow: scroll 왜 윈도우에서만 쓸모없는 스크롤바가 노출될까
- 01-11그런데 왜 brotli를 사용하지 않는 것일까? 🤔
- 01-11개발자가 알아야 하는 4가지 nodejs 디자인 패턴
- 01-07더 나은 압축 알고리즘, Brotli
2020
139- 12-26ES2021 미리보기
- 12-22map과 reduce에서 async await 사용하기
- 12-17파티셔닝 캐시 (partitioning cache)
- 12-152020년 사이드 프로젝트 회고
- 12-15더 빠른 웹 애플리케이션을 위한 모던 자바스크립트
- 12-08서버리스로 블로그 포스트 썸네일 생성하기
- 12-02자바스크립트 함수의 성능 측정하기
- 12-01왜 moment 는 deprecated 되었을까
- 12-01자바스크립트의 가비지 컬렉션
- 11-27V8 엔진에 대해 가볍게 살펴보기
- 11-26뒤로가기, 앞으로가기의 캐시 aka bfcache
- 11-25PWA 적용 후기 및 장단점
- 11-23웹에서 사용 가능한 스토리지 살펴보기
- 11-23자바스크립트로 메모이제이션 구현하기
- 11-23node_modules에 임시 패치 적용하기
- 11-20Nodejs 서비스 Recovery 전략
- 11-20자바스크립트 의존성 지옥
- 11-19Nodejs 성능 최적화를 위한 방법
- 11-18V8에서의 메모리 관리
- 11-17서버 사이드 이벤트 (Server Side Events, SSE)
- 11-16React를 위한 상태관리 라이브러리, Recoil
- 11-12리액트와 메모이제이션
- 11-11eslint, prettier, editorconfig 로 코드 컨벤션을 맞춘 후기
- 11-09export default를 쓰지 말아야 할 이유
- 11-06브라우저 탭 사이에서 통신 하는 방법
- 11-05Webpack Module Federation 직접해보기
- 11-03eslint-config 를 위한 테스트 코드를 작성하기 (CI)
- 10-31Promise 관련 API 살펴보기
- 10-30JSX에서 && 대신에 3항 연산자를 더 선호하는 이유
- 10-28Nextjs 10 릴리즈 및 적용 후기
- 10-27Object.freeze(), Object.seal(), Object.preventExtensions()의 차이
- 10-26higher order function, 고차함수
- 10-23useComponentWillMount??
- 10-22자바스크립트 함수를 선언하는 여섯가지 방법
- 10-22(함수형으로) 자바스크립트로 HTML 버튼 중복 클릭 방지하기
- 10-21EventEmitter 구현해보기
- 10-20HTTP Cache로 불필요한 네트워크 요청 줄이기
- 10-20왜 Async 보다는 Defer를 써야할까
- 10-20크롬에서 자바스크립트 로딩 순서
- 10-19Prop drilling 해결을 위해 context를 사용하기 전에 구조를 생각해보자.
- 10-19리액트의 Hooks과 HOC, HOC의 사용이 복잡해지는 경우
- 10-18리액트의 useState와 lazy initialization
- 10-16블로그 gatsby에서 nextjs로 옮긴 이야기
- 10-08Create React App의 serviceWorker는 무엇일까
- 10-07styled-components로 스타일 적용하는법
- 10-06Node.js는 어떻게 동작하는가
- 10-02useEffect는 라이프 사이클 메소드가 아니다.
- 09-29detached window로 인한 자바스크립트 메모리 누수
- 09-29자바스크립트로 다음 사전 크롤링해보기
- 09-25크롬 익스텐션 만들기
- 09-24ECMAScript 명세 읽어보기 (1)
- 09-23재밌는 자바스크립트 면접 문제
- 09-22useCallback 사용 가이드
- 09-22Referer와 Referer-Policy를 위한 가이드
- 09-21자바스크립트 String
- 09-21리액트 v17.0 살펴보기
- 09-21Typescript 4.0 릴리즈 노트
- 09-18Github Code Spaces 베타 당첨 및 후기
- 09-17[Book] No Rules Rules
- 09-16Webpack Module Federation에 대해 알아보자
- 09-16typescript의 enum은 tree shaking이 되지 않는다?
- 09-15eslint-config-yceffort, 나만의 eslint-config 만들기
- 09-15Git commit의 일시를 변경하기
- 08-31블로그 업데이트에 대한 회고
- 08-30MobX를 공부하자 (4) - React와 Mobx의 10분 요약 글
- 08-25MobX를 공부하자 (3) - 기본 개념과 원칙
- 08-24MobX를 공부하자 (2)
- 08-21MobX를 공부하자 (1)
- 08-21Git Cheat Sheet
- 08-11CommonJS와 ES Modules은 왜 함께 할 수 없는가?
- 08-09Docker 공부 (3) - 도커 이미지
- 07-29프로그래머 기초 수학 2-3 - 유리수, 무리수, 실수
- 07-29Docker 공부 (2) - 도커 네트워크
- 07-28Docker 공부 (1) - 도커 기초부터 볼륨 공유까지
- 07-24프로그래머 기초 수학 2-2 - 기수법
- 07-23Github actions 요약
- 07-23프로그래머 기초 수학 2-1 - 정수
- 07-21Webpack을 활용한 성능향상 - 캐싱 활용하기
- 07-17프로그래머 기초 수학 1-2 - 집합
- 07-16프로그래머 기초 수학 1-1 - 명제와 논리연산
- 07-16Github 액션으로 스케쥴링 작업하기
- 07-14자바스크립트 메모리 누수와 해결 방법
- 07-06자바스크립트의 비용
- 07-06주요 렌더링 경로 - 브라우저의 원리를 이해하고 최적화 하기
- 07-06빠른 로딩을 위한 PRPL 패턴
- 07-05왜 CommonJS는 번들사이즈를 크게 하는가?
- 07-04프론트엔드 개발자가 알아야 하는 Angular와 React의 Change Detection
- 07-04리액트 고차 컴포넌트 (React Higher Order Component)
- 07-01프론트엔드 사이즈 줄이기
- 07-01자바스크립트로 구현해보는 다양한 정렬
- 06-29자바스크립트 자료 구조
- 06-29Notion 성능 최적화
- 06-27Javascript Prototype
- 06-26Javascript Execution Context
- 06-25Codility - Fish
- 06-25Codility - Nesting
- 06-25Codility - Stone Wall
- 06-25Codility - Brackets
- 06-24Codility - Frog River One
- 06-24Codility - Max Counters
- 06-24Codility - Missing Integer
- 06-23Codility - Distinct
- 06-23Codility - Max Product of Three
- 06-23Codility - Number of Disc Intersections
- 06-23Codility - Triangle
- 06-23Codility - Binary Gap
- 06-23Codility - Cyclic Rotation
- 06-23Codility - Odd Occurrences in array
- 06-23Codility - Frog Jump
- 06-23Codility - Perm missing elem
- 06-23Codility - Tape Equilibrium
- 06-23Codility - Perm Check
- 06-23Codility - Count div
- 06-23Codility - Genomic Range Query
- 06-23Codility - Min Avg Two Slice
- 06-23Codility - Passing Cars
- 06-19알고리즘 - 연결 리스트
- 06-09Nodejs에서의 암/복호화
- 06-03자바스크립트 스킬을 향상 시킬 10개의 질문
- 05-21자바스크립트 제네레이터
- 05-20자바스크립트 데코레이터
- 05-20var let const, 그리고 호이스팅
- 05-19javascript 일반 함수와 화살표 함수의 차이
- 05-08자바스크립트의 private
- 04-29리덕스 공부해보기 (3) - 용어
- 04-28리덕스 공부해보기 (2) - 리덕스의 탄생, 핵심 개념 그리고 3가지 원칙.
- 04-26리덕스 공부해보기 (1) - 개요
- 04-15타입스크립트로 koa 미들웨어 만들기
- 03-22Socket.IO 공부하기 (1)
- 03-17[Python] Send ncloud sms message
- 03-17Javascript Regex 숫자를 comma와 함께 Formatting 하기
- 03-12NextJS 1. Page & Route
- 03-12NextJS 2. Data Fetching
- 03-05자바스크립트 커링과 클로져
- 01-22자바스크립트에서 http 요청하기 - fetch에 대한 고찰
- 01-15React count down에서 배운 event-emitter 와 requestAnimationFrame
- 01-112020년, 매일 github에 contribution 하기
- 01-09Chrome Samesite 쿠키 정책
- 01-02머지된 브랜치를 삭제하는 스크립트
2019
40- 12-30블로그 개편했습니다. 😎
- 12-27자바스크립트의 이벤트루프, 태스크, 그리고 마이크로 태스크
- 12-192020년 목표
- 12-18Github을 아름답게 관리하기
- 10-15리액트 텍스트 하이라이트 만들기
- 10-14typescript debounce
- 09-30브라우저 히스토리 조작
- 09-20타입스크립트 제네릭
- 08-21리액트 면접 질문 모음 (2)
- 08-21리액트 면접 질문 모음 (1)
- 08-20타입스크립트 타입 단언
- 08-13리액트 면접 질문 모음
- 08-12브라우저는 어떻게 동작하는가? - 모던 웹브라우저가 동작하는 방법
- 08-12koa-nextjs-react-typescript-boilerplate
- 08-12React Hooks Api (2)
- 08-09React Hooks Api (1)
- 08-07HAProxy
- 08-06Docker와 ECR, ECS 경험
- 07-22Javascript Reduce
- 07-18Javascript Set 그리고 Map
- 07-18Javascript Symbol
- 07-17javascript event bubbling & capturing
- 07-10javascript class
- 06-24Intersection Observer
- 06-21Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기
- 06-18Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기
- 05-21React 공부하기 7 - 컴포넌트 라이프 사이클
- 05-21React 공부하기 8 - 함수형 컴포넌트
- 05-21React 공부하기 6 - 컴포넌트 반복
- 05-21Javascript - Promise
- 05-21Javascript - Destructuring Assignment
- 05-09Javascript - Closure
- 05-09React 공부하기 5 - Reference
- 05-08React 공부하기 4 - Event
- 05-08React 공부하기 3 - Component
- 05-08React 공부하기 2 - JSX
- 05-08React 공부하기 1 - background
- 05-03Disciplined entrepreneurship
- 04-01Computer Vision 01) - Image Representation
- 02-14업무 자동화 (1) - 구글 스프레드 시트 API 활용하기