MY_STUDY

먼저 MainController에 실행하면 불러올 값을 정의함

첫번째 BEAN으로 만들어서 관리하는 방식이 있다. 자격 증명이 있는 사용자를 하나 이상 생성하고, 사용자를 userDetailsService에서 관리하도록 추가한다. 추어진 암호를 UserDetailsService가 저장하고 관리하는 암호를 이용해 검증하는 PasswordEncoder 형식의 Bean을 정의

두번째로는 WebSecurityConfigureerAdapter를 상속하여 configure 메소드를 재정의하는 방식이 있다.

GrantedAuthority 계약과 UserDetails의 구현... 사용자가 어플리케이션에서 수행할 수 있는 작업인 authority들을 가지는 인터페이스이며, getAuthority()메서드를 가진다. UserDetails의 getAuthorities() 메서드는 GrantedAuthority 클래스를 상속받는 Collection을 반환함

UserDetailsService 계약... UserDetailsService 인터페이스에는 UserDetails객체를 반환하는 loaduserByUsername(String username) 메서드 하나만 존재한다. 인증 구현 식 해당 메서드를 호출해 주어진 사용자 이름을 가진 사용자(UserDetails객체)의 세부 정보를 얻음

해당 유저로 인증후 실행 결과, 인증 완료후 연결됨

스프링 시큐리티

보안 기능을 구현할 때 사용하는 프레임워크로, 주로 서블릿 컨테이너에 배포하는 웹 애플리케이션의 보안 기능을 구현할 때 활용

인증(Authentication) : 애플리케이션 사용자의 정당성 확인 (예 - 로그인)

인가(Authorization) : 애플리케이션의 리소스나 처리에 대한 접근 제어 (사용자 게시물을 볼 권한이 있는가 등)

접근 주체(Principal) : 애플리케이션의 기능을 사용하는 주체

셋팅

처음 실행 결과, 유저의 기본 비밀번호가 나타난다.

로컬호스트로 가 보면 인증 페이지가 뜨는데, 유저의 기본 아이디는 'user'이며, 비밀번호는 위의 것과 같다.

리퀘스트를 이용할 시, 로그인을 해야할 경우 이렇게 해야 한다.

DB와 Restful을 활용한 댓글 구현을 해봤다.

전체 HTML

전체 HTML에서 댓글 부분

DB 테이블을 만든 후, DTO 생성, @Data 어노테이션은  @Getter / @Setter, @ToString, @EqualsAndHashCode와 @RequiredArgsConstructor 를 합쳐놓은 것. no는 댓글의 넘버, boardNo는 게시물의 넘버, userID는  댓글을 쓴 유저, title은 댓글의 제목, text는 댓글 내용, writeDate는 댓글을 쓴 날짜이다. 이때 날짜는 현재 시각을 나타내야 하기 때문에, 기본 값을 현재 시간으로 설정해야 하고, insert문에서 작성하면 안된다.

전체적인 셋팅. 댓글을 조회하는 select문, 댓글을 삽입하는 insert문, 댓글을 수정하는 update문, 댓글을 지우는 delete문을 작성한다. 

이제 자바 스크립트 작성. 맨위 commentsSection은 댓글이 표시될 장소, writeSection은 댓글을 작성하는 곳. board-no는 헤당 게시글의 넘버, writeBtn은 댓글 작성 버튼이다.

게시물 작성하는 함수. 타이틀을 적는 곳과, 유저, 댓글 내용을 적는 input과 textarea태그를 가져온 뒤, JS 데이터를 만든다. 주의할 점은. 데이터의 키 값을 DB의 속성명과 동일하게 해야 된다. 그리고 만든 JS 데이터를 JSON 데이터로 변환하여 POST에 요청을 보낸다. 댓글 작성에 성공하면 곧 만들 get_comments(); (댓글 조회) 함수를 실행시키게 한다.

댓글 객체들을 화면에 보여주는 함수이다. 맨 처음 댓글 전부를 화변에서 제거하고 시작한다. 불러온 객체 리스트들을 하나씩 조회하여, 다음 HTML 형식으로 조회하게끔 한다. 그리고 수정 버튼과 삭제 버튼까지 만든다. 수정 버튼과 삭제버튼에 onclick 요소로 곧 만들 수정, 삭제 함수들을 넣고, 누르면 수정과 삭제가 가능하도록 한다.

게시물에 해당하는 댓글 전체를 가져오는 함수. 카테고리 방법으로 해당 게시물의 모든 댓글 객체를 받아와야 한다. 받아온 JSON 객체를 JS객체로 변환하여, 받아온 모든 댓글 LIST를 위의 댓글 객체들을 화면에 보여주게 하는 함수에 파라미터로 넣는다.

