WIL

41주차 - 프로젝트 구현 코드 정리

haedal-uni 2022. 6. 26. 21:26
728x90

현재까지 구현한 코드

- Login (회원가입 및 로그인)                                                                  

   [Project] - 로그인 코드 , [Project] - 회원가입

   LoginController, User, LoginDto, SignupRequestDto, UserRepository, UserDetailsimpl, UserDetailsServiceImpl, WebSecurityConfig, UserService, CustomAuthFailureHandler, UserServiceTest  

                                                                                                                            

- Registry (게시글 저장)                                  

   [Project] - Registry 코드 정리 - back (+ 페이징) ,  [Project] - Registry 코드 정리 - front (+ 페이징) ,    

   [Project] - paging test 코드 보기(검증x)

   RegistryController, Registry, RegistryDto, RegistryRepository, RegistryService, PagingResult,

   RegistryRepositoryTest, PagingH2Test, RegistryPagingTest, RegistryServiceTest                      

 

- 채팅(websocket)                                                                                        

   [Project] - 웹소켓 기본 코드 , [Project] - 웹소켓 - 상대방과 나 구분하기

   WebSocketConfig, WebSocketController, WebsocketService

          

- Comment(crud)

   [Project] - 댓글 test 코드  ,  [Project] - 댓글 crud 코드

    CommentController, Comment, CommentDto, CommentRepsotiroy, CommentService,

    CommentServiceTest                                                             

 

 

팀원은 아직 10s 페이지 코드를 작성하고 있다. 동영상이 많이 어려운 듯하다.

나도 이전에 s3를 이용해서 사진 업로드 할 때 초반엔 계속 코드 보면서 이해한다고 시간이 오래걸렸는데 동영상은 더욱 더 오래걸릴 것 같긴하다. 느낌에 팀원이 동영상 코드를 끝내면 다른 코드작업은 빨리 할 것 같다. 

 

팀원이 구현한 코드

- TenSeconds(동영상 업로드)

TenSecondsController, Tenseconds, VideoDto, TenSecondsRepository, TenSecondsService,

TenSecondsTest, UserVideoIntergrationTest

 

댓글 삭제하기(delete)

이전에 작성한 댓글 수정하기와 별다른 차이가 없다.

2022.06.22 - [TIL] - 280일차(모험 189일차) - 댓글 수정(PUT)

// 댓글 삭제
@DeleteMapping("/comment/{commentId}/registry/{registryId}")
public void deleteComment(@PathVariable Long commentId, @PathVariable int registryId,
                          @RequestBody CommentDto commentDto,
                          @AuthenticationPrincipal UserDetailsImpl userDetails)throws AccessDeniedException {
    commentService.deleteComment(commentId, registryId, commentDto, userDetails);
}

 

차이가 있다면 put은 repository에 저장을 하고 delete는 말그대로 repository에서 삭제한다.

 

 

 

 

front 에서는 삭제 여부를 먼저 묻고 한번 더 체크한 뒤에 삭제가 되게끔 confirm을 사용했다.

function checkDelete(commentId) { // 삭제 여부를 묻고 삭제하겠다고 하면 deleteComment 호출
    let checkDelete = confirm("정말 삭제하실건가요?")
    if (checkDelete) {
        deleteComment(commentId)
    }
}

function deleteComment(commentId) {
//put 작성 코드와 거의 일치
}

 

