본문으로 건너뛰기

#rendering

ragfine-tuninglearning-to-rankrecommendation-systemllmjevtypesafeai-workflowstructured-outputnextjsapp-routerrscserver-actionsarchitecturetypescriptmonorepoturborepobuild-performancereactssrhydrationroute-handlertanstack-querycachingroutingproxycdnreact-19react-server-componentsserver-statebrowser-renderingcsrdomreact-domrenderingexpoeastestflightioscode-signingclaude-codeeslinthookslintautomationseoopen-graphnoindexrobots-txtpnpmworkspacedependency-managementcatalogvercelawsamplifyecsfargatedeploymentuse-idcreate-portalcreate-rootcookiehttp-onlycsrfxsrf-tokensame-siteweb-securitymiddlewarerewritessosloauthenticationidpfrontendbffresize-observercss-variablesperformancevariancetype-safetystrict-function-typescovarianceimage-optimizationbrowser-image-compressionjszipweb-workerfrontend-performancepostmessagereact-hook-formbrowser-apinext-jshealthkitswiftworkoutapple-watchwatchosuseeffectrenderanti-patternsemverpackage-managementpythonvenvvirtual-environmenttroubleshootinggpspedometerlive-activityreact-nativeauto-pauseremote-controlmobile-developmentweb-sessionproductivityrtktoken-optimizationfigma-apideveloper-toolsinfrastructuremermaidmdxdiagramaws-s3presigned-urlfile-uploadhmacsecurityagentic-looptoken-flowprompt-cachingshell-scriptfigmacliskillagentresponsive-publishingcontext-windowsubagentteammulti-agentai-collaborationpublishingclaude-mdmemoryhistory-apiformxcodewidgetswiftuiapp-groupsandboxhtmlaccessibilitya11ynice-authpost-vs-getcallbackin-app-browserssgstatic-site-generationgetstaticpropsgetstaticpathscsscontainbrowserjavascriptanimationlerplinear-interpolationrequestanimationframecode-splittingreact-lazydynamic-importpreloadingreflowrepaintcomposite-layertransformwill-changeimage-uploadmobile-webdocusaurusmintlifydocumentationopenapistatic-site-generator3d-transformperspectivetransform-stylesearch-consolesitemapmetadatacanonicaljsxtranspileastvirtual-domreconciliationsynthetic-eventfluxdeclarativeimmutabilityfrontend-historymvcmvvmjquerybackboneswiperoauthuser-agent-detectionpost-messagesession-storageisrcache-controlroute53dnsdomaintxt-recordintersection-observerinfinite-scrollchat-uiscroll-behaviorvpcec2iamcloud-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 실행 환경과 CSR/SSR 차이 정리

React가 서버에서도 실행되는 이유와 CSR·SSR의 차이를 React 자체가 무엇인지부터 되짚어 정리했다.

READ MOREREAD MORE→
Article

ResizeObserver CSS 변수 직접 갱신 vs React state + rAF 선택 기준

레이아웃 측정값을 UI에 반영할 때 ResizeObserver로 CSS 변수를 직접 갱신할지, React state로 올릴지 그 기준을 정리했다.

READ MOREREAD MORE→
Article

CSS contain 속성 정리

CSS contain 속성으로 렌더링을 격리하는 법을 정리한 학습 노트. 단축값 정의·브라우저 지원·실제 성능 측정까지 공식 문서 기준으로 묶었다.

READ MOREREAD MORE→
Article

requestAnimationFrame 동작 정리

requestAnimationFrame이 화면 갱신 주기에 어떻게 맞물려 돌아가는지, 프레임과 주사율이 어긋날 때 무슨 일이 벌어지는지 파보고 정리했다.

READ MOREREAD MORE→
Article

Next.js SSR·SSG·ISR 렌더링 전략 정리

Pages Router 기준 SSR·SSG·ISR이 매번 헷갈렸다. 셋을 한자리에 두고 동작 방식과 트레이드오프를 정리했다.

READ MOREREAD MORE→
Article

브라우저가 화면을 그리기까지의 과정 정리

DNS 조회부터 Composition까지, 브라우저가 웹사이트를 띄울 때 내부에서 벌어지는 흐름을 Construction과 Operation 두 단계로 짚어봤다.

READ MOREREAD MORE→