컨트롤러로 간다. @RestController 어노테이션을 이용하여, 주소가 아닌 값을 불러오게끔 한다. 댓글 작성 POST를 만드는데, 이미 만든 Mapper의 댓글 작성 메소드를 불러온다. @RequestBody는 자바스크립트에서 요청한 요청 값들을 불러오게 하는 용도이다. 그 값들을 불러와서 댓글 작성 메소드의 파라미터안에 넣으면, 댓글 작성 완료된다.

댓글 조회는 GET으로 하는데, 카테고리 방식으로 @PathVariable을 이용하여, 해당 게시물의 boardNo를 불러와서, 헤당 게시물 안에 있는 모든 댓글 목록들을 조회하게끔 한다.

다시 자바스크립트로 돌아와서 댓글 수정과, 댓글 삭제하는 기능을 만든다. 위에서 create_comments_view 함수 부분을 보면, 댓글 수정, 삭제 버튼의 onclick 요소 안에 함수들과 똑같은 이름을 만든다. 그리고 수정 함수 안에 this가 있는데, 이건 이 수정 버튼의 부모 태그의 바로 밑 태그를 불러오게 하기 위함이다. parentElement.nextElementSibling.value로 유저가 수정한 textarea의 내용을 가져온다. 

내가 누른 댓를 no를 가져오고, 컨트롤러에서 @PutMapping으로 수정할 계획이으로 메서드는 "put" 그리고 JSON 객체로 변환한다. 요청이 성공하면 당연히 새롭게 댓글이 수정 됐음을 의미하니까, 모든 댓글을 재로딩되어 보여지게 한다.

삭제는 더 간단하다. 그냥 똑같이 내가 누른 버튼의 no를 가져오고, 해당 댓글 no 삭제를 요청하면 그만이다. 역시 요청이 성공하면 모든 댓글을 재로딩

마지막으로 페이지 접속하면 댓글 전부 보여지게끔 get_comments(); 함수를 맨 시작점에 적는다.

그리고 작성 버튼 눌렀을 시 작성기능이 동작하도록 한다.

수정, 삭제 둘다 카테고리 방식으로 해당 댓글의 no를 가져온다. 수정은 @RequestBody로 자바스크립트에서 불러온 JSON 객체를 불러오게 하고, 댓글 수정 메소드를 작성하여 최종적으로 댓글이 수정되도록 한다. 댓글 삭제는 카테고리 방식으로 불러온 no를 댓글 삭제 메소드의 파라미터로 넣어, 해당 no를 가진 댓글이 삭제되도록 한다.

다음 과 같이 설정 후, 스프링 boot 사이트에 가서 프로퍼티를 가져온다.

맨 위 LOG 부분에 위 사이트에서 가져온 프로퍼티를 설정한다.

configuration.xml의 모습

맨 처음 보면 메인이 만들어져 있는데, 이것을 삭제하면 안된다.

th 속성을 이용한 동적인 view를 제공한다. 기존의 foreach문이랑, 링크, 텍스트 모두 이미지와 같이 설정해야 한다.

타임리프

뷰 템플릿이라고 부른다. 뷰 템플릿은 컨트롤러가 전달하는 데이터를 이용하여 동적으로 화면을 구성할 수 있게 해준다.   html 태그를 기반으로 하여 th:속성을 이용하여 동적인 view를 제공한다.

셋팅

먼저 타임리프 홈페이지에 들어가서, Docs를 클릭한 후, Spring과의 연계를 위해 다음 Read online을 클릭

해당 xml들을 복사 후 

웹 어플리케이션에서 클라이언트의 요청을 받기 위한 컨텍스트 설정이며, 요청과 관련된 객체를 정의하는 servlet-context에 붙여넣기를 한다.prefix가 이 경로에서 파일을 찾는다는 뜻. 그리고 suffix는 어떤 타입의 파일을 찾을지를 의미한다. order로 우선순위는 1. 그리고  UTF-8로 인코딩을 설정하였다.

뷰 없이도, 해당 요청이 정상적으로 실행되는지 확인할 수 있다. 작성후 실행 하면, 응답 코드가 뜨는데, 이 응답 코드로 요청이 정상 실행되는지 판단 가능하다. 만약 코드가 200번대라면 요청에 성공적으로 수행되었다는 뜻이고, 400번대는 사용자의 잘못된 요청으로 처리할 수 없음을 의미한다. 500번대는 내부 서버에 오류가 있음을 의미한다.

fetch 함수?

원격 API를 간편하게 호출할 수 있도록 자바스크립트에서 fetch 함수를 지원하고 있다. request 같은 라이브러리 없이도 사용할 수 있기 때문에 파일의 용량을 줄이는데 크게 도움이 된다.

GET 호출

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외 객체를 reject한다.

대부분의 REST API들은 JSON의 형태의 데이터를 응답하기 때문에, 응답(response) 객체는 json() 메서드를 제공한다.

