Sentry로 에러 수집부터 Web Vitals, MCP, 릴리스까지 연결한 과정
복지몰의 브라우저와 서버 오류를 Sentry로 모았어요. 전송 정책과 에러 레벨을 정하고, Web Vitals와 MCP, 릴리스 연결을 확인했어요.
#nextjs
이 태그가 붙은 글입니다.
Next.js의 라우팅과 캐시 문제를 추적한 기록
검색을 눌러도 주소가 그대로였고, 배포 뒤에는 열어 둔 탭의 공지가 닫히지 않았어요. 라우팅과 쿠키, 폼 초기화를 따라가며 서버가 다시 처리해야 할 일을 구분했어요.
프로토타입을 옮기며 반복되는 판단을 skills에 남긴 과정
프로토타입을 서비스로 옮기는 동안 비슷한 구현을 여러 번 맡겼어요. 그때마다 고치던 내용을 skills에 적었지만, 짧고 강한 규칙이 오히려 잘못된 코드를 만들기도 했어요.
FSD 레이어를 저장소에 맞게 다시 나눈 과정
폴더는 FSD대로 나눴는데 새 파일을 어디에 둘지는 매번 달랐어요. 실제로 옮겨 보면서 도메인 코드와 화면 조합을 다시 나눴고, URL을 그대로 폴더로 쓰던 규칙도 바꿨어요.
동적 사이트맵에서 공개 API와 인증 API의 경계를 나눈 과정
사이트맵 캐시 안에서 인증 쿠키를 읽는 공용 interceptor가 문제가 됐어요. 공개 조회와 회원별 조회를 나누고 캐시할 범위를 정했어요.
정산 서비스를 별도 호스트로 분리하며 토큰 전달 방식을 바꾼 과정
같은 로그인으로 다른 호스트의 정산 화면을 열어야 했어요. 토큰을 URL에서 POST 본문으로 옮겼지만, 두 호스트에 복제된 인증 상태까지 해결된 것은 아니었어요.
Next.js App Router에서 prefetch를 기다려야 하는 경우
예약 상세는 브라우저에서 멀쩡했지만 처음 받은 HTML에는 병원 정보가 없었어요. prefetch를 시작한 것과 서버가 데이터를 넘길 준비가 된 것은 달랐어요.
예약 폼의 작성 상태를 Zustand에서 React Hook Form으로 옮긴 과정
예약할 가족을 추가했는데 날짜 선택은 이전 인원수대로 움직였어요. 서버의 가족 목록과 사용자가 고른 일시를 구분하고, 작성 중인 값은 React Hook Form에서 바꾸도록 고쳤어요.
Next.js App Router에서 서버와 브라우저의 QueryClient를 나눈 이유
서버에서 미리 조회한 데이터를 브라우저에서도 이어서 쓰려고 했어요. QueryClient는 두 환경에서 다르게 만들고, 조회 옵션은 함께 쓰도록 연결했어요.
NestJS의 책임 분리를 참고해 Electron 수집 앱을 나눈 기준
채용 플랫폼을 추가할 때마다 수집 흐름도 복사하고 있었어요. NestJS를 넣었다가 걷어냈지만, 요청을 받는 코드와 수집 순서, 사이트별 처리는 나눠 남겼어요.