화면
개발 피드 - 게시글 작성, 수정 및 삭제
.gif&blockId=7789b6e5-99f2-4060-9adc-516ee7a28f0c)
QnA 피드 - 답변 작성
.gif&blockId=c9d6700b-56df-424f-ab18-3353be7ae85d)
QnA 피드 - 답변 채택
배경
유저들이 많은 정보를 접할 수 있고 서로 궁금증을 해결할 수 있는 하나의 공간을 제공하고 싶었습니다.
구현한 기능
•
BE
단순하지만 절대 단순하지 않았던 - 게시글 조회
CRUD가 단순하다 생각하고 접근했지만, 데이터의 연관 관계가 많아질수록 데이터를 조회하는데 더 많이 복잡해지고 성능에 문제가 생길 수 있다는 것을 알게 되었습니다.
가장 쉬웠지만 결국 문제가 발생한 - 게시글 삭제
처음에는 게시글의 삭제를 STATUS를 사용하여 데이터만 변경하여 삭제를 했습니다.
이후 정책이 변경되었는데, 실제 상용화 서비스를 운영하기 전까지는 데이터를 직접 삭제해 주는 것으로 변경되었습니다.
정책을 변경하여 데이터를 삭제해 주려고 하니 DB의 특징 중 하나인 참조 무결성으로 인하여 애를 먹었고 자식 테이블에 Cascade를 설정하여 삭제를 구현했습니다.
댓글 조회 기능
댓글 기능에도 무한 스크롤이 적용되어야 해서 JPA가 만드는 Slice가 필요했어요
그런데 댓글 핀 기능 때문에 따로 댓글 리스트를 생성해야 해서 굉장히 애먹었어요 !
결국 Slice 객체를 JPA Slice 정보와 직접 생성한 댓글 리스트를 바탕으로 새로 만들어서 반환하는 방식으로 우회했어요
댓글 삭제 기능
recomment와 comment pin의 cascade 조건 때문에 댓글이 삭제 되지 않았어요
처음엔 엔티티 클래스에 cascade를 전부 명시해 해결했는데, 사실 comment에는 comment pin 객체가 필요 없어 좋지 않은 방향인 것 같아 db 레벨에서 fk 제약 조건을 거는 방향으로 수정했어요
•
FE
폼데이터 형식을 활용한 게시글 생성
파일 업로드를 구현할 때, 폼을 통해서 파일을 등록해서 전송합니다.
웹 브라우저가 보내는 HTTP 메시지는 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송합니다.
기존 데이터를 활용한 게시글 수정
게시글 수정시, 기존의 게시글 데이터를 불러와 input default value로 적용합니다.
새로고침시 데이터가 undefined되는 것을 방지하기 위해 useEffect를 통해, 데이터 isLoading의 상태가 false가 되며 refetching이 완료되는 시점에 다시 데이터를 적용하도록 설정했습니다.
게시글 작성, 수정시 새로고침 및 뒤로가기 방지
게시글 수정 중 새로고침이나 뒤로가기 버튼 클릭시, 수정중인 데이터가 손실될 수 있다는 메세지를 담은 컨펌 모달창을 띄웁니다.
게시글 포스트에 의한 상태변경 실시간 반영
게시글에서 게시글 수정 삭제를 포함한 좋아요, 스크랩, 팔로우, 댓글 등의 이벤트가 발생했을 때, 변경되는 상태를 반영한 화면을 실시간으로 반영해서 보여줍니다.
Swipeable list를 활용한 댓글 상단 고정 및 삭제 구현
본인이 작성한 게시글에 달린 댓글은 게시글작성자에 의해 고정(오른쪽으로 밀기) 및 삭제(왼쪽으로 밀기)될 수 있습니다.
Q & A 게시글에서의 채택 기능 구현
질문 작성자가 답변을 채택하면, 채택된 답변은 상단에 고정되며, 더이상의 답변을 추가하거나, 기존에 작성된 질문 및 답변의 수정 및 삭제가 불가능해집니다.
유저간 팔로우 팔로잉 기능 구현
원하는 유저를 팔로우하고, 팔로우한 유저의 게시글 알림등을 받아볼 수 있습니다.