POST 호출

method 옵션을 post로 지정해주고, header 옵션을 통해 JSON 포멧을 사용한다고 알려줘야 하며, 요청 전문을 JSON 포멧으로 직렬화 하여, 가장 중요한 body 옵션에 설정해준다.

Restful 이란?

요청 본문을 자바 객체로 변환하고 자바 객체를 응답 본문으로 변환함

예시

pom.xml로 가서 라이브러리 설정

@ResponseBody는 view를 반환하지 않고 String 데이터를 반환한다. 즉 return에서 설정한 해당 주소로 가는 것이 아닌 화면에 메세지가 뜨게 하고.. 이 메세지가 곧 String 데이터이다.

main.jsp를 이렇게 만든 후

get_users 메소드를 다음과 같이 만들고 Get매핑.

Go 버튼을 누르면, 설정했던 UserDTO의 List 객체들이 다음과 같이 반환된다.

자바스크립트로 JSON 객체로 변환 후 Post 요청을 해봤다. 여기서의 @RequestBody는 요청에 실려서 온 데이터라는 뜻이다.

위 처럼 작성 후, 보내기 버튼을 누르자. Post로 요청이 온걸 확인할 수 있다.

각각 users와 number에 get요청을 한 후, console로 반환한 데이터를 불러온 모습.

files라는 테이블을 하나 만든다. no 가 PK

File의 dto, vo 객체를 다음과 같이 만든다.

BoardDTO에 FileDTO 객체 추가

새로운 게시물의 파일들을 insert하는 쿼리문과, 전달받은 no의 게시물을 전부 가져오는 역할의 select문을 작성

BoardService 클래스를 만든다. 여러개의 mapper를 트랜젝션 처리하는 용도이다. 게시물의 업로드와 게시물 안의 파일 업로드 기능을 동시에 한다. 이미 만들어놓았던 insert_board를 여기에 잘라낸다.

이미 만들어져있는 게시물 작성 페이지와, 게시물 보기 페이지를 이렇게 수정한다.

BoardController로 가서, 일단 파일 저장을 담당하는 일반 메소드를 만든다. SAVE_PATH라는 파일 경로 변수를 먼저 만든 후에, 다음과 같이 설정한다.

배웠던 카테고리 방식을 이용하여, 다운로드가 가능하도록 설정하였다. view.jsp에서 첨부파일 리스트 내의 a태그에 다운로드가 가능하도록 설정해 놓았다.

실제 DB와 연동 후 전달받은 내용으로 insert를 시도. boardService 클래스에 만들어 놓았던 게시물 작성 및 파일 업로드 메소드 insert_board를 불러온다.

이미 만들어 놓은 게시물 보기 GET을 다음과 같이 수정한다. 업로드한 파일이 보여져야 하기 때문.

파일 업로드 후, 게시물에 들어가봤다.. 문제는 경로 설정이 제대로 되어 있지 않아, 그 곳에 데이터가 저장되지 못해, 메인 이미지가 불러오지 못했고, 첨부파일은 다운로드가 되지 않았다. 

경로 설정을 제대로 한 후, 게시물을 다시 올려봤다. 해당 경로에 이미지가 저장이 되어 있었고, 역시 이미지와 첨부파일이 제대로 올려져 있다.

먼저 회원가입창 html을 만든다. 

아이디와 닉네임이 중복되는지 검사하는 메서드와, 검사가 끝났을 시, 유저를 추가하는 메서드를 만든다.

xml로 가서 쿼리문을 작성하고 매핑한다.  아이디가 null 이 아닐경우 해당 id의 정보를 조회하고, nickName이 null이 아닐 경우 해당 nickName의 정보를 조회한다. LIMIT 1로 단 한개의 정보만을 선택하도록 하였다.

중복 검사 및 회원가입. 먼저 GET요청으로 회원가입 창으로 가게 하였고, POST 요청으로 중복검사 및 회원가입을 진행한다. 만들어 놓았던 is_user_exist 메서드로 아이디 혹은 닉네임이 중복되는게 없는 경우, insert_user 메서드로 DB에 작성한 유저 정보를 추가하고, 로그인 창으로 리다이렉트. 만약 아이디 혹은 닉네임이 중복일 경우, 메세지를 다음과 같이 설정하고, 회원가입 창으로 리다이렉트.

이미 있는 아이디나 닉네임을 적었을 시, ID 혹은 NICKNAME이 중복이라고 메세지가 뜨고, 회원가입창에 리다이렉트

중복되지 않는 아이디와 닉네임을 작성 시, 해당 아이디와 닉네임으로 DB에 저장되고, 로그인 창으로 이동한다.

로그인 창에서 해당 아이디를 적고 로그인하면 로그인이 된다.