검색 기능은 간단하다. querydsl의 contain기능을 사용하여 리스트를 뽑아낸다. 1. PostRepositorySupport 수정 public List getPosts(String query) { return queryFactory.selectFrom(post).where(post.content.contains(query)).orderBy(post.modifiedDate.desc()).fetch(); } - post 테이블에서 content 내용 중 query를 포함하는 게시글들의 목록을 반환한다. 2. PostService, Controller 수정 @GetMapping("/posts/search") public ResponseEntity getSearchPostList(@CurrentUser..

프론트는 갈수록 점점 개판이 되어간다. 프론트에서 stomp로 구독후 채팅내용을 수정하면 계속 서버로 info정보를 요청하던데 왜그런지 문제를 찾지 못해서 오래걸렸다. 1. ChatRoomList 작성 const ChatRoomList = () => { const [chatRoomList, setChatRoomList] = useState(); const [chatRoom, setChatRoom] = useState(); const [targetEmail, setTargetEmail] = useState(); const [clickState, setClickState] = useState(); const onChatRoom = (idx) => { setChatRoom(chatRoomList[idx].ch..

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

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..

게시글 좋아요 기능을 구현하는 로직은 다음과 같다. 헤당 게시글과 좋아요를 누른 유저의 정보를 DB에 저장하며, 그 정보를 토대로 좋아요를 누른 상태와 아닌 상태를 구분하는 것이다. 1. PostDto 수정 기존의 PostDto에서 추가적으로 게시글에 대한 게시글 좋아요를 누른 상태인지를 반환해주는 like라는 불리언 변수를 추가해주었다. @Data public class PostDto { private Long postId; private UserDto user; private String content; private List postFileList; private boolean like; @Builder public PostDto(Long postId, UserDto user, String cont..

앞에서 말했듯이, 본인과 팔로잉한 유저들의 게시글들을 보여주는 홈화면을 제작한다. 1. HomeContainer 작성 const HomeContainer = () => { const [postList, setPostList] = useState(); // 게시글 리스트 const [postIndex, setPostIndex] = useState(); // 게시글의 파일 순서에 대한 처리를 위한 배열 useEffect(() => { withJwtAxios.get('/post-list') .then((res) => { setPostList(res.data.postList); setPostIndex(new Array(res.data.postList.length).fill(0)); }); }, []) // 왼쪽..