SpringBoot + MariaDB 9-2 기타기능 마이페이지 사진 좋아요 개수

좋아요 갯수 표시

마이페이지에서 사진에 마우스 호버시 하트와 카운트 개수가 나오는데 

카운트 개수가 잘 나오도록 만들어보자.

 

profile.jsp

<c:forEach var="image" items="${dto.user.images }"> <!-- El표현식 변수명을 적으면 get함수가 자동 호출된다. -->
    <div class="img-box">
        <a href=""> <img src="/upload/${image.postImageUrl }" />
        </a>
        <div class="comment">
            <a href="#" class=""> <i class="fas fa-heart"></i><span>${image.likes.size() }</span>
            </a>
        </div>
    </div>
</c:forEach>

프로필페이지에 이미지를 불러오는 코드를 보니 images클래스를 불러오고있다 

dto는 UserProfileDto 프로필에 데이터를 한번에 가져오기위해 만들었던 클래스이다

public class UserProfileDto {

	private boolean PageOwnerState;
	private User user;
	private boolean subscribeState;
	private int subscribeCount;
	private int imageCount;
}

 

위 클래스가 dto이고 dto의 user의 멤버필드중 images로 forEach하여 사진을 출력하고있다 

	@OneToMany(mappedBy = "user", fetch = FetchType.LAZY) 
	@JsonIgnoreProperties({"user"})
	private List<Image> images;

 

그렇다면 images맴버의 image클래스 보면 저번에 만들었던 likdeCount라는 멤버를 소환하면 되지않나요? 정답이다

 

여기서 중요한점은 보통 밑과같이 서비스에서 코드를 작성한뒤 likeCount에 set을 해주겠지만 내가 만든 코드를 잘 이해하고 있다면 만들필요없이 기존의 것을 가져와 넣어주기만 하면되니 얼마나 편한가

		userEntity.getImages().forEach((image)->{
			image.setLikeCount(image.getLikes().size());
		});

 

프론트는 출력만

하지만 프론트는 출력만하고 연산하는것을 싫어한다면 밑과 같이 서비스를 작성해주고 

@Transactional(readOnly = true)
public UserProfileDto 회원프로필(int pageUserId,int principalld) {
    UserProfileDto dto = new UserProfileDto();
    // select * from image where userid = :userId;
    User userEntity = userRepository.findById(pageUserId).orElseThrow(()->{
        throw new CustomException("해당 프로필 페이지는 없는 페이지입니다.");
    });
    dto.setUser(userEntity);
    dto.setPageOwnerState(pageUserId == principalld); 
    dto.setImageCount(userEntity.getImages().size());

    int subscribeState =  subscribeRepository.mSubScribeState(principalld, pageUserId);
    int subscribeCount = subscribeRepository.mSubscribeCount(pageUserId);

    dto.setSubscribeCount(subscribeCount);
    dto.setSubscribeState(subscribeState == 1);

    userEntity.getImages().forEach((image)->{
        image.setLikeCount(image.getLikes().size());
    });

    return dto;
}

아까 위에서 봤던 size로 LikeCount에 값 입력해줌 image에 왜 이렇게 데이터를 넣어줘야 나오냐면 LikeCount데이터는 DB에 값을 저장한게 아니라 우리가 값을 넣도록 설정하였기때문이다.

 

jsp에서연산이아닌 출력만하게 값불러오기

<c:forEach var="image" items="${dto.user.images }"> <!-- El표현식 변수명을 적으면 get함수가 자동 호출된다. -->
    <div class="img-box">
        <a href=""> <img src="/upload/${image.postImageUrl }" />
        </a>
        <div class="comment">
            <a href="#" class=""> <i class="fas fa-heart"></i><span>${image.likeCount}</span>
            </a>
        </div>
    </div>
</c:forEach>

위와다르게 size()함수를 이용해 연산작없을 없애고 출력만 하게 한모습이다.