React useTransition useDeferredValue 검색 UI 최적화
검색 input처럼 즉시 반응해야 하는 UI와, 수천 개 항목을 다시 계산하는 목록처럼 조금 늦게 처리해도 되는 UI는 우선순위가 다릅니다.
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
React lazy Suspense 코드 스플리팅 지연 로딩
TaskFlow 기능이 늘어나면 사용자가 첫 화면에서 당장 필요하지 않은 코드까지 모두 초기 번들에 포함될 수 있습니다. React.lazy는 컴포넌트 코드를 실제로 필요할 때 불러오고, Suspense는 로딩 중 보여 줄 f…
React Hook Form 설치 사용법 첫 폼 만들기
React Hook Form은 폼 값을 등록하고 제출·검증 상태를 관리하는 데 사용하는 폼 라이브러리입니다. 이번 글은 React Hook Form이 React 과정에서 처음 등장하는 글이므로 설치부터 최소 동작 확인까지 모두…
React Effect 생명주기와 useEffectEvent 사용 기준
useEffect를 “컴포넌트가 mount될 때 한 번 실행하는 함수”라고만 이해하면 dependency를 다루기 어려워집니다. Effect는 외부 시스템과 현재 React 상태를 동기화하는 과정입니다.
React useEffect 사용법 외부 시스템과 상태 동기화하기
useEffect는 React에서 가장 많이 오해되는 Hook 중 하나입니다. “렌더링이 끝난 뒤 실행할 코드”라고만 외우면 state 계산, 이벤트 처리, 데이터 변환까지 모두 Effect에 넣게 되고 오히려 코드가 복잡해집…
React state 보존 초기화 key로 컴포넌트 상태 리셋하기
React의 state는 변수 이름이 아니라 렌더 트리의 위치와 연결됩니다. 같은 위치에 같은 컴포넌트가 렌더링되면 React는 이전 state를 유지합니다.
React children 사용법 컴포넌트 합성과 재사용 UI 설계
props로 값과 이벤트를 전달할 수 있게 되면 다음 단계는 “컴포넌트를 어떻게 조합할 것인가”입니다. 모든 UI를 하나의 거대한 props 객체로 제어하면 재사용하기 어렵고 API도 복잡해집니다.
React로 TaskFlow 만들기: 32편 동안 완성하는 작업 관리 앱
React를 공부할 때 Hook 이름을 순서대로 외우는 것보다 더 중요한 것은 “이 기술을 써서 무엇을 만들게 되는가”를 먼저 아는 것입니다.
등수구하기 풀이
각 점수를 다른 모든 점수와 비교해 공동 순위를 포함한 학생별 등수를 계산하는 JavaScript 풀이입니다.
2026년 9월 18일 AI 브리핑: Astra for Law·Claude Projects
OpenAI의 법률 특화 Astra, Claude Code의 병렬 프로젝트 조정, Anthropic의 검증형 생명과학 AI 접근을 개발자 관점에서 정리합니다.
점수계산 풀이
연속 정답 수를 누적해 문제별 점수와 총점을 한 번의 순회로 계산하는 JavaScript 풀이입니다.
2026년 9월 17일 AI 브리핑: Claude Cowork·채팅 통합
Anthropic의 Claude Cowork·채팅 통합과 새 Docs·Slides 베타를 공식 자료로 확인하고, 장기 작업·권한·문서 출력 구조가 개발자에게 미치는 영향을 정리합니다.
