게시물 관리 인터랙션 개선 및 프론트엔드 로직 추상화하기

블로그 프로젝트 트리드 를 개발하며 사용자 경험(UX)의 핵심인 게시물 관리 기능을 고도화했습니다. 기존의 페이지 단위 렌더링 방식에서 벗어나, 비동기 통신을 통한 동적 UI 업데이트와 공통 로직의 외부화를 통해 코드 유지보수성을 확보한 과정을 공유합니다.

1. 게시물 렌더링 로직의 통합 및 추상화

초기 구현 단계에서는 메인 피드 페이지와 게시물 상세 페이지에서 각각 유사한 자바스크립트 로직이 중복되어 존재했습니다. 게시물 카드(Postcard)를 생성하고 목록에 추가하는 과정이 파편화되어 있어 기능 수정 시 두 곳의 코드를 동시에 변경해야 하는 비효율이 있었습니다.

이를 해결하기 위해 postmanager.js 를 도입하여 전역 상태 및 공통 함수를 중앙 집중화했습니다. window.blogState 객체를 통해 로그인 상태, 사용자 식별자, 좋아요 목록을 관리함으로써 각 페이지는 자신의 데이터와 설정값만 선언하면 되도록 간소화했습니다.

또한 게시물 목록을 불러오는 비동기 함수인 loadPosts를 일반화하여, 요청 경로와 컨테이너 ID 정보만 전달하면 메인 목록과 댓글(리트리) 목록 모두에서 동일한 로직을 재사용할 수 있도록 설계했습니다.

2. 페이지 전환 없는 동적 CRUD 인터랙션 구현

사용자 경험을 저해하는 페이지 새로고침을 최소화하기 위해 DOM 조작 기반의 업데이트 방식을 적용했습니다.

• 동적 삭제: 게시물 삭제 요청 성공 시, 서버로부터의 리다이렉트 대신 200 OK 응답을 수신하고 자바스크립트에서 해당 카드 요소를 즉시 제거했습니다. 이때 부드러운 전환을 위해 투명도 애니메이션을 추가하여 삭제 피드백을 강화했습니다.

• 즉시 게시: 빠른 작성 창을 통해 등록된 신규 게시물은 API 응답 데이터를 기반으로 즉시 Postcard 인스턴스로 변환되어 목록 최상단에 삽입됩니다. 이 과정에서 불필요한 전체 목록 재조회를 방지하여 서버 부하를 줄이고 체감 속도를 높였습니다.

3. 하이버네이트 지연 로딩(Lazy Loading) 예외 해결

비동기 API 요청을 처리하는 과정에서 org.hibernate.LazyInitializationException이 발생했습니다. 게시물 생성 직후 DTO로 변환하는 시점에 연관된 사용자(BlogUser)와 부모 게시물(Post) 정보가 초기화되지 않은 프록시 상태였기 때문입니다.

이 문제는 영속성 컨텍스트의 범위를 넘어서는 시점에 지연 로딩된 필드에 접근하려 할 때 발생합니다. 이를 해결하기 위해 엔티티의 ID만 가져오는 getReferenceById 대신, 필요한 시점에 명시적으로 조인 쿼리를 수행하거나 실제 엔티티를 로드하는 findById 방식을 채택하여 데이터 무결성을 보장했습니다.

4. UI/UX 세부 최적화: 피드와 상세 뷰의 분리

목록 형태의 피드 뷰에서는 게시물의 길이를 일정 수준으로 제한하고 페이드 효과를 적용하여 가독성을 높였습니다. 반면, 상세 페이지(Viewer)에서는 게시물의 모든 내용이 한눈에 들어와야 하므로 동일한 Postcard 클래스를 사용하면서도 showFullContent 옵션을 통해 높이 제한과 페이드 효과를 조건부로 해제했습니다.

CSS 측면에서는 상세 페이지 전용 컨테이너 클래스를 정의하고 !important 키워드와 구체적인 선택자를 조합하여 기존의 max-height 제한을 확실히 무력화했습니다. 이를 통해 하나의 컴포넌트로 서로 다른 요구사항을 가진 뷰를 효과적으로 지원할 수 있었습니다.

5. 데이터 매핑 동기화 이슈 해결

좋아요(Like) 기능 구현 시 서버의 응답 객체 구조와 클라이언트의 데이터 참조 경로가 일치하지 않아 UI에 값이 올바르게 반영되지 않는 문제가 있었습니다. 서버에서 반환하는 공통 응답 DTO인 ResponseDto 내의 실제 데이터 위치를 파악하여 자바스크립트 로직을 수정했습니다. 단순한 클래스 토글 방식 대신 서버가 보내주는 상태 메시지(liked/disliked)를 기준으로 UI를 동기화함으로써 다중 기기 환경에서도 일관된 상태를 유지할 수 있도록 개선했습니다.

이번 작업을 통해 프론트엔드 로직의 결합도를 낮추고 백엔드와 클라이언트 사이의 데이터 흐름을 명확히 정의할 수 있었습니다. 앞으로도 기술적 채무를 선제적으로 해결하며 완성도 높은 서비스를 구축해 나갈 예정입니다.