2021. 12. 22. 17:56ㆍ[프론트엔드]_/[Javascript]_ES6
저번에 공부한 Ajax기법은
XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주게 하는 기법이다.
요즘 XML은 거의 사용 안하고 JSON을 많이 사용하기 때문에 Fetch를 많이 사용한다.
게다가 Fetch는 Promise로 구성되어 있기 때문에 비동기적기고 then과 catch 등을 이용해 가독성이 뛰어나다
게다가 기본 API라 바로 사용 가능한 잇점도 있다.
기본 문법]
default : GET
CRUD 의 READ와 비슷하다
fetch 는 HTTP 요청을 전송한 URL, HTTP 요청 메소드 (GET POST PUT DELETE 등), HTTP 요청 헤더 등을 파라미터로 받아 전달한다.fetch() 에서 요청 메소드를 지정하지 않는다면 default 로 GET으로 지정된다.
GET : 원격 API 에 있는 데이터를 가져올 떄 쓰인다. API URL 뿐 만 아니라 내부의 파일 경로 까지도 GET은 불러와서 보여 줄 수 있다.
POST: 새로운 자원 생성 CRUD 의 Create와 비슷
default가 아니기 때문에
method : POST 를 지정해줘야 하고
headers : json형식임을 알려줘야 한다.
body : 요청 전문을 JSON 포맷으로 바꿔서 넣어준다.
한참 고민했던 것.
처음에는 url도 json 파일이 위치한 단순 파일 위치를 지정해주고 테스트하면 하나도 먹질 않는다. 405 not found라는 오류가 떳다.
확인해보니 GET을 제외한 모든 method 요청은 API URL 만 요청받기 때문이다.
그럼 spring 에서 api url에 해당하는 것은
controller 를 이용해서 RequestMapping을 해주면 된다.
Controller를 만들어준다.
그리고 다음과 같이 작성하였다.
우선 POST와 PUT 을 구현하였고, 각각 해당 URL의 요청을 받으면 불리도록 되어있다.
method 형식도 각각 구현하여 만약 요청된 method 형식이 다르면 405 에러를 발생시킨다.
우선 해당하는 값을 받아서 response 해주고 바로 뒤에 있는 값인 "response data" 를 body에 넣어준다.
콘솔 결과
'[프론트엔드]_ > [Javascript]_ES6' 카테고리의 다른 글
[Debugger]_DevTools (0) | 2022.01.03 |
---|---|
[Fetch_API]_Spring에서 간단한 Auth 구분 통신 만들기 (0) | 2021.12.30 |
[Ajax_Js]_기본정리 (0) | 2021.12.22 |
[WEB 개발]_코드리뷰 1번 (0) | 2021.12.20 |
[WEB 개발]_사용한 함수, 기능 정리 4번 (0) | 2021.12.16 |