🚗 Backend Toy Project/Photogram

[Photogram] 프로필 사진 변경

이번 시간에는 사용자가 자신의 프로필 사진을 변경할 수 있도록 하는 기능을 구현해보겠습니다. 📝 View 우선 자신의 프로필 사진만 변경할 수 있도록 제한하기 위해 View 페이지를 아래와 같이 구현하였습니다. 즉, 자신의 프로필 페이지가 아니라면 아래와 같은 사진 업로드 모달이 보이지 않게 될 것입니다. 📝 Javascript 이후 ajax 통신을 통해 이미지를 서버에 저장하기 위해 js 파일에 아래와 같은 함수를 구현해주었습니다. // (4) 유저 프로파일 사진 변경 (완) function profileImageUpload(principalId) { $("#userProfileImageInput").click(); $("#userProfileImageInput").on("change", (e) => ..

[Photogram] 인기 페이지 구현

이번시간에는 사용자가 좋아요 표시를 한 글들을 좋아요가 많은 순서대로 출력하여 보여주는 페이지를 구현해보려고 합니다. 📝 Repository 이를 위해 먼저 아래와 같이 네이티브 쿼리를 작성해주었습니다. package com.cos.photogram.domain.image; ... public interface ImageRepository extends JpaRepository{ ... @Query(value = "SELECT i.* FROM image i INNER JOIN (SELECT image_id, COUNT(image_id) like_count FROM likes GROUP BY image_id) c ON i.id = c.image_id ORDER BY like_count DESC", nati..

[Photogram] 좋아요 구현하기

이번 시간에는 스토리 페이지에서 자신이 구독한 사용자의 글에 좋아요를 마킹할 수 있는 기능을 구현해보겠습니다. 📝 Like 우선 아래와 같이 좋아요 객체를 구현하였습니다. package com.cos.photogram.domain.likes; ... @Data @Builder @NoArgsConstructor @AllArgsConstructor @Table( //데이터베이스에서 두 개의 컬럼에 대해 unique 제약조건 설정 uniqueConstraints = { @UniqueConstraint( name = "likes_uk", columnNames = {"image_id", "user_id"} ) } ) @Entity public class Likes { @Id @GeneratedValue(strat..

[Photogram] 스토리 페이지

이번 시간에는 아래와 같이 본인이 구독한 사용자가 업로드한 글을 바로 볼 수 있는 스토리 페이지를 구현해보려고 합니다. 해당 페이지를 구성하고 있는 요소들을 잠깐 살펴보면 우선 제일 위에 사용자 정보가 드러나고, 업로드한 사진, 사진 설명, 좋아요 수, 댓글 정보가 나타나고 있습니다. 아직 좋아요와 댓글 기능을 구현하지 않았으니 이를 제외한 나머지만으로 먼저 구현해보도록 하겠습니다. 📝 Repository 우선 해당 페이지에는 현재 접속중인 사용자가 구독중인 사용자의 글이 보여져야 하기 때문에 우리는 아래와 같은 쿼리를 작성할 수 있습니다. package com.cos.photogram.domain.image; ... public interface ImageRepository extends JpaRepo..