초기에는 사용자 닉네임을 간편하게 조회하기 위해, NextAuth.js의 jwt 및 session 콜백을 커스텀하여 세션 객체에 닉네임을 포함시켰습니다.

하지만 이후 닉네임 변경 기능이 추가되면서, 세션이 갱신되기 전까지 변경 사항이 반영되지 않는 한계가 드러났고

이에 따라 닉네임은 세션에 저장하지 않고, 사용자 ID를 기준으로 데이터베이스에서 실시간으로 조회하는 방식으로 전환했습니다.

이를 통해 변경 가능성이 있는 정보는 세션보다는 데이터베이스를 통한 조회 방식이 더 안정적이고 일관된 접근임을 실무적으로 체감할 수 있었습니다.

초기에는 사용자가 게시글 신고 버튼을 누르면, 해당 게시글의 is_reported 필드를 즉시 true로 변경하는 방식으로 구현했습니다.

하지만 단 한 명의 신고만으로 게시글이 신고 처리되는 방식은 신뢰성이 떨어진다고 판단해, 일정 수 이상의 신고가 누적될 때만 is_reported 값을 변경하도록 로직을 개선했습니다.

이를 위해 신고한 사용자들의 ID를 배열로 저장하고, 동일 사용자의 중복 신고를 막는 검증을 추가했으며, 해당 배열의 길이가 5 이상일 때만 게시글이 신고 처리되도록 구현했습니다.

이 과정을 통해 단순한 기능 구현을 넘어, 사용자 행동 기반의 조건 처리와 데이터 구조 설계 경험을 쌓을 수 있었습니다.

• 여행 날짜 별로 활동 시작 시간과 출발지·도착지·여행지 목록을 편집할 수 있습니다.

• 추천 장소 목록을 확인하거나 네이버 지도 검색을 통해 장소를 탐색할 수 있고 여행지에 추가할 수 있습니다.

• 여행지 별로 메모를 입력하거나 머무는 시간을 입력할 수 있으며, 드래그 앤 드롭으로 여행지 방문 순서를 변경할 수 있습니다.

• 줌 인, 줌 아웃이 가능한 네이버 지도를 제공합니다.

• 여행지 추가 시 자동으로 지도에 마커로 표시되며, 마커 클릭 시 장소 정보를 확인할 수 있습니다.

• 날짜 별로 동선을 시각화하여 표시하고 여행지 방문 순서에 따른 마커 번호를 표시합니다.

• 여행 계획 편집 과정에서 초대 링크를 복사한 뒤 공유하여, 다른 사용자를 초대할 수 있습니다.

• 초대된 사용자들과 동시에 여행 계획을 편집하고 변경 사항을 실시간으로 공유할 수 있습니다.

• 백엔드 채팅 서버와 연동해 실시간으로 메시지를 송수신하고, 전달받은 데이터를 가공하여 채팅 UI에 반영했습니다.

• 동선 최적화 기능 사용 시 TMAP 경유지 최적화 API를 활용하여, 최적화된 동선을 바탕으로 방문 순서가 자동으로 재정렬됩니다.

• 장소별 도착시간이나 출발 시간등의 세밀한 결과를 확인할 수 있습니다.

여행 계획 데이터를 단일 배열로 관리하면서 동시에 동일 데이터를 편집할 때 충돌이 발생했습니다.

이를 해결하기 위해 Yjs 문서를 중첩 Map 구조로 변경하여 관리했고, 충돌 없이 세밀한 동시 제어가 가능해졌습니다.

이 경험을 통해 사용자 상호 작용을 고려한 데이터 구조 설계의 중요성을 느낄 수 있었습니다.

참여 중인 사용자의 아이콘을 상단에 표시하는 기능에서 실시간성이 보장되지 않는 문제가 있었습니다.

이를 아이콘 목록까지 Yjs 문서로 관리하고 y-websocket을 적용하여 안정적인 실시간 동기화를 구현했습니다.

• IntersectionObserver 기반의 무한 스크롤 기능을 도입하여 콘텐츠 탐색 흐름을 자연스럽게 개선했습니다.

• 조회수 기반 인기 영상 목록과 이전/다음 영상 목록을 제공하여 콘텐츠 접근성과 사용자 몰입도를 높였습니다.

• 포토 페이지에서 이미지를 클릭하면 슬라이드 모드로 전환되어 전체 사진을 순차적으로 탐색할 수 있습니다.

• 좌우 드래그를 통한 이전/다음 이미지 전환이 가능하며 확대·축소 및 5초 간격의 자동 이미지 전환도 가능합니다.

• 로그인한 사용자는 실시간 응원 오픈채팅에 참여할 수 있습니다.

