🚗 Backend Toy Project/Photogram

[Photogram] 연관 검색어

이번에는 사용자가 입력한 검색 키워드에 따라 해당 키워드와 연관되어 있는 검색 결과를 미리 보여주는 연관 검색어 기능을 구현해보았습니다. 제가 생각한 연관 검색어 기능의 요구사항 아래와 같습니다. 첫 번째, 계정과 태그에 따라 분류하여 연관 검색어를 출력할 수 있어야 한다. 두 번째, 연관 검색어를 클릭할 시 해당 계정 또는 게시글 검색이 이루어져야 한다. 세 번째, ESC 키를 누르거나 페이지의 다른 영역을 클릭할 시 연관 검색어 창이 닫혀야 한다. 📝 jsp, js 해당 기능은 구현하는데에는 서버 쪽 구현보단 클라이언트 쪽 구현이 복잡하였습니다. 아래 코드에서 클라이언트 쪽 구현을 살펴볼 수 있습니다. 계정 태그 let input = document.getElementById("search"); le..

[Photogram] 실시간 알림

이번에는 자신이 구독한 사용자가 새로운 글을 업로드할 경우 실시간으로 알림이 보내지도록 구현해보았습니다. 해당 기능은 서버 -> 클라이언트 방향으로만 이루어지는 단방향 통신만으로도 충분히 구현 가능했기 때문에 SSE(Server-Sent-Events)를 이용하였습니다. 📝 js 우선 클라이언트 쪽 구현 코드입니다. function storyLoad() { $.ajax({ url: `/api/image?page=${page}`, dataType: "json" }).done(resp => { console.log(resp); resp.data.content.forEach((image) => { let item = getStoryItem(image); $("#storyList").append(item); })..

[Photogram] 해시태그 기능 추가

게시글 업로드 시 해시태그를 추가할 수 있도록 구현해보았습니다. 추가된 해시태그는 이후 게시글 하단에 표시되게 되며 이후에 해당 태그를 이용하여 태그 검색 기능도 추가해볼 예정입니다. 📝 upload.jsp 아래 코드는 이미지 파일 업로드를 위한 폼 태그를 구현한 부분으로, 기존에 사용하던 코드입니다. 추가 업로드 우선 위 코드를 아래와 같이 수정해주었습니다. 이는 이후 추가될 해시태그 목록들을 FormData 객체에 저장하여 ajax를 통해 서버로 전송하기 위함입니다. 추가 업로드 📝 upload.js ajax 요청과 해시태그 추가, 삭제 로직은 아래와 같이 구현하였습니다. $(function() { $("#uploadBtn").on("click", function() { upload(); }); })..

[Photogram] 로그인 실패 처리

회원가입의 경우 유효성 검사에 실패했을 경우 사용자에게 간단하게 메시지를 보여주는 방식으로 회원가입 실패 처리를 구현해놓았지만 로그인의 경우 이러한 처리가 없어 로그인 실패 처리를 구현해주었습니다. 로그인 실패의 경우 회원가입 실패 시의 처리와는 달리 컨트롤러에서 발생하는 예외가 아닌 서비스 단에서 발생하는 예외였기 때문에 @ControllerAdvice와 @ExceptionHandler를 이용한 처리 방식으로는 제대로 동작하지 않았습니다. 따라서 SecurityConfig 클래스에 failureHandler() 메소드를 추가해줌으로써 이를 구현해주었습니다. 📝 SecurityConfig package com.cos.photogram.config; ... @RequiredArgsConstructor @E..