Spring.11_REST 기능

< 수업 순서 - 2024.09.11 >

REST(Representational State Transfer) : 자원(Resource)의 표현(Representational)에 의해 상태(State)를 전달(Transfer)하는 것을 의미
→ 페이지 요청에 대한 실행결과를 XML 문서 또는 JSON 형식의 문서로 클라이언트에게 응답 처리

• Restful API : REST 기능을 사용해 두 컴퓨터의 시스템이 안전하게 값을 주고 받기 위한 프로그램 → 스마트기기의 프로그램(앱) 실행에 필요한 정보를 전달받거나 실행결과를 제공하기 위해 작성
• 뷰를 이용하지 않고 문자열(JSON)로 클라이언트에게 응답하는 기능

1. RestfulController : Restful API

• rest 폴더의 join 페이지를 GET 방식으로 요청 시 input JSP 문서 반환

📍응답 처리하는 방법

① 페이지 요청시 요청 처리 메소드를 호출해 요청 처리 후 실행결과를 Model 객체의 Request Scope 속성값으로 저장하고 뷰이름(ViewName)을 반환하여 뷰(View)로 응답 처리 - 일반적인 웹프로그램

• 출력페이지인 output JSP 문서 반환

② 요청 처리 메소드의 반환값을 리스폰즈 메세지 몸체부에 저장하여 일반 문서로 클라이언트에게 전달하여 응답

• 출력 처리 - 문자열로만 출력

• @ResponseBody : 요청 처리 메소드의 반환값(문자열)을 리스폰즈 메세지 몸체부에 저장하여 클라이언트에게 전달하여 응답하는 기능을 제공하는 어노테이션
  
  → Front Controller가 요청 처리 메소드의 반환값을 뷰로 변환하여 응답 처리하지 않고 요청 처리 메소드의 반환값으로 직접 응답 처리
  
  → 페이지 요청시 JSON 형식의 문자열로 클라이언트에게 응답 처리하기 위해 사용

• @RequestBody : 리퀘스트 메세지 몸체부에 저장된 모든 전달값을 문자열로 제공받아 매개변수에 전달하기 위한 어노테이션
  
  → 페이지 요청시 JSON 형식으로 전달된 값을 제공받아 매개변수에 저장하기 위해 사용

• 문자열이 아닌 Java 객체를 반환하게 되면 에러가 발생

• 문제점 : 리스폰즈 메세지 몸체부에 Java 객체를 저장해 응답 처리 불가능 - 406 에러코드 발생

• 해결법 : 요청 처리 메소드에 의해 반환받는 Java 객체를 문자열(XML 또는 JSON)로 변환하여 리스폰즈 메세지 몸체부에 저장해 응답 처리
  → jackson-databind 라이브러리 빌드 처리

• ExceptionController에서 Exception 메소드 주석 처리

6. input.jsp

7. output.jsp

8. RestMember

9. pom.xml 에 jackson-databind 라이브러리 빌드 처리

• jackson-databind 라이브러리를 프로젝트에 빌드 처리하면 요청 처리 메소드에 의해 반환되는 Java 객체를 JSON 형식의 문자열로 변경하여 리스폰즈 메세지 몸체부에 저장해 응답 처리 가능
  

10. RestfulController(수정) - jackson-databind 라이브러리 빌드 처리 후

• RestMember 객체를 자바스크립트의 Object 객체(Java 객체)로 변환하여 응답 처리

• 반환받은 Object 객체를 JSON으로 출력

• List 객체를 자바스크립트의 Array 객체로 변환하여 응답 처리 → List 객체의 요소값(RestMember 객체)는 자바스크립트의 Object 객체로 변환

• 반환받은 Object 객체를 JSON으로 출력

• Map 객체를 자바스크립트의 Object 객체로 변환하여 응답 처리

• 반환받은 Object 객체를 JSON으로 출력

11. board.jsp : 글쓰기 JSP 문서, ajax를 이용한 비동기식 방식

---

