본문으로 건너뛰기

#nextjs

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

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