Next.js

기록을 주제로 한 프로젝트 진행하면서, 글 작성 페이지에서 '이탈 방지 모달'이 필요했다. 추가적으로 해당 모달이 디자인되어 있었기 때문에 '커스텀 팝업 창'을 띄우는 방법도 고민하게 되었다 페이지 이탈 방지 구현 뒤로 가기 뒤로 가기는 popstate 이벤트를 발생시킨다. popstate 이벤트는 사용자의 기록(history) 항목이 변경될 때마다 발...

프로젝트를 진행하다 보면, 사용자가 입력 중이던 내용을 실수로 날리는 상황을 방지하고 싶을 때가 있습니다.이번 포스트에서는 Next.js Page Router 환경에서 페이지 이탈 방지 기능을 구현하고,기본 confirm 창 대신 디자인된 커스텀 팝업 UI를 적용한 경

🧭 배경: 최적화 시도해보기 기존 CSR로 구성된 프로젝트에서 SSR + prefetch를 적용하며 성능 개선을 시도했습니다. 이 과정에서 sessionStorage를 기반으로 동작하던 클라이언트 측 리다이렉트 방식에서 서버 측에서 쿠키를 활용한 middleware

프로젝트를 리팩토링 중, 랜딩 페이지에서 메인 페이지로 이동할 때 체감 속도가 살짝 느린 느낌이 들었습니다.메인 페이지는 로그인 여부에 따라 비로그인 사용자에게는 예시 데이터를, 로그인 사용자에게는 실제 사용자 데이터를 보여주는 구조입니다.이로 인해 로그인 여부 판단

Monorepo로 전환하게 된 이유 어드민 페이지 추가 사실 이전부터 monorepo를 적용해보고 싶다는 생각은 있었지만, 명분이 없었다. 새로운 프로젝트를 시작하기에도, 시작하더라도 굳이 Monorepo를?! 그러던 중 진행하고 있던 프로젝트가 잠시 휴식기었고, 팀