Frontend

기술 기록

Next.js App Router에서 멀티스텝 폼의 뒤로가기 차단 구현하기

History API의 더미 entry 패턴과 popstate, beforeunload, requestLeave 콜백을 조합하여 멀티스텝 폼의 이탈을 방지하는 방법을 정리한다.

나이스 본인인증 게이트웨이는 PC에선 POST, 모바일에선 GET으로 콜백을 던졌다. 둘 다 받는 콜백을 짜고 PC와 모바일 응답 경로를 나눠 처리했다.

Pages Router 시점의 SSG를 다시 정리했다. 빌드 시점에 HTML을 생성하는 흐름과 getStaticProps, fallback, next.config, serve까지 학습 노트로 묶었다.

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

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

마우스를 따라다니는 원이 즉시 붙어버리는 게 거슬려서 선형 보간(Lerp) 공식을 매 프레임에 적용해봤다.

이미지 클릭 시 크게 보는 상세 모달을 만들면서, 평소엔 안 열리는 화면이라 React.lazy로 분리하고 사전 로딩으로 클릭 지연을 줄였다.

transform이 왜 빠른지 매번 헷갈려서 렌더링 파이프라인의 어디서 갈리는지 정리해뒀다.

카드 플립 같은 3D UI를 만들며 perspective, transform-style, backface-visibility가 어떻게 맞물려 돌아가는지 정리했다.

검색 플랫폼 등록부터 메타데이터·사이트맵·canonical까지, SEO 작업에서 챙겨야 할 항목을 한 번에 정리했다.