daehyuntstory

ApiException이랑 Exception의 ValidationException차이는? api는 데이터만 전달할때 사용되고 Exception은 html파일을 전달할때 발생하는 예외를 처리한다고 보면된다. Validation 테이블생성될때 발생하는 예외이다. 코드를 살펴보면 ApiException // CustomApiException @ExceptionHandler(CustomApiException.class) public ResponseEntity apiException(CustomApiException e) { return new ResponseEntity(new CMRespDto(-1,e.getMessage(),null), HttpStatus.BAD_REQUEST); } // api 함수 @Del..

story.js // (4) 댓글쓰기 function addComment(imageId) { let commentInput = $(`#storyCommentInput-${imageId}`); let commentList = $(`#storyCommentList-${imageId}`); let data = { imageId:imageId, content: commentInput.val() } // data에 내가 서버에 보내고싶은 데이터를 담아놓는다 if (data.content === "") { alert("댓글을 작성해주세요!"); return; } $.ajax({ type:"post", url:"/api/comment", data:JSON.stringify(data), contentType:"appl..

스토리 게시물에 이제 댓글을 달려고하는데 무엇이필요할까 내용 시간 유저 어떤이미지에 댓글인지 등 여러가지의 데이터가 들어가게된다 그럼 생각해야할게 테이블을 만들어야한다 왜? 그냥 image에다가 comment라고 댓글 추가하면 안되나요? 네 list화시켜 여러데이터를 담는다 하더라도 테이블의 컬럼하나에는 하나의 값만 존재하여야한다 안녕,좋은사진이네요,... 옆과같이 , 로 구분하여 한컬럼에 데이터를 여러개 넣는방식은 굉장히 안좋다 그렇기때문에 한컬럼에는 하나의값이 들어가도록 만들어보자. Comment.java package com.cos.photogramstart.domain.comment; @Builder @AllArgsConstructor @NoArgsConstructor @Data @Entity p..

프로필 유저사진 변경 유저 이미지를 누르면 프로필변경이 뜨고 변경을 눌렀을때 사진 업로드창이 뜨게하기 유저프로필 이미지 코드 만약 위에서 display:none를 지운다면? 위와같은 모습일것이다 그래서 히든을 주고 id를 잘보자 이미지 버튼의 id = userProfileImageInput 로 지정되어있다 프로필 사진을 눌렀을때 모달창 html코드 프로필 사진 바꾸기 사진 업로드 취소 사진 업로드를 누르게되면 profileImageUpload가 발생되게 설정되어있다. 그렇다면 js파일을 보면 // (4) 유저 프로파일 사진 변경 (완) function profileImageUpload(pageUserId, principalId) { $("#userProfileImageInput").click(); $("..

좋아요 갯수 표시 마이페이지에서 사진에 마우스 호버시 하트와 카운트 개수가 나오는데 카운트 개수가 잘 나오도록 만들어보자. profile.jsp ${image.likes.size() } 프로필페이지에 이미지를 불러오는 코드를 보니 images클래스를 불러오고있다 dto는 UserProfileDto 프로필에 데이터를 한번에 가져오기위해 만들었던 클래스이다 public class UserProfileDto { private boolean PageOwnerState; private User user; private boolean subscribeState; private int subscribeCount; private int imageCount; } 위 클래스가 dto이고 dto의 user의 멤버필드중 im..

인기페이지 인기페이지란 좋아요가 있는 사진들을 보여주는 곳이다 요청을 받을컨트롤러 인기페이지 요청을받아 인기사진들을 반환하도록 설정 web.ImageController.java @GetMapping("/image/popular") public String popular(Model model) { List images = imageService.인기사진(); model.addAttribute("images",images); return "image/popular"; } 인기사진 서비스의 함수 service.ImageService.java @Transactional(readOnly = true) public List 인기사진() { return imageRepository.mPopular(); } 쿼리문 만..

좋아요 버튼기능 구현 저번시간에 api는 완성하였고 이제 버튼에 적용시킬려한다 그럼 버튼을 찾아와서 거기에맞게 알맞은 요청을 보내면 될거같다 바로 만들어보자. // (3) 좋아요, 안좋아요 function toggleLike(imageId) { let likeIcon = $(`#storyLikeIcon-${imageId}`); if (likeIcon.hasClass("far")) { // 좋아요 하겠다 $.ajax({ type:"post", url:`/api/image/${imageId}/likes`, dataType:"json" }).done(res=>{ let likeCountStr = $(`#storyLikeCount-${imageId}`).text(); let likeCount = Number(l..

저번글에서 좋아요 테이블은 성공적으로 완성을했다 그러고 스토리 게시물에 내가 좋아요를 했다면 빨간하트 안했다면 빈하트가 나와야하는데 스토리 게시물은 로드가되면 images에 담겨 넘어오게 되니 images에 추가를해야할거 같다. 이미지 클래스에 속성추가 Image.Image.java @JsonIgnoreProperties({"image"}) @OneToMany(mappedBy = "image") private List likes; @Transient // DB에 컬럼이 만들어지지 않는다. private boolean likeState; 기존의 Image에 likes라고 컬럼을 추가하고 Likes테이블의 image를 참조하게 설정해놓았다 참조 설정은 mappedBy = "참조할 컬럼명" 이된다. Image..

모델 만들기 우선 모델을 만들어보자 domain.likes.Likes.java package com.cos.photogramstart.domain.likes; @Builder @AllArgsConstructor @NoArgsConstructor @Data @Entity // 두개를 복합적으로 유니크를 줄때 @Table( uniqueConstraints = { @UniqueConstraint( name = "like_uk", columnNames= {"ImageId","userId"} ) } // 한사람은 하나의 이미지만 좋아요가능하기때문에 위와같이 유니크 제약조건 추가 ) public class Likes { // N 좋아요의 입장으로 봤을때 여러개의 이미지와 유저를 가질수 있으므로 n @Id @Gene..

우선 스크롤 페이징을 하기전 스크립트 스크롤함수들을 알아보자 $(window).scroll(() => { console.log("윈도우 scoroll",$(window).scrollTop()); console.log("문서의 높이",$(document).height()); console.log("윈도우 높이",$(window).height()); }); scroll 은 아래로 내릴수록 더커지고 문서의 높이는 홈페이지 전체 크기이다 (사진이 추가될수록 더 커진다) 윈도우 높이는 지금 사진에 보이는 화면 크기이다 (즉 모니터가 클수록 더 커진다) 그렇담 스크롤 하면서 불러오는 건 어떻게 가져올까 문서의 높이 - 윈도우의 높이가 == scrollTop(스크롤위치) 일때 불러오면 된다. 그렇담 코드를 밑과 같이..