이전포스팅
유저의 프로필페이지에서 구독자 리스트를 출력하였다. 이때 접속 유저 자신인지 & 접속 유저가 구독한 사람인지에 따라 출력을 다르게 해주었다.
이번에는 접속 유저에 구독자들의 이미지들을 뿌려주는 포토리스트 페이지를 구현하자.
포토리스트 API 만들기
위는 포토리스트 화면이다. 유저 정보, 이미지 정보, 캡션 정보 세가지 정보가 필요하며, 구독한 사람의 이미지만 가져와서 뿌려줘야 한다.
Image 객체를 가져와서 사용하게 되므로 Image 객체로 가보자.
Image -> 누가 올렸는지 User 갖고 있다. FK로서 갖고 있는 것이며, 유저 정보를 출력할 때 필요하므로 그냥 둔다.
User -> 해당 유저의 Images를 갖고 있다. 프로필 페이지에서 해당 유저의 이미지들을 뿌려주기 위해 갖고 있던 것이다.
Image를 JSON화 하면 필드인 user도 JSON화 되고, 그 안의 Images가 또 JSON화 되면서 무한참조가 일어난다. 따라서 User필드의 Images를 JSON화 하지 않도록 @JsonIgnoreProperties를 추가한다.
SELECT * FROM image WHERE userId
IN (SELECT toUserId FROM subscribe WHERE fromUserId = 세션아이디);구독한 사람의 이이지만 가져오는 쿼리문은 위와같다. 이를 ImageRepository 에 네이티브 쿼리로 작성한다.
ImageService에서 ImageRepository 이용 Image들의 List를 가져온다.
ImageApiController 에서 ImageService가 가져온 images를 반환해준다. 이 때 Ajax 통신을 위해 ResponseEntity에 담아 반환한다.
Postman으로 요청하자 해당 세션 유저의 구독유저들의 사진을 List로 반환함을 알 수 있다.
포토 리스트 뷰에 출력
위에서 반환 받은 Image List들을 받아 뷰를 그려보자.
Story.jsp는 story.js를 사용한다.
story.js 의 storyLoad 메서드이다. Ajax 통신으로 imageList를 받아오고, 그 Images를 순회하며 getStoryItem으로 파라미터를 넘겨 뷰를 그린 뒤 그린 뷰를 story.jsp의 storyList 태그 안에 append 시키는 모습이다.
getStoryItem 메서드이다. image를 파라미터로 하여 동적으로 뷰를 그린다.
story.jsp 이다. 위의 append 시킨 부분은 빨간박스 부분에 삽입되며 전체 뷰를 그리게 된다.
수행결과이다. 제대로 구독자들의 이미지만을 출력하는 것을 확인할 수 있다.
페이징 기능 추가
구독자들의 포토리스트를 출력하는데까지 성공했다. 그런데 사진이 너무 많을 때를 대비해 페이징 기능을 추가하려면 어떻게해야할까?
컨트롤러에서 @PageableDefault 를 추가한다. 파라미터로 한 페이지에 사용할 쿼리 결과 투플수를 지정할 수 있다. 여기서는 3으로 설정하였다. pageable은 쿼리 수행결과에 적용된다. 따라서 Repository 까지 넘어가야 하므로 Service에게 우선 파라미터로 넘긴다.
Service에서도 마찬가지로 Repository 파라미터로 넘긴다.
ImageRepository 에 파라미터로 Pageable 를 추가하기만 하면 Page 를 자동으로 설정해준다. 최근 게시물 부터 출력하기 위해 쿼리문에 "ORDER BY id DESC" 를 추가하였다. 그리고 반환형을 Page 객체로 설정해준다. 이 때 Service와 Controller도 반환형을 Page로 하였음에 유의한다.
Postman으로 요청한 결과이다. 이제 page를 파라미터로 하여, 해당 페이지에서는 설정한 수만큼만 출력이 되는 모습이다. 이때 유의할 점은 데이터 출력전 content 가 한번더 감싸도록 자동으로 추가되었다.
story.js에서 content 를 경로에 추가하자 제대로 출력이 수행되며 페이지마다 다른 이미지를 가져온다.
스크롤 기능 추가
이제 스크롤에 따라 페이지를 유동적으로 렌더링하도록 변경해보자.
story.js에 scroll 콜백함수를 등록 후 출력결과를 확인하였다.
이때 문서의 높이는 전체 문서의 높이(고정)
윈도우 높이는 현재 띄워놓은 창의 높이(크롬창 크기에 따라 결정)
스크롤 탑은 현재 스크롤 상에서 가장 높은 위치의 높이를 말한다.(스크롤에 따라 유동적)
따라서 스크롤탑 = (문서 높이 - 윈도우 높이)가 되었다는 것은 현재 윈도우에서 스크롤이 가장 아래까지 내려와있음을 의미한다.
page변수를 추가하여 page변수에 해당하는 페이지를 출력하도록 한 뒤
문서 높이 - 윈도우 높이가 -1~1 사이가 되면 page를 증가시키고 storyLoad를 통해 다음 페이지들을 추가로 출력하도록 하여 스크롤로 추가페이지 출력하기를 구현하였다.
