Article
ResizeObserver CSS 변수 직접 갱신 vs React state + rAF 선택 기준
레이아웃 측정값을 UI에 반영할 때 ResizeObserver로 CSS 변수를 직접 갱신할지, React state로 올릴지 그 기준을 정리했다.
READ MOREREAD MORE→
#react
nextjsbffmiddlewarecookieauthenticationreactresize-observercss-variablesperformancerenderingpostmessagereact-hook-formbrowser-apifrontendnext-jshealthkitiosswiftworkoutapple-watchwatchosreact-19useeffectrenderanti-patternmonorepopnpmturboreposemverworkspacepackage-managementpythonvenvvirtual-environmenttroubleshootinggpspedometerlive-activityreact-nativeauto-pauseclaude-coderemote-controlmobile-developmentweb-sessionproductivityrtktoken-optimizationfigma-apideveloper-toolscdnimage-optimizationinfrastructuremermaidmdxdiagramaws-s3presigned-urlfile-uploadhmacsecurityagentic-looptoken-flowhooksprompt-cachingshell-scriptautomationfigmacliskillagentresponsive-publishingcontext-windowsubagentteammulti-agentai-collaborationpublishingclaude-mdmemoryai-workflowhistory-apiformxcodeeasexpowidgetswiftuiapp-groupsandboxhtmlaccessibilitya11yseonice-authpost-vs-getcallbackin-app-browserssgstatic-site-generationgetstaticpropsgetstaticpathscsscontainbrowserjavascriptanimationlerplinear-interpolationrequestanimationframecode-splittingreact-lazydynamic-importpreloadingreflowrepaintcomposite-layertransformwill-changebrowser-renderingbrowser-image-compressionimage-uploadmobile-webdocusaurusmintlifydocumentationopenapistatic-site-generator3d-transformperspectivetransform-stylesearch-consolesitemapmetadatacanonicaljsxtranspileastvirtual-domdomreconciliationsynthetic-eventfluxdeclarativeimmutabilityfrontend-historymvcmvvmjquerybackboneswiperoauthuser-agent-detectionpost-messagesession-storagessrisrcache-controlvercelawsroute53dnsdomaintxt-recordintersection-observerinfinite-scrollchat-uiscroll-behaviortypescriptvpcec2iamcloud-basicsperformance-nowdom-high-res-timestampmonotonic-clockuser-timing-apinode-perf-hooksjenkinsci-cdgithub-webhookkubernetesdockercicdcontinuous-integrationcontinuous-deliverycontinuous-deploymentdevopsdata-structuremapsetgitgithubforkcloneversion-controloss-contributiongenericstype-systemkeyofinterfacegit-branchremotepruneclosurelexical-scopeexecution-contextdeep-divelexical-environmenthoistingscopethisbindingcssomrender-treetcpfirst-class-objectfunctionargumentsvarletconsttype-aliasreduxredux-toolkitstate-managementmouse-eventdrag
Article
React 19에서 useEffect 안의 setState가 위험한 이유
useEffect 안에서 동기적으로 setState를 호출하면 왜 깜빡임이 생기는지, React가 렌더 중 setState를 어떻게 다르게 처리하는지 내부 동작까지 정리한 학습 일지.
READ MOREREAD MORE→
Article
Next.js App Router에서 멀티스텝 폼의 뒤로가기 차단 구현하기
History API의 더미 entry 패턴과 popstate, beforeunload, requestLeave 콜백을 조합하여 멀티스텝 폼의 이탈을 방지하는 방법을 정리한다.
READ MOREREAD MORE→
Article
JSX 내부 동작과 트랜스파일 정리
JSX가 자바스크립트로 어떻게 바뀌는지 토큰화부터 코드 생성, 트랜스파일까지의 단계를 짚어봤다.
READ MOREREAD MORE→
Article
React 가상 DOM 동작 정리
실제 DOM과 가상 DOM의 차이, 재조정과 리플로우, DocumentFragment까지 가상 DOM이 풀고 있는 문제들을 한 번에 짚어봤다.
READ MOREREAD MORE→
Article
리액트 핵심 가치와 가상 DOM, Flux 아키텍처 정리
리액트를 깊이 들여다보면서 선언적 코드, 가상 DOM, Flux 아키텍처를 학습 노트로 묶어 정리했다.
READ MOREREAD MORE→
Article
리액트 이전의 프론트엔드 상태관리 역사 정리
리액트가 등장하기 전, 순수 JS부터 jQuery, Backbone, Knockout, AngularJS까지 상태관리가 어떻게 진화해왔는지 정리한 학습 노트다.
READ MOREREAD MORE→
Article
Intersection Observer로 만든 채팅 역방향 무한 스크롤 트러블슈팅
채팅 UI에 역방향 무한 스크롤을 붙이며 scrollHeight 측정 타이밍, instant 캐스팅, overflow-anchor 대안까지 짚었다.
READ MOREREAD MORE→
Article
자바스크립트 자료구조 활용 정리 — Map·Set·Stack·Queue·Tree
자료구조 선택이 코드 품질을 가르는 순간들을 React 예시와 함께 짚어봤다. Map·Set·Stack·Queue·Tree를 언제 꺼내 썼는지 일지로 정리했다.
READ MOREREAD MORE→
Article
Redux Toolkit 첫 도입기 — ToDo로 7단계 깔아본 작업 정리
ToDo 리스트를 만들면서 Redux Toolkit을 처음부터 끝까지 한 번 깔아본 기록. 스토어·타입·액션·리듀서·셀렉터·디스패치까지 7단계로 정리했다.
READ MOREREAD MORE→
Article
마우스 드래그로 좌측 슬라이드 토글 만들기
todo 아이템을 마우스로 끌어 왼쪽으로 밀어내는 슬라이드 동작을, React 마우스 이벤트와 transform으로 구현했다.
READ MOREREAD MORE→