Next.js 2

[Next.js] SSE 브라우저 연결 오류 해결하기 (Nginx)

이번 트러블슈팅을 통해 단순히 코드 레벨에서의 문제 해결에 그치지 않고, 전체 시스템 흐름과 인프라 환경까지 통합적으로 이해하는 시야가 필요함을 체감했습니다. 실제로 초기에는 FE와 BE 사이의 요청 · 응답 구조나 토큰 인증 방식에 문제가 있을 것이라 판단해 양측 코드를 점검했지만, 최종 원인은 클라우드 인프라(Nginx) 설정의 누락이었습니다.이 경험을 통해 클라이언트 개발자의 시야를 넘어 전체 시스템 레이어에 대한 이해와 협업 능력이 얼마나 중요한지 절실히 느꼈고, 앞으로도 비슷한 문제가 생길 때 코드 → 브라우저 → 네트워크 → 인프라 전 과정을 유기적으로 살펴보는 습관을 갖고자 합니다 :) 진행 중인 프로젝트 TUNING은 사용자 간 매칭 결과를 뉴스 속보 형태로 전달하는 조직 기반 소셜 매칭 ..

[Next.js] App Router에서 조건부 UI 숨김 시 발생한 hydration 오류

이번 트러블슈팅을 통해 단순한 UI 조건 처리라도 SSR 환경에서는 예기치 못한 예외 상황을 만들 수 있다는 사실을 알게 되었습니다. 초반에는 단순한 콘솔 경고 메시지 정도로 넘어갈 뻔했지만, 이러한 작은 오류조차 사용자 경험이나 퍼포먼스에 직접적인 영향을 줄 수 있다는 점을 다시 깨달았습니다. 이번 경험을 통해 앞으로는 에러 로그를 결코 가볍게 넘기지 않고, 꼼꼼히 확인하는 습관을 가지고 개발하려고 합니다! Next.js의 App Router 기반 프로젝트인 TUNING 서비스를 구현하면서 예상치 못한 hydration error를 마주했다. UI 조건부 컴포넌트 숨김 처리를 진행하기 위해 처음에는 단순히 usePathname() 기반으로 페이지에 따라 처리를 진행했지만, 이 과정에서 클라이언트 사이드..