< REST 기능을 사용하여 게시판 만들기 >

12. rest_Board 테이블, rest_Board_seq 시퀀스 생성

• create table rest_board(idx number primary key, writer varchar2(50), content varchar2(100), regdate date);

• create SEQUENCE rest_board_seq;

13. RestBoard DTO 클래스 : 필드 작성

14. RestBoardMapper.xml

• insert : 게시글 삽입
• update : 게시글 수정
• delete : 해당 번호의 게시글 삭제
• select : 해당 번호의 게시글 검색
• select(Count) : 전체 게시글 갯수
• select(List) : 전체 게시글 목록 검색(원하는 행 - 페이징 처리)

15. RestBoardMapper 인터페이스

16. RestBoardDAO 인터페이스 : RestBoardMapper 인터페이스 동일

17. RestBoardDAOImpl : 매퍼 클래스의 메소드 호출하여 sql 명령 실행하는 메소드 작성

18. RestBoardService

19. RestBoardServiceImpl : Map 객체를 반환하는 메소드가 가장 중요! - 다시 보기

20. RestBoardController

• @RestController : REST 기능을 제공하는 요청 처리 메소드(Restful API)만 작성된 Controller 클래스를 Spring Bean으로 등록하기 위한 어노테이션록하기 위한 어노테이션 → 요청 처리 메소드에 @ResponseBody 어노테이션을 사용하지 않아도 요청 처리 메소드의 반환값을 사용해 클라이언트에게 문자열(JSON)로 응답 처리

• 아무 게시글이 존재하지 않기 때문에 getRestBoardList() 메소드가 처리되어 map 값으로 반환된 Pager 객체에 대한 정보만 JSON으로 출력

< 수업 순서 - 2024.09.12 >

1. RestBoardController(수정)

📍 controller 클래스가 제대로 작동되는지 확인하는 방법 : 검증 프로그램 사용(postman)

• 게시글을 전달받아 REST_BOARD 테이블의 행으로 삽입하고 실행결과를 문자열로 응답하는 요청 처리 메소드

  • @PostMapping 어노테이션을 사용해 post 방식을 board_add 페이지 요청시 처리되는 메소드

  • HtmlUtils.htmlEscape(String str) : 매개변수로 전달받은 문자열에 존재하는 HTML 태그 관련 문자를 회피문자로 변환하여 반환하는 정적메소드 - XSS 공경에 대한 방어

  • success 일반 문자열 반환
    

  • POST 방식으로 JSON 형식의 row 데이터 추가 : 홍길동, 테스트

    

  • 추가 성공 : success

    

• REST_BOARD 테이블에 저장된 행에서 요청 페이지 번호에 해당하는 행만 검색하여 JSON 형식의 문자열로 응답하는 요청 처리 메소드

• @GetMapping 어노테이션을 사용해 GET 방식으로 board_list 요청시 처리되는 메소드

  

  • Get 방식으로 board_list 페이지 요청시 restBoardList에 추가된 걸 확인할 수 있음.

    

• 게시글을 전달받아 REST_BOARD 테이블에 저장된 행을 변경하고 실행결과를 문자열로 응답하는 요청 처리 메소드

  

  • Put 방식으로 board_modify 페이지 요청시 JSON 형식으로 작성한 내용으로 행 변경 → success

    

• 글번호를 전달받아 REST_BOARD 테이블에 저장된 행을 검색하여 JSON 형식의 문자열로 응답하는 요청 처리 메소드

  • 페이지 요청시 요청 URL 주소에 {이름} 형식으로 값을 전달받아 매개변수에 저장해 요청 처리 메소드에서 사용

  • 요청 URL 주소로 제공된 값을 매개변수에 저장하여 사용하기 위해서는 @PathVariable 어노테이션 사용

  • @PathVariable : 페이지를 요청한 URL 주소로 값을 전달받아 매개변수에 저장하기 위한 어노테이션
    → 요청 URL 주소로 값을 제공받기 위한 이름과 같은 이름으로 매개변수를 작성해야만 요청 URL 주소로 제공된 값을 매개변수에 저장 가능
    

  • GET 방식으로 board_view?idx=1 페이지 요청

  • URL 주소에 {이름}형식으로 값을 전달받았기 때문에 {이름}으로 전달받은 값을 페이지 요청시 바로 작성하여 요청

    

