🚗 Backend Toy Project/Photogram

[Photogram] 구독하기 - 구독 모달

이번에는 구독 모달에 사용자가 구독한 구독 정보가 리스트 형태로 보여지며 해당 모달에서도 구독하기와 구독취소가 가능하도록 구현해보려고 합니다. 📝 DTO 우선 구독 정보를 리스트로 나열하기 위해 필요한 항목들을 아래와 같이 구현해보았습니다. package com.cos.photogram.web.dto.subscribe; ... @Builder @NoArgsConstructor @AllArgsConstructor @Data public class SubscribeDto { private BigInteger id; private String username; private String profile_image_url; private Integer subscribe_state; private Integer e..

[Photogram] 구독하기 - 기능 구현

지난 시간까지는 구독정보의 뷰 렌더링까지만 진행하였고 이번에는 실제 구독하기와 구독취소 기능을 구현해보려고 합니다. 사실 기능은 이미 이전 시간에 모두 구현해놓았으며 우리는 js 파일에서 해당 기능을 호출하기만 하면 됩니다. 📝 Javascript js 파일에 아래와 같은 함수를 구현해주었습니다. // (1) 유저 프로파일 페이지 구독하기, 구독취소 function toggleSubscribe(toUserId, obj) { if ($(obj).text() === "구독취소") { $.ajax({ type:"DELETE", url: "/api/subscribe/" + toUserId, dataType: "json" }).done(resp => { $(obj).text("구독하기"); $(obj).toggl..

[Photogram] 구독하기 - 뷰 렌더링

이번 시간에는 프로필 페이지의 구독기능을 구현하고 구독정보를 뷰에 렌더링해보겠습니다. 📝 DTO 우선 이전 시간에 구현하였던 UserProfileDto에 새로운 변수를 추가해주었습니다. package com.cos.photogram.web.dto.user; ... @Data public class UserProfileDto { private User user; private boolean pageOwnerState; private boolean subscribeState; private int imageCount; private int subscribeCount; } subscribeState는 구독 여부를 나타내며 subscribeCount는 구독한 수를 나타냅니다. 📝 Repository 다음으로 S..

[Photogram] 프로필 페이지 - 뷰 렌더링

이번에는 저번 시간에 이어서 사용자가 저장한 이미지를 View 페이지에 뿌려 보여줄 수 있도록 구현해보려고 합니다. 여기서 양방향 매핑 개념이 나오게 됩니다. 📝 Entity 우선 User 객체에 Image 객체를 저장하는 리스트를 새로 구현해주었습니다. package com.cos.photogram.domain.user; ... @Data @Builder @NoArgsConstructor @AllArgsConstructor @Entity public class User { ... @OneToMany(mappedBy = "user") @JsonIgnoreProperties({"user"}) private List images = new ArrayList(); ... } 해당 변수는 연관관계의 주인이 아니..