전체 글102 [Spring Data JPA] 좋아요 구현하기 -3 좋아요 뷰 렌더링, 카운트 렌더링 좋아요의 뷰를 구현하고자 한다. 빈 하트를 클릭하면 빨갛게 채워진 하트가 되어야 하고, 새로고침이나 로그인 시 이전에 좋아요 했던 인원들은 이미 빨갛게 채워진 하트가 되어있어야 한다. 즉 이전에 포토 스토리 뷰를 ajax로 렌더링 할 때, DB에서 좋아요의 현황도 가져와야 한다. story.js function storyLoad() { $.ajax({ type:"get", url:`/api/image?page=${page}`, dataType:"json" }).done(res =>{ console.log(res, "성공"); res.data.content.forEach((image) =>{ let storyItem = getStoryItem(image); $("#storyList").append(stor.. 2023. 1. 13. [JPA] ERR_INCOMPLETE_CHUNKED_ENCODING 에러 원인 : 무한 참조로 인한 StackOverflow 에러 해결 : @JsonIgnoreProperties 어노테이션 추가로 해당 컬럼 참조 막음 * 해당 오류는 광범위한 오류로서 JS에서 경로 설정 문제 등으로 발생할수 있음. 스크롤 페이징에서 생긴 오류이다. 작동 잘 하던 스크롤 페이징에 다른 로직을 추가하다가 오류가 발생하였는데, 최초 스크롤 페이징 시에만 ERR_INCOMPLETE_CHUNKED_ENCODING 가 뜨고 스크롤 페이징이 작동되지 않는 상황이다. 불완전한 청크 인코딩 에러 = 즉 어딘가 코드가 잘못되었다는 뜻인데, 인텔리제이에서도 딱히 원인을 알려주지않는 상황. java.lang.StackOverflowError: null at com.fasterxml.jackson.databind... 2023. 1. 13. [Spring Data JPA] 좋아요 구현하기 - 2 좋아요 api 구현 public interface LikesRepository extends JpaRepository { @Modifying @Query(value="INSERT INTO likes(imageId, userId, createDate) values(:imageId, :principalId, now())", nativeQuery = true) int mLikes(@Param("imageId") int imageId , @Param("principalId") int PrincipalId); @Modifying @Query(value="DELETE FROM likes WHERE imageId = :imageId AND userId = :principalId ", nativeQuery = true) int mUnLi.. 2023. 1. 12. [Spring Data JPA] 좋아요 구현하기 - 1 모델 만들기 우선 들어가기전에 board.js 에 수정해야 할 사항이 있다. board.js function getStoryItem(image) { . . . } function toggleLike(imageId) { let likeIcon = $(`#storyLikeIcon-${imageId}`); if (likeIcon.hasClass("far")) { likeIcon.addClass("fas"); likeIcon.addClass("active"); likeIcon.removeClass("far"); } else { likeIcon.removeClass("fas"); likeIcon.removeClass("active"); likeIcon.addClass("far"); } } js가 들어오는 데이터에 따라 다른 .. 2023. 1. 12. [Spring Data JPA] 포토 게시판 페이지 구현하기 -3 JPA 페이징 처리 예제 페이징 처리하기 위해선 controller 단의 매개변수에 변화가 필요하다. ImageApiController @GetMapping("/api/image") public ResponseEntity imageStroy(@AuthenticationPrincipal PrincipalDetails principalDetails, @PageableDefault(size = 3)Pageable pageable) { Page images = imageService.이미지스토리(principalDetails.getUser().getId(),pageable); return new ResponseEntity(new CMRespDto(1,"성공",images), HttpStatus.OK); } } Pageable 의 imp.. 2023. 1. 12. [Spring Data JPA] 포토 게시판 페이지 구현하기 - 2 포토리스트 띄우기 및 Ajax를 통한 뷰 렌더링 -1 에서 스칼라 쿼리로 만든 DB를 통해서 포토리스트를 띄울 예정이다. import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import com.pyo.yourspick.domain.user.User; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import javax.persistence.*; import java.time.LocalDateTime; @NoArgsConstructor @AllArgsConstructor @Builder @Data @Entity public class Image {.. 2023. 1. 12. [Spring Data JPA] 포토 게시판 페이지 구현하기 - 1 DB 스칼라 쿼리 구현 포토리스트 api 만들기 로그인 했을 때 구독한 멤버들의 포토리스트가 나와야 하기 때문에, 현재 userId 가 3개가 있고 만약 2번유저로 로그인 했다고 가정하자. userId 정보가 1, 3 필요하다. SELECT * FROM image WHERE userId IN (1,3); 쿼리는 이렇게 될것이다 2번유저의 구독자 정보만 알고싶으면 SELECT toUserId FROM subscribe WHERE fromUserId = 2; 이런 쿼리가 된다. 우린 이걸 스칼라 서브쿼리로 사용할거다. 둘을 합쳐주자. SELECT * FROM image WHERE userId IN ( SELECT toUserId FROM subscribe WHERE fromUserId = 2); 쿼리 실행 결과 원하는 데이터가 나.. 2023. 1. 12. [Spring Data JPA] 구독하기 구현하기 -5 구독 정보 모달 Ajax 연동하기 , javascript를 통한 동적인 뷰 렌더링 구독정보 누를시 띄워지는 모달에 데이터를 받아오고자 한다. profile.jsp 게시물${dto.imageCount} 구독정보${dto.subscribeCount} 클릭 시 모달을 띄워주는 자바스크립트에 id값을 넣어서 보낸다. function subscribeInfoModalOpen(pageUserId) { $(".modal-subscribe").css("display", "flex"); } 이렇게 함수의 인자로 받아주고 function subscribeInfoModalOpen(pageUserId) { $(".modal-subscribe").css("display", "flex"); $.ajax({ type:"get", url:`/api/user/${pageUserId}/subscribe`, dataT.. 2023. 1. 11. 이전 1 ··· 7 8 9 10 11 12 13 다음
