백엔드에서 DTO 만들어서 프론트에서 api 연동시 Response 값이 다르게 와서 문제가 발생한 상황입니다 문제점 중복을 확인하는 검증에서 Dto 클래스 필드의 변수를 isDuplicate로 지정을 했었다. 그 후 프론트에서의 API 연동에서 isDuplicate가 아니라 duplicate로 표시가 되었다. 기대되는 값은 이지만 표시되는 값은 였다. 원인 분석 원인은 lombok의 getter와 json을 직렬화 & 역직렬화하는 jackson 라이브러리에 있었다. lombok 라이브러리의 공식 문서를 살펴보면, You can annotate any field with @Getter and/or @Setter, to let lombok generate the default getter/setter automatically. A default getter simply returns the field, and is named getFoo if the field is called f…

프로젝트 초기 SSE 방식은 백엔드에서 동기적으로 작동했기에 저희 프론트에서 자동 연결 시도 함수를 만든 상황입니다. (추 후에는 비동기로 하여 에 (백엔드에서 네임 지정)으로 바꾸었습니다.) 문제점 초기에는 알림창을 열었을 때만 SSE 연결이 이루어지는 구조였습니다. 좋아요, 댓글 등의 실시간 알림 기능이 제대로 동작하지 않는 문제 발생 초기 동작 사용자가 웹 애플리케이션에 로그인한 상태에서도 알림 컴포넌트를 열기 전에는 SSE 연결이 활성화되지 않았습니다. 새로운 알림(예: 좋아요, 댓글)이 발생해도 사용자가 알림 UI를 열 때까지는 실시간으로 알림을 받지 못했습니다. 알림 UI를 닫거나 페이지를 이동하면 SSE 연결이 종료되어, 다시 알림 UI를 열어야만 연결이 재개되는 비효율적인 방식이었습니다. 원인 분석 알림 기능은 좋아요, 댓글 등 다양한 이벤트 발생 시 실시간으로 사용자에게 푸시되는 것이 핵심입니다. SSE 연결이 알림 UI 로딩 시에만 의존적으로 동작하도록 설계되었…

HOBBi 프로젝트에서 Next.js 15 버전을 사용했는데 인증이 된 사람과 비회원 즉 인증이 안된사람들의 라우팅을 어떻게 처리할지 생각중 Next.js Middleware 공식문서를 보게되었고, 프로젝트에 활용해보면 좋겠다는 생각이 들어서 사용하게 되었습니다. 문제점 Next.js의 미들웨어를 사용하여 라우팅 시 사용자 인증 상태를 확인하고 접근 권한을 제어하려 했으나, 미들웨어 환경에서는 에 저장된 정보에 접근할 수 없었습니다. 미들웨어는 클라이언트 측 스크립트가 실행되기 전에 요청을 가로채 처리하므로, 브라우저 API인 를 사용할 수 없습니다. 원인 분석 미들웨어에는 실행 환경에 제약이 있습니다. 미들웨어는 서버에서 실행이 됩니다. 이 환경은 객체나 와 같은 클라이언트 측 웹 API에 접근할 수 없습니다. 따라서 에 저장된 사용자 인증 상태 정보는 미들웨어에서 확인할 수 없으며, 페이지 접근 권한 제어 로직을 미들웨어에서 수행하는 것이 불가능했습니다. 해결 방안 사용자 로…