backend : [add] 댓글 삭제하기(delete) [#79] #85

front : [add] 댓글 삭제하기(delete) [#79] #87

댓글 post 후 다시 db 가져오기

$.ajax({
    type: "POST",
    url: `/comment`,
    data: form_data,
    contentType: false,
    processData: false,
    success: function (response) {
        $("#commentList").append(nickname + "님 : " + $("#comment").val())
        let temp = `<br>`
        $("#commentList").append(temp)

        // 댓글 창 값 없애기
        $("#comment").val("")

    }
});

 

기존에는 comment 입력하면 바로 반영이 안되서 아래 코드와 같이 형식을 붙여줬다.

그리고 modal 창을 닫고 다시 해당 게시글 modal 창을 열면 get 방식으로 db를 가져오는 방법이었다.

$("#commentList").append(nickname + "님 : " + $("#comment").val())
let temp = `<br>`
$("#commentList").append(temp)

 

 

위 코드를 주석처리하고 댓글 get 함수를 실행시켰다.

// 댓글 입력 후 댓글 db reload
findComment(registryId)

 

 

$.ajax({
    type: "POST",
    url: `/comment`,
    data: form_data,
    contentType: false,
    processData: false,
    success: function (response) {
        // 댓글 창 값 없애기(input 칸 비우기)
        $("#comment").val("")

        // 댓글 입력 후 댓글 db reload
        findComment(registryId)
    }
});

 

 

 

댓글 삭제 후 해당 내용 반영하기

이 부분이 헤맸는데 remove를 해도 반영이 안되고 댓글 div만 새로고침했는데 모든 db가 사라져서 다시 get 함수를 이용해서 코드를 작성했지만 여전히 반영이 되지 않았고 모달창을 닫고 다시 켜야 반영이 되는 불편함이 있었다.

그러던 중 새로고침을 삭제 댓글만 반영하는 것이 어떨까라는 생각이 들었고 아래 코드를 작성하니 정상적으로 삭제 버튼을 누르면 해당 댓글만 삭제되었다.

let query = "." + commentId
let queryEnd = " ." + commentId
$(query).load(window.location.href + queryEnd) // 삭제 댓글만 새로고침

 

front : [add] 댓글 삭제 후 해당 내용 반영하기 [#79] #88

@RequestParam, @PathVariable, @RequestBody

출처 :  @RequestParam, @PathVariable, @RequestBody

스프링 controller에서 파라미터를 받는 다양한 방법 ( @RequestParam, @RequestBody, @PathVariable)

[Spring] @PathVariable, @RequestParam, @RequestBody, @ResponseBody

 

 

 

@RequestParam (* @RequestParam이 여러 개 있다. → @ModelAttribute)

* Query String 에서 값을 가져온다.

@GetMapping("/api/foos")
@ResponseBody
public String getFoos(@RequestParam String id) {
    return "ID: " + id;
}

해당 어노테이션에 명시된 매개변수 값은 반드시 파라미터 값이 넘어와야 한다. 넘어오지 않으면 400에러(Bad Request)가 발생한다. 위 코드에서 @RequestParam 어노테이션의 매개변수로 지정된 id에 대한 파라미터 값은 반드시 넘어와야 한다.

 

 

@GetMapping("/api/foos")
@ResponseBody
public String getFoos(@RequestParam(required = false) String id) { 
    return "ID: " + id;
}

필수 파라미터가 아닌 경우 required=false 설정을 추가한다.(기본 설정은 required=true) 이렇게 하면 파라미터가 넘어오지 않아도 에러가 발생하지 않는다.

 

@RestController
@RequestMapping(path = "/api")
public class ReservationsApiController {
 
    // email로 예약 내역 조회
    @GetMapping(path = "/reservations")
    public Response<List<String>> getReservations(
            @RequestParam(value = "reservationEmail",required = false) String reservationEmail) {
 
        return reservationService.getReservationByEmail(reservationEmail);
    }

value에는 넘어오는 파라미터의 name값을 적는다.

 

 

@PathVariable

* URL 변수

아래 URI에서 밑줄 친 부분이 @PathVariable로 처리해줄 수 있는 부분이다.

http://localhost:8080/api/user/25

https://localhost:8080/comment/25086

@RestController
@RequestMapping(path = "/api")
public class ReservationsApiController {
 
    // 예약 취소
    @PutMapping(path = "/reservations/{reservationId}")
    public Reservations cancleReservations(@PathVariable(name = "reservationId") Integer reservationInfoId) {
 
        return reservationService.cancelReservationById(reservationInfoId);
    }

{}를 활용해 변수처럼 적어준 뒤 @PathVariable 어노테이션 뒤에 {} 안에 적은 변수 명을 name 속성의 값으로 넣는다.

 

 

 

@RequestBody

*Json

 

 json 데이터를 서버로 넘긴다고 하면 

@RestController
@RequestMapping(path = "/api")
public class ReservationsApiController {
 
    // 예약하기
    @PostMapping(path = "/reservations")
    public Reservations setReservations(@RequestBody ReservationParam reservationParam) {
 
        return reservationService.setReservation(reservationParam);
 
    }

@RequestBody 어노테이션이 달린 메소드의 매개변수는 HTTP 요청 본문(request body)과 연결된다. HTTP 요청 본문은 HttpMessageConverter에 의해 처리되는데, 요청 시 전달받은 HTTP의 Content-Type 헤더에 선언된 콘텐츠 타입을 기준으로 메소드 인자값을 처리한다.

 

json 데이터를 담은 java 객체를 구현하고(ReservationParam) 해당 요청을 매핑하는 controller method에서 @RequestBody 어노테이션을 선언하고 생성한 java 객체를 파라미터를 담을 변수로 적어주면 json 데이터로 날아온 파라미터가 java객체에 담긴다.

 

 

Type 1의 경우 파라메터의 값과 이름을 함께 전달하는 방식으로 게시판 등에서 페이지 및 검색 정보를 함께 전달하는 방식을 사용할 때 많이 사용한다.
Type 2의 경우 Rest api에서 값을 호출할 때 주로 많이 사용한다.

 

Type 1 : http://127.0.0.1?index=1&page=2
Type 2 : http://127.0.0.1/index/1

 

@RequestParam @PathVariable @RequestBody
- 전달받은 데이터를 URI상에서 찾는다.

- Type 1의 URI를 처리할 때 사용한다.

- GET 방식으로 넘어온 URI의 queryString을 받기 적절하다.

- @RequestBody로 데이터를 받을 경우 메소드의 파라미터명이 상관 없지만
  @RequestParam으로 데이터를 받을 때는 데이터를 저장하는 이름으로 메소드의 파라미터명을 설정해줘야 한다.

- 해당하는 데이터만 받아올 수 있다. (@RequestBody는 객체를 받아옴)

ex) http://localhost:8080/receive?name=jun&age=13



 - URI 경로의 일부를 파라미터로 사용할 때 이용한다.

- 템플릿 변수의 값을 추출하고 그 값을 메소드 변수에 할당한다.

- Type 2의 Rest api에서 값을 호출할 때 주로 사용한다.		 - http요청의 body 부분을 java 객체로 받을 수 있게 해주는 어노테이션. 주로 json을 받을 때 활용한다. 

- http 요청의 body에 담긴 값을 자바 객체로 변환한다.

- 비동기 처리 구현시 @ResponseBody와 함께 사용한다.

- 일반적인 GET/POST의 요청 파라미터라면 @RequestBody를 사용하지 않아도 된다.

- xml이나 json 기반의 메시지를 사용하는 요청의 경우 유용하다.

ex) http://localhost:8080/receive

 

 

* Spring 4 버전부터 클래스에 @RestController 어노테이션이 @ResponseBody 어노테이션의 기능을 포괄하기 때문에 @RestController 어노테이션만 사용하면 된다.

 

 

728x90

'WIL' 카테고리의 다른 글

43주차 - 🐣  (0) 2022.07.10
42주차 - 프로젝트  (0) 2022.07.03
40주차 - 로그인 문제 해결  (0) 2022.06.19
39주차 - 회원가입  (0) 2022.06.12
38주차 - 프로젝트 front  (0) 2022.06.05

'WIL'의 다른글

  • 현재글41주차 - 프로젝트 구현 코드 정리

관련글

댓글

티스토리툴바