전체글
(9)[React] 리렌더링 성능 개선기
개인 프로젝트 진행 중 마우스를 움직이기만 해도 컴포넌트가 수백 번 리렌더링되는 문제를 발견했다. Profiler로 측정하고 원인을 추적해서 해결한 과정을 공유한다.
2026-02-17 20:25
이미지 로딩 UX 개선기 - 스켈레톤 UI
앨범 페이지에서 이미지가 하나씩 랜덤하게 나타나며 화면이 불안정해지는 문제를 발견했다. 단순히 스켈레톤 UI를 적용하는 것만으로는 부족했고, 배치 단위 일괄 공개라는 패턴을 조합해야 했다. 브라우저의 이미지 로딩 원리부터 해결까지의 과정을 기록한다.
2026-02-12 19:57
React 18부터 추가된 React 상태 업데이트 배칭 (Automatic Batching)
React 18 부터 추가된 Automatic Batching에 대해 소개하려고 합니다. 무엇이 달라졌는지 알아보고 직접 코드로 구현하는 내용을 담고 있습니다.
2026-02-03 22:13
html2canvas + oklch() 호환 문제 해결하기
html2canvas가 동작하지 않는 문제를 다루고 있습니다. 원인을 알아보고 oklch()와 hsl()의 차이점, 그리고 해결 방법을 정리했습니다.
2026-02-02 17:27
TanStack Form 시작하기
TanStack Form으로 회원가입 폼 만들어보기. 기본 사용법부터 createFormHookContexts로 재사용 컴포넌트 만드는 법까지 정리했습니다.
2026-01-18 17:49
[React] 리액트 컴포넌트의 생명주기 (Lifecycle)
리액트 컴포넌트에는 라이프사이클(Lifecycle)이 있다. 이것은 컴포넌트가 생성되고, 업데이트 되고 사라지는 일련의 과정을 말한다. 이러한 라이프 사이클은 2019년 이전 레거시한 방식이었던 클래스 컴포넌트에서 사용할 수 있었고, 최근에는 함수형 Hooks로 자동으로 다 할 수 있게 됐다.
2025-12-23 14:51
Intersection Observer과 무한 스크롤
IntersectionObserver API를 활용한 무한 스크롤 구현 방법을 다룬다. 사용자가 페이지 끝에 도달하기 전에 데이터를 미리 로딩하여 끊김 없는 자연스러운 스크롤 경험을 제공하는 방법을 알아보자.
2025-11-18 19:30
[React] useCallback은 무엇일까?
React의 useCallback Hook이 무엇인지, 왜 필요한지 기초부터 알아보자. 함수 메모이제이션의 개념과 기본 사용법을 이해하고 불필요한 리렌더링을 방지하는 useCallback의 동작 원리 설명
2025-11-13 16:01
[React] useEffect와 생명 주기
React의 useEffect Hook의 개념과 사용법을 알아보자. 순수 함수와 Side Effect의 차이, 의존성 배열에 따른 동작 방식, 그리고 컴포넌트 생명주기에 따른 cleanup 함수의 역할까지 정리
2025-10-28 17:10