Article
검색 색인 차단과 OG 미리보기 유지 정리
크롤링·색인·Open Graph를 분리해 검색 결과에서는 감추고 링크 미리보기는 살리는 설정을 정리했다.
READ MOREREAD MORE→
#nextjs
seoopen-graphnoindexrobots-txtnextjspnpmmonorepoworkspacedependency-managementcatalogvercelawsamplifyecsfargatedeploymentreacthydrationuse-idcreate-portalcreate-rootcookiehttp-onlycsrfxsrf-tokensame-siteweb-securitymiddlewarerewritessosloauthenticationidpfrontendbffresize-observercss-variablesperformancerenderingtypescriptvariancetype-safetystrict-function-typescovarianceimage-optimizationbrowser-image-compressionjszipweb-workerfrontend-performancepostmessagereact-hook-formbrowser-apinext-jshealthkitiosswiftworkoutapple-watchwatchosreact-19useeffectrenderanti-patternturboreposemverpackage-managementpythonvenvvirtual-environmenttroubleshootinggpspedometerlive-activityreact-nativeauto-pauseclaude-coderemote-controlmobile-developmentweb-sessionproductivityrtktoken-optimizationfigma-apideveloper-toolscdninfrastructuremermaidmdxdiagramaws-s3presigned-urlfile-uploadhmacsecurityagentic-looptoken-flowhooksprompt-cachingshell-scriptautomationfigmacliskillagentresponsive-publishingcontext-windowsubagentteammulti-agentai-collaborationpublishingclaude-mdmemoryai-workflowhistory-apiformxcodeeasexpowidgetswiftuiapp-groupsandboxhtmlaccessibilitya11ynice-authpost-vs-getcallbackin-app-browserssgstatic-site-generationgetstaticpropsgetstaticpathscsscontainbrowserjavascriptanimationlerplinear-interpolationrequestanimationframecode-splittingreact-lazydynamic-importpreloadingreflowrepaintcomposite-layertransformwill-changebrowser-renderingimage-uploadmobile-webdocusaurusmintlifydocumentationopenapistatic-site-generator3d-transformperspectivetransform-stylesearch-consolesitemapmetadatacanonicaljsxtranspileastvirtual-domdomreconciliationsynthetic-eventfluxdeclarativeimmutabilityfrontend-historymvcmvvmjquerybackboneswiperoauthuser-agent-detectionpost-messagesession-storagessrisrcache-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
Portal과 createRoot의 차이 — pubuilder 하이드레이션 이슈 정리
Next.js 개발 오버레이의 useId 하이드레이션 경고를 추적하며 createPortal과 독립 React Root의 차이를 정리했다.
READ MOREREAD MORE→
Article
Next.js Middleware rewrite로 인증 서비스 OG 크롤링 정상화
인증이 걸린 Next.js 서비스에서 OG 크롤러가 로그인 페이지로 redirect돼 미리보기가 깨지는 문제를 Middleware의 rewrite로 풀었다.
READ MOREREAD MORE→
Article
BFF vs 미들웨어, 쿠키 도메인과 401
같은 계정으로 로그인했는데 한 앱만 계속 401이 떴다. 범인은 내 서버가 요청 길목에 끼어 있느냐였다.
READ MOREREAD MORE→
Article
CDN이 뭔지 모르는 프론트엔드 개발자를 위한 CDN 입문
CDN의 개념부터 이미지 최적화, JS 라이브러리 로딩까지. "대충 아는" 상태가 답답해서 한번 제대로 파봤다.
READ MOREREAD MORE→
Article
Next.js 블로그에 Mermaid 다이어그램 도입기 (npm 없이 CDN으로)
블로그 다이어그램이 한국어 때문에 깨지는 문제를 발견하고, Mermaid를 CDN 방식으로 도입한 과정.
READ MOREREAD MORE→
Article
Next.js App Router에서 멀티스텝 폼의 뒤로가기 차단 구현하기
History API의 더미 entry 패턴과 popstate, beforeunload, requestLeave 콜백을 조합하여 멀티스텝 폼의 이탈을 방지하는 방법을 정리한다.
READ MOREREAD MORE→
Article
Next.js에서 NICE 본인인증 GET/POST 동시 수용 콜백 구현
나이스 본인인증 게이트웨이는 PC에선 POST, 모바일에선 GET으로 콜백을 던졌다. 둘 다 받는 콜백을 짜고 PC와 모바일 응답 경로를 갈라 처리했다.
READ MOREREAD MORE→
Article
Next.js SSG 적용기
Pages Router 시점의 SSG를 다시 정리했다. 빌드 시점에 HTML을 생성하는 흐름과 getStaticProps, fallback, next.config, serve까지 학습 노트로 묶었다.
READ MOREREAD MORE→
Article
Next.js SSR·SSG·ISR 렌더링 전략 정리
Pages Router 기준 SSR·SSG·ISR이 매번 헷갈렸다. 셋을 한자리에 두고 동작 방식과 트레이드오프를 정리했다.
READ MOREREAD MORE→