스프링부트

지금은 미니프로젝트를 진행중이기 때문에 프론트서버를 따로 두지 않아서, 백엔드 서버에서 함께 동작시켜야 하는 상황이다. 문제: 크롬과 Postman의 JWT 인증결과가 다름 먼저 로그인을 하면 응답헤더에 JWT를 포함하여 바디와 함께 응답한다. 응답을 받은 클라이언트는 헤더에 JWT를 포함하여 /user로 GET 요청한다. /user 는 토큰의 인증이 있어야 접근할 수 있는 url이다. 브라우저에서 토큰 인증할 때, 로그인 이후 요청 헤더에 JWT 잘 넣어서 들어오고, 인증도 잘 마쳐진 상태이다. 토큰 제대로 들어오고, 인증 처리 완료돼서 Security Context Holder에 UserDetail 정보도 잘 저장된다. 근데 막상 크롬에서 페이지 이동이 잘 되었나 보면 인증이 안됨 ????? post..

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..

회원정보 수정 기능은 사용자의 입력 값으로 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..

게시글 페이징 처리 게시글 리스트 요청에 따른 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 객체를 파라미터..

스프링 시큐리티 로그인 기능 구현 스프링 시큐리티는 스프링 기반의 애플리케이션 보안을 담당하는 프레임워크입니다. 이를 이용하여 로그인 기능을 구현할 수 있습니다. 로그인 기능을 구현하기 위해서는 스프링 시큐리티에서 제공하는 AuthenticationManager와 UserDetailsService를 구현해야 합니다. AuthenticationManager는 인증(Authentication)을 담당하고, UserDetailsService는 사용자 정보를 가져오는 역할을 합니다. 또한, 로그인 페이지와 로그인 성공/실패 시의 처리를 위한 컨트롤러와 뷰를 구현해야 합니다. 로그인 폼에서 입력한 아이디와 비밀번호를 AuthenticationManager에 전달하여 인증을 수행하고, 인증 결과에 따라 로그인 성공..

회원 가입 기능은 Ajax 통신을 기반으로 구현합니다. ✅ ajax 를 사용하는 이유 1. 요청에 대한 응답을 html이 아닌 Data(Json)으로 받기 위해 2. 통신의 효율성을 높이기 위한 비동기 통신을 하기 위해 joinForm 에서 클라이언트가 입력한 데이터를 담아 javaScript를 통한 ajax통신으로 서버에 요청하고 컨트롤러에서 회원가입 비즈니스 로직을 실행하고, 결과 값(data)을 반환합니다. 컨트롤러는 데이터를 반환하기 때문에 @RestController어노테이션을 사용합니다. joinForm.html UserName: Password: Email: 회원가입 회원 가입 버튼 시 form 태그의 데이터를 ajax 통신으로 서버에 전송하는 방식을 구현합니다. 해당 기능을 user.js에..