• 글번호를 전달받아 REST_BOARD 테이블에 저장된 행을 삭제하고 실행결과를 문자열로 응답하는 요청 처리 메소드
  

  • DELETE 방식으로 board_remove?idx=1 페이지 요청

  • {이름}으로 idx 값을 전달받았기 때문에 페이지 요청시 URL에 전부 작성하여 요청

    

  • board_list 페이지 재요청하여 삭제됐는지 확인.
    

2. board.jsp(수정)

JavaScript 추가

• ① 요청 페이지 번호를 저장하기 위한 전역변수 작성
  → 프로그램 종료시까지 값을 유지해 모든 자바스크립트 함수에서 사용할 수 있도록 전역변수로 선언
  

• ② 페이지를 요청해 게시글 목록을 제공받아 출력하는 함수 호출
  

• ③ boardListDisplay 함수 : 요청 페이지 번호를 전달받아 페이지 번호에 해당하는 게시글 목록을 출력하는 함수
  
  → 비동기식 방식(페이지 이동❌)으로 페이지를 요청해 JSON 형식의 문자열로 응답받아 HTML 태그로 변환하여 출력 처리

  

  • 매개변수 : pageNum, pageSize - 요청한 페이지 정보 저장

  • page에 매개변수로 전달받은 pageNum 값 저장

  • 비동기식 방식 : jQuery가 갖는 ajax 함수 이용

  • get 방식으로 /rest/board_list 페이지 요청하여 pageNum, pageSize 데이터(인코딩 처리된 전달값)를 json 타입으로 응답.

  • 성공시 결과값(JSON 형태의 문자열 - result) 출력 → 주석 처리
    

  • 응답받은 자바스크립트 객체를 HTMl 태그로 변환하여 출력 처리

  • 만약 결과값(pager, restBoardList) 중 restBoardList(Array 객체) 의 갯수가 0이면(게시글이 없는 경우) html 변수에 태그 하나하나씩 추가, 검색된 게시글 없습니다. 추가 → 게시글 목록을 출력하는 태그에 html 태그 출력.
    

  • 그렇지 않은 경우(게시글이 있는 경우) 결과값 중 restBoardList 값을 each 함수를 사용해 게시글 목록을 하나씩 출력

    each : 게시글이 여러 개 있으면 그걸 하나씩 꺼내서 화면에 보여주는 역할, array 객체를 반복 처리

  • 마찬가지로 게시글 목록을 출력하는 태그에 html 태그 출력.

  • 페이지 번호를 출력하는 함수 호출 : pageNumberDisplay()

• ③ 페이징 처리 관련 Object 객체를 전달받아 HTML 태그로 변환해 페이지 번호를 출력하는 함수

  

  • pageNumberDisplay(pager) : 페이징 처리에 관한 정보를 전달받기 위해 매개변수를 Pager 객체로 설정
  • html 변수 선언
  • 만약 startPage 가 blockSize(하나의 블럭에 출력될 페이지 번호의 갯수)보다 크다면 이전 버튼을 눌렀을 때 boardListDisplay가 prevPage(이전 블럭에 출력될 시작 페이지 번호)로 이동
  • 그렇지 않은 경우 [이전] 텍스트만 존재
  • 시작 페이지부터 종료 페이지보다 작은 수까지 i 값 증가하여 반복적으로 i 출력, boardListDisplay 함수에 매개변수를 i 로 사용해 i 값이 pageNum으로 설정되어 이동할 수 있게.
  • 그렇지 않은 경우 [i] 텍스트만 존재
  • 블럭 내에 마지막 페이지가 전체 페이지 수가 아닐 경우 [다음] 을 클릭하면 다음 블럭에 출력될 시작 페이지 번호로 이동
  • 그렇지 않은 경우 [다음] 텍스트만 존재