• 게시글 제목 또는 내용으로 키워드를 검색해 원하는 게시글을 찾을 수 있습니다.

• 로그인한 사용자는 게시글과 댓글을 작성, 수정, 삭제할 수 있습니다.

• 게시글 작성 시 최대 3장의 이미지를 첨부할 수 있습니다.

• 마이페이지에서 닉네임 변경이 가능하며 좋아요한 영상 목록을 확인할 수 있습니다.

외부 이미지 리소스가 403 오류로 차단되는 현상을 CORS 정책 문제로 판단하고, next/image 컴포넌트가 서버 측에서 이미지를 프록시 요청하는 특성을 활용해 기존 img 태그를 전부 next/image 컴포넌트로 교체할 것을 제안했습니다.

그 결과, 별도의 서버 설정 없이도 문제를 팀 내부적으로 해결할 수 있었고, 이미지 최적화 기능을 통한 성능 개선 효과도 함께 얻을 수 있었습니다.

루트 레이아웃에 위치한 헤더 컴포넌트가 cookies() 함수를 사용해 서버 측에서 세션을 조회하면서,

정적으로 렌더링될 수 있는 페이지까지 모두 동적으로 렌더링되는 문제가 발생했습니다.

이를 해결하고자 세션 조회를 클라이언트 측으로 전환해 정적 렌더링을 복원했지만, 초기 렌더링 시점과 실제 로그인 상태 간의 불일치로 인해 UI 깜빡임 및 로그인 상태 오표시와 같은 부작용이 발생했습니다.

결국 로그인 여부에 따라 헤더 UI가 달라지는 구조에서는 정적 렌더링의 이점보다 정확한 세션 반영을 통한 일관된 사용자 경험이 더 중요하다고 판단하여, 모든 페이지를 SSR로 전환하고 서버 측 세션 조회 방식을 유지했습니다.

• 아이템 레벨, 서버 등을 필터링하여 구인 글을 조회할 수 있습니다.

• 캐릭터 닉네임을 기반으로 조회된 정보를 활용하여 구인 글을 작성할 수 있습니다.

• 구인 글 작성 시 입력했던 비밀번호를 통해 수정 및 삭제가 가능합니다.

• 신고하기 버튼을 통해 신고할 수 있습니다.

캐릭터 닉네임을 기반으로 검색하여 해당 캐릭터의 스펙 관련 정보를 확인할 수 있습니다.

해당 캐릭터가 작성한 구인 글 목록이 함께 표시됩니다.

캐릭터 닉네임을 기반으로 공격대에 추가하여 파티 별 시너지 조회가 가능합니다.

드래그 앤 드롭을 통해 파티 변경이 가능합니다.

로스트아크 Open API는 분당 호출 제한이 존재하며, 공식 문서에서도 이를 고려한 캐싱 전략을 권장하고 있습니다.

이에 따라 API 응답 데이터를 MongoDB에 저장하고, 저장된 데이터의 업데이트 시간을 기준으로 외부 API를 호출할지 여부를 판단하는 구조로 개선했습니다. 이를 통해 불필요한 외부 요청을 줄이고, 호출 제한을 효율적으로 관리할 수 있었습니다.

모바일 환경에서 Headless UI의 특정 컴포넌트가 화면 높이를 초과하면서 옵션 리스트가 무한 렌더링되는 문제가 발생했습니다.

원인을 분석해 옵션 리스트의 최대 높이를 제한하고, 동일한 값을 선택 시 불필요한 상태 업데이트를 방지하여 문제를 해결했습니다.

초기에는 사용자가 직접 삭제하거나 일정 횟수 이상 신고된 모집 글을 데이터베이스에서 물리적으로 삭제하는 방식을 사용했습니다. 그러나 운영 과정에서 삭제된 글의 기록을 확인할 수 없어 불편함이 발생했습니다.

이를 개선하기 위해 is_deleted라는 상태 필드를 추가하여, 실제 데이터는 보존하되 삭제 여부만 표시하는 논리적 삭제 방식으로 변경했습니다. 이후 클라이언트는 이 값을 기준으로 삭제된 글을 화면에서 노출하지 않도록 처리했습니다.

특정 필드에서 빈 값을 허용하지 않음에도 불구하고, 콘솔 조작을 통해 빈 데이터가 저장되는 문제가 발생했습니다.

당시 react-hook-form과 zod를 통합하여 클라이언트와 서버 모두 동일한 스키마로 유효성 검사를 수행하고 있었으나, 스키마 정의가 충분히 엄격하지 않았던 것이 원인이었습니다.

이에 따라 스키마를 보다 정밀하게 작성하여, 허용되지 않는 값이 저장되지 않도록 검증을 강화함으로써 문제를 해결했습니다.