230922 (금)
<복습>
- 목록보기 : 글쓰기 버튼
* authenticated : 로그인 한 사용자만 접근 가능하다.
- 상세보기 : 수정, 삭제 버튼
* 소유자가 아닐 경우에는 버튼을 보여주면 안됨.
<오늘 배울 내용>
게시판 상세보기 수정 - Authenticated 하게
Travel 수정하기
<Ajax(Asynchronous Javascript and XML)>
- 페이지 이동 없이 자바스크립트로 서버와 통신하는 기법
- 현재는 XML 보다 JSON으로 데이터 표현
* 전송 데이터, 응답 데이터 모드 application/json 인코딩
- 브라우저에서 XMLHttpRequest 객체 제공
* 사용이 매우 어려움
- XMLHttpRequest을 사용하는 상위 라이브러리를 주로 이용
* $.ajax -- jQuery 라이브러리
* fetch() -- js 기본 함수로 제공
* axios -- frontend에서 많이 사용하는 라이브러리
등을 이용
<REST API>
1. REST(Representational State Transfer)
- 정보를 자원으로 간주
- 각 자원에게 URI를 배정
- 자원에 대한 조작은 HTTP 메서드로 표현 -> URI와 HTTP 메소드를 이용해 객체화된 서비스에 접근하는 것
- 예 : 게시판
- /api/board/{bno} : pathVariable
2. REST 구성
- 자원(RESOURCE) - URI
- 행위(Verb) - HTTP METHOD
* GET : 읽기 (목록보기, 상세보기)
* POST : 생성
* PUT : 수정
* DELETE : 삭제
- 표현(Representations) - 일반적으로 JSON 사용 (함수 호출과 다를 바 없음.)
- REST로 처리되는 URI/METHOD 조합 -> REST API
- REST API 서비스
* 클라이언트의 종류에 제한을 두지 않음
* 웹 브라우저, 일반 애플리케이션 등과 통신 가능
3. 댓글 처리
- 주로 rest api를 구현해서 제공
- bno : 관련 게시글
- no : 댓글의 id
- json으로 직접 응답하는 대표적인 예 : avatar
==> 이때 사용했던 annotation : @ResponseBody
<REST API>
1. @RestController
- 처리 결과를 뷰로 내보내는 것이 아니라 직접 응답하는 컨트롤러
- 모든 메서드에 @ResponseBody 자동 추가
- 처리 결과를 객체로 바로 리턴 가능
* Gson, Jackson같은 라이브러리가 등록되어 있어야 함.
* 해당 객체를 json 문자열로 변경하여 클라이언트에게 응답
- ResponseEntity<T>를 리턴
* 응답코드, 응답헤더, 내용을 직접 지정 가능
- 요청 body는 Json 인코딩(application/json) 이므로 -> 모델 객체 앞에 @RequestBody(json으로 해석해라 라는 의미) 추가
* @RequestBody를 사용하지 않으면 아무 값도 들어가지 않음. (주의)
2. REST 테스트
- PostMan 또는 Rest 크롬 확장 프로그램 이용
- Talend API Tester
* 크롬 확장 프로그램 설치 : Talend API Tester로 검색하여 크롬 확장 프로그램 설치
3. 서버에서는 500에러가 아닌 이상, 에러로 간주하지 않는다.
그래서 없는 데이터를 요청했을 때, 에러가 발생하지 않는다.
하지만, 에러를 발생시키는 것이 개발자나, 사용자의 입장에서 봤을때 어색하지 않은 상황이다.
만약에 400대 에러에도 서버에서 에러를 발생시키고 싶다면, ResponseEntity<T>를 사용해야 한다.
<fetch() 함수>
1. fetch() 사용법
- 매개변수
* 첫 번째 인자로 URL,
* 두 번째 인자로 옵션 객체 ==> { method, content-type, body 등... }
- 리턴 타입
* Promise 타입의 객체 (비동기 함수의 Callback hell을 방지하기 위해서 여러 해결책이 나왔으며, 그 중에서 살아남은 것)
* API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject 합니다.
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));
2. GET 호출
- fetch() 함수는 디폴트로 GET 방식으로 작동
- 옵션 인자가 필요 없음
fetch(url)
.then((response) => response.json())
.then((data) => console.log(data));
async function rest_get(url) {
try {
let res = await fetch(url);
return await res.json();
} catch(e) {
console.log(e);
}
}