• ④ 모든 입력태그 초기화 및 태그 숨김 처리하는 함수

  

  • init 함수 호출 시 class가 insert, update 인 태그의 값 ""이 되고, inputDiv인 태그는 숨김 처리

• ⑤ [글쓰기] 태그를 클릭한 경우 호출될 이벤트 처리 함수 등록

  
  

  • 글쓰기 태그 클릭 시 신규 게시글을 입력받기 위해 insertDiv 태그 보여주기(show)

• ⑦ 신규 게시글을 입력받기 위한 태그에서 [저장] 태그를 클릭한 경우 호출될 이벤트 처리 함수 등록
  → 입력값을 삽입 처리하는 Restful API를 비동기식으로 요청하여 실행결과를 제공받아 출력 처리

  

  • [저장] 태그 클릭 시 id가 insertWriter, insertContent 인 값을 각각 writer, content 변수에 저장
  • 만약 작성자가 없는 경우 알림, 내용이 없는 경우 알림 표시
  • 비동기식 요청 ajax 사용 : post 방식으로 /rest/board_add 페이지 요청. 리퀘스트 메세지 몸체부에 저장되어 전달될 값의 파일형식을 json으로 변경하여 반환. 성공시 결과값 호출. 결과 값이 "success" 텍스트면 초기화 함수(init) 호출하여 inputDiv 숨기기하고 boardListDisplay 함수 호출하여 출력 처리

• ⑥ 신규 게시글을 입력받기 위한 태그에서 [취소] 태그를 클릭한 경우 호출될 이벤트 처리 함수 등록
  

• ⑦ 게시글의 [변경] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
  → 매개변수로 전달받은 글번호의 게시글을 검색하여 JSON 형식의 문자열로 제공하는 Restful API를 비동기식 방식으로 요청하여 출력 처리
  

  • [변경] 태그를 누르면 일단 init 호출되어 class가 update인 input 태그 초기화되고 updateDiv 보여짐.
  • 비동기식 방식으로 ajax 사용 : get 방식으로 rest/board_view 페이지 usl 주소에 idx 번호 함께 요청(@PathVariable 어노테이션을 사용해서 가능), json 타입으로 반환. 성공하면 class 이름이 updateIdx, updateWriter, updateContent 인 태그에 각각의 결과값 저장

• ⑧ 변경 게시글을 입력받기 위한 태그에서 [변경] 태그를 클릭한 경우 호출될 이벤트 처리 함수 등록
  → 입력값으로 변경 처리하는 Restful API를 비동기식으로 요청하여 실행결과를 제공받아 출력 처리

  

  • updateBtn 클릭 시 idx, writer, content 변수에 각각의 값 저장
  • 작성자와 내용이 없을 경우 알림 메세지
  • 비동기식 방식 ajax : put(update) 방식으로 /rest/board_modify 페이지 요청. json 타입으로 변경하고 성공시 결과값이 "success" 텍스트와 동일하다면 초기화 시킨 후 boardListDisplay 함수 호출

• ⑨ 변경 게시글을 입력받기 위한 태그에서 [취소] 태그를 클릭한 경우 호출될 이벤트 처리 함수 등록
  

• ⑩ 게시글의 [삭제] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
  → 게시글을 삭제 처리하는 Restful API를 비동기식으로 요청하여 실행결과를 제공받아 출력 처리

  

  • remove 함수 호출시 삭제하겠냐는 알림에 확인을 누르면 비동기식 요청.
  • delete 방식으로 /rest/board_remove 페이지를 idx 글번호와 함께 요청
  • 성공시 결과값이 "success"텍스트와 동일하면 초기화하고 boardListDisplay 함수 호출

→ Restful API를 ajax 비동기식 방식으로 이동해 JSON 형식으로 전달받아 응답?

---