Spring/블로그 프로젝트

detail.html 댓글 DB에 저장되어있는 작성자 이름과 스프링 시큐리티 로그인 정보의 사용자 이름이 같다면 삭제 버튼이 보이도록 설정해준다. 삭제 Thymeleaf 환경에서 외부 자바스크립트 파일에 선언된 함수를 참조하는 방법을 찾지 못하여서 html파일에 인라인 자바스크립트 코드를 생성하여 동작하도록 생성하였다. board.js 에 선언되어 있어야 할 스크립트 코드가 html 파일 인라인으로 선언되어 있어 유지보수에 용이하지 못하기 때문에 추후 리팩터링이 필요하다. “/api/board/{boardId}/reply/{replyId}” 주소로 DELETE 요청을 보낸다. BoardApiController.java @DeleteMapping("/api/board/{boardId}/reply/{repl..

detail.html 댓글 등록 폼을 생성해줍니다. 등록 board.js btn-reply-save 버튼을 클릭 했을 때 동작할 코드를 작성해줍니다. reply-content id를 가진 태그의 값을 가져와 content에 저장하고 HttpBody에 Json형식으로 담아 /api/board/${boardId}/reply 주소로 POST 요청을 보냅니다. replySave: function () { let data = { content: $("#reply-content").val() } $.ajax({ type: "POST", url: `/api/board/${boardId}/reply`, data: JSON.stringify(data), contentType: "application/json; chars..

이미지 파일이 너무 많아서 노션 게시글로 대체합니다 Blog 프로젝트 - 카카오 로그인 기능 카카오 로그인 - OAuth2.0 hyunsb.notion.site

회원정보 수정 기능은 사용자의 입력 값으로 DB의 정보를 최신화 시킨 다음 최신화된 DB정보를 바탕으로 스프링 시큐리티의 로그인 로직을 내부적으로 실행시켜 세션의 로그인 정보를 최신화 하는 방법으로 구현되었습니다. /user/updateForm.html 외부 자바스크립트 코드를 통하여 Ajax 통신을 진행할 것이기 때문에 button을 form태그 밖에서 작성합니다. input 태그의 id 값을 통해 입력값과 외부 자바스크립트 변수를 매핑해 줄 것 입니다. UserName: Password: Email: Email: 회원정보 수정 user.js /user 로 HttpBody에 json 형식으로 데이터를 담아 PUT 요청을 보냅니다. update: function (){ let data = { id: up..

게시글 수정 기능 board/detail.html에서 수정 버튼과 버튼의 동작을 추가해야 합니다. 수정 버튼 클릭 시 /board/{id}/updateForm URI로 요청을 보냅니다. BoardController.java에서 해당 URI에 대한 응답을 매핑해줍니다. 수정하기 위한 view는 board/updateForm.html에서 생성합니다. 해당 view에서는 수정 완료 버튼 클릭 시 수행할 통신에 대한 자바스크립트 코드를 추가합니다. 요청에 대한 응답은 BoardApiController.java에서 매핑해줍니다. 마지막으로 게시글 수정에 대한 비즈니스 로직을 추가해줍니다. 아래에서 해당 순서를 바탕으로 코드의 추가를 진행하겠습니다. board/detail.html 게시글 상세보기 - 수정 버튼의 ..

게시글 삭제기능은 Data JPA 사용 시 매우 간단하게 구현할 수 있습니다. Detail.html 게시글에 저장되어 있는 게시글 작성 유저네임과 시프링 시큐리티 세션에 저장되어 있는 유저네임이 같다면 수정과 삭제 버튼이 보이도록 생성해줍니다. 수정 삭제 Board.js ajax 통신을 하기 위한 js 코드를 작성해줍니다. “/api/board/{boardId}" 로 DELETE 요청을 보내겠습니다. deleteById: function () { $.ajax({ type: "DELETE", url: "/api/board/" + boardId, dataType: "json", }).done(function (response) { // 요청 결과가 정상인 경우 const status = response.st..

게시글 상세보기 기능 게시글 상세보기 버튼 클릭 시 /board/{id} URI로 GET요청을 보냅니다. /board/{id} 요청에 응답하기 위해 BoardController에 메서드를 생성합니다. 상세보기를 위한 view는 board/detail.html에서 생성합니다. 해당 순서에 따라 코드를 추가해보겠습니다. board/layout.html 게시글 레이아웃에서 상세보기 버튼 클릭 시 /board/{id} 로 GET요청을 보낼 수 있도록 코드를 추가 해줍니다. URI에 게시글의 ID정보를 포함하여 GET 요청을 전송합니다. 상세 보기 다음으로 해당 요청에 응답할 메서드를 컨트롤러에 추가해줍니다. BoardController.java URI에 포함된 id 값을 @PathVariable 어노테이션을 사..

게시글 페이징 처리 게시글 리스트 요청에 따른 Controller 생성 / 혹은 /board/myPost 요청이 오면 요청에 따른 게시글 조회 페이지를 응답할 수 있도록 컨트롤러에 메서드를 생성하고 매핑합니다. 게시글 리스트 view 생성 게시글은 4개씩 id에 의해 정렬되어 페이징될 것입니다. 비즈니스 로직을 담당하는 Service 파일 생성 전체 게시글을 조회하는 기능 나의 게시글을 조회하는 기능 페이징 처리 기능 구현 전 Pageable 인터페이스에 대해 먼저 알아보려 합니다. Pageable Pageable은 Spring Data 프로젝트에서 제공하는 인터페이스 중 하나로, 데이터베이스에서 검색 결과를 페이징 처리할 수 있도록 돕는 인터페이스입니다. Pageable을 사용하면 검색 결과의 일부분만..

게시글 작성 기능 글 작성 form 요청에 대한 컨트롤러 생성 /board/saveForm 요청이 오면 template/board/saveForm.html 을 응답할 수 있도록 컨트롤러에 메서드를 생성하고 매핑합니다. 글 작성 html Form 생성 글 작성 Form에서는 제목과 내용을 입력받고 버튼 클릭 시 api 요청을 보낼 것입니다. 내용 작성은 BootStrap5 환경에서 summernote 라이브러리를 사용하여 입력 받습니다. ajax 통신을 위한 javascript 파일 생성 btn-save 버튼 클릭 시 제목, 내용을 json 형식으로 /api/board 에 POST 요청을 전송합니다. api 요청에 대한 Controller 생성 Board 객체와 PrincipalDetail 객체를 파라미터..