스프링부트+JPA - 인스타그램 클론 코딩 12 - 1 - 댓글(삭제/유효성 검사)

이지업 최주호 강사님 강의 참조

 

 

 

 

 

01 댓글 삭제

이 x버튼들을 누르면 삭제가 되도록 할 예정

story.js의 빨간부분이 삭제 버튼이다

• 글삭제, 댓글삭제, 어떠한 삭제등은 반드시 자기자신의것만 지울 수 있도록 해야한다. 즉 댓글쓴사람이 누구인지 아려면 principal의 id를 들고와야하는데 story.js에는 방법이 없다. header.jsp에서 받아야 한다. 
  

  

  헤더의 principal값을 자바값으로 담아 두면 된다!

• 헤더는 모든 페이지가 공통적으로 공유하기때문에 아래처럼 해놓으면 어디에서든지 꺼내 쓸 수 있다.

stroy.js에서 이렇게 선언해 놓으면 언제든지 꺼내 쓸 수 있다

현재 사용자가 1번이라는 소리.

 

• 이제 삭제버튼을 아이디값과 맞추어서 자기것만 삭제 할 수 있도록 세팅 하자

자기 자신것만 나오게 된다

 

• 이제 이벤트를 달아서 클릭시에 삭제가 되도록 처리만 하면 끝

$(`#storyCommentItem-${commentId}`).remove();를 해줘야 화면에서 바로 삭제가 된다!

• CommentApiController 세팅
  

  	@DeleteMapping("/api/comment/{id}")
  	public ResponseEntity<?> deleteComment(@PathVariable int id){
  		commentService.deleteComment(id);
  		return new ResponseEntity<>(new CMRespDto<>(1, "삭제 성공", null), HttpStatus.OK);
  	}​

• CommentService 세팅
  

  	@Transactional
  	public void deleteComment(int id) {
  		try {
  			commentRepository.deleteById(id);
  		} catch(Exception e) {
  			throw new CustomApiException(e.getMessage());
  		}
  	}​

 

• 마지막으로 지금 바로 넣은글은 삭제가 되지않는다. 아래 코드를 좀 수정해줘야 한다!
  

  

  

  방금 바로 쓴글은 유저 비교를 할 필요가 없다. 

 

 

02 유효성 검사

 

• CommentDto에서 넘어오는 데이터가 널값이 아니도록 세팅
  

  @Data
  public class CommentDto {
  	@NotBlank
  	private String content;
  	@NotNull
  	private Integer imageId;
  }

  @NotBlank 시리즈는 부트에서 지원하는데 여기서 int값은 @NotBlank 시리즈를 걸 수 없다. Integer로 해야 오류가 없다
• CommentApiController에서 댓글을 쓸때 유효성 검사 처리
  
  

  	@PostMapping("/api/comment")
  	public ResponseEntity<?> inserComment(@Valid @RequestBody CommentDto commentDto,
  			BindingResult bindingResult, @AuthenticationPrincipal PrincipalDetails principalDetails){
  		//System.out.println(commentDto);
  		if(bindingResult.hasErrors()) {
  			Map<String, String> errorMap = new HashMap<>();
  			for (FieldError error : bindingResult.getFieldErrors()) {
  				errorMap.put(error.getField(), error.getDefaultMessage());
  			}
  			throw new CustomValidationApiException("Failed", errorMap);
  		}
  		
  		Comment comment = commentService.insertCommnet(commentDto.getContent(), commentDto.getImageId(), principalDetails.getUser().getId());
  		return new ResponseEntity<>(new CMRespDto<>(1, "Success", comment), HttpStatus.CREATED);
  	}​

→ story.js에서 아래 코드를 주석 처리 후 테스트

 

• 이제 이 오류를 AJAX시에 실패시 띄어주도록 하자