간단한 메신저를 구현해 보았다. 기존의 api는 http 요청을 보내면 서버는 그 요청에대한 답만 해주면 되지만, 메신저는 내가 다른사람에게 메신저를 보냇을 때 서버가 나에게만 응답을 보내는 것이 아닌, 내가 메신저 보낸 사람들에게 모두 응답을 보내주어야 한다. 기존의 http 프로토콜로는 이를 구현할 수 없기 때문에, 웹 소켓이라는 새로운 프로토콜을 적용하였다. 또한, 웹 소켓은 http처럼 정해진 데이터 양식이 없기 때문에, Stomp라는 프로토콜을 사용하여 데이터 양식을 정의하였다. 1. 관련 라이브러리 추가 //websocket implementation 'org.springframework.boot:spring-boot-starter-websocket' implementation 'org.spr..

프로필 탭은 본인의 프로필 정보를 확인할 수 있는 부분과, 본인이 게시한 게시글들을 볼 수 있는 부분으로 나누었다. 1. ProfileContainer 작성 const ProfileContainer = () => { const userDetail = useSelector(state => state.userDetail); const navigate = useNavigate(); const [profileCount, setProfileCount] = useState( {board: 0, follower: 0, follow: 0} ); const [postList, setPostList] = useState(); const [postIsOpen, setPostIsOpen] = useState(); const ..

프로필 관련 내용은 기존에 만들어진 Entity를 활용하는 것이므로 따로 만들 Entity는 없다. 먼저 사용할 Dto부터 생성한다. 1. Profile 관련 Dto 생성 @Data public class ProfileCountResponseDto { private Long board; private Long follower; private Long follow; @Builder public ProfileCountResponseDto(Long board, Long follower, Long follow) { this.board = board; this.follower = follower; this.follow = follow; } } @Data public class ProfileUpdateRequest..

1. PostRender에서 채팅 아이콘 눌렀을 때, 모달창이 뜨도록 구현 {/* 게시글의 좋아요, 댓글들을 보여주는 부분 */} { !post.like ? setLike(post.postId)}/>: deleteLike(post.postId)} style={{color: 'red'}}/> } onClickChat(idx)}/> 좋아요 갯수 , 댓글 갯수 2. PostChat.js 작성 const PostChat = (props) => { const ChatModalStyle = { overlay: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "rgba(255, 255, 255, 0.45)", zIndex: ..

1. PostChat Entity와 PostChatRepository 생성 @Entity @Data @NoArgsConstructor public class PostChat extends BaseTimeEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "post_chat_id") private Long id; @ManyToOne @JoinColumn(name = "post_id") private Post post; @ManyToOne @JoinColumn(name = "user_id") private User user; private String content; @Builder public PostChat(Pos..

기존 HomeContainer 작성 부분의 좋아요 버튼 구현 부분을 상세화한다. 1. HomeContainer 수정 const setLike = (postId) => { withJwtAxios.get("/like", {params: {postId: postId}}) .then((res) => { setPostList(res.data.postList); }); } const deleteLike = (postId) => { withJwtAxios.delete("/like", {params: {postId: postId}}) .then((res) => { setPostList(res.data.postList); }); } return ( ... { !post.like ? setLike(post.postId)}..