Restful API
웹에서 데이터를 받는 규칙을 내가 생성해 간다.
페이지 이동 없이 데이터를 받아올 수 있다.
-
크로스 오리진
콘텐츠는 node.js 에서 받고 요청은 Spring 에 하는 것
폼 전송은 node 에 하고 porxy Server 가 중개 역할을 하여 Spring 에 전달
=> proxy Server = 중개자 -
프로젝트 구성
-
React API 서버 전송 메소드
post : 보내기 , get : 얻어오기 , delete , put : 수정, fetch : 일부 수정 -
페이지 전환 없이 자바스크립트로 요청하면 위의 방법을 모두 사용 가능
Spring json 응답
-
@RestController : 응답을 json 으로 만듬
-
@RequestBody : 요청 json 문자열에서 데이터 추출
-
Postman test
-
@RequestParam 을 사용해서 form name 과 일치한 param 데이터를 뽑았음
-
application/x-www-form-urlencoded;charset=utf-8
데이터를 받아와서 추출하는 방식에 차이가 존재한다.
Restful 의 전체 프로세스
전체흐름
React
어떻게 form 데이터를 json 형식으로 얻어올 수 있는가? fetch , axios
- 폼 전송 막고, form 데이터 object로 변경, object 를 json으로 변경,
- object 가 json 으로 변경됨
- fetch 로 3000 번 포트 -> proxy로 9000번 포트 타고 sprig 으로 접속
React 는 Spring 에 json 형식으로 데이터를 보낸다.
Spring 도 React 에 json 형식으로 응답한다.
Spring
- entity : react 에서 받아온 폼에 입력한 json 데이터는 id가 0이다.
근데 entity 가 숫자가 0 인 경우에는 수정을 한다.
우리는 추가를 할 거 기에 0을 null 로 바꿔서 entity 에 저장한다.
entity는 자동으로 시퀀스로 숫자를 넣어줌
- entity 에 dto를 entity로 바꿔주는 메서드 추가
- dto : entity를 dto로 바꿔주는 메서드 추가
- controller
- @RestController 로 응답을 모두 json 형식으로 응답
- 같은 요청 ("/posts") 이라도 get과 post 로 메소드를 구분 짓는다.- @RequestBody 로 react 에서 보낸 json 에서 데이터 추출
- 그러면 키값에 맞게 dto 에 담김
- 글 삽입 메소드 : post
- 글 리스트 갖고오는 메소드 : get
방식으로 구분해서 메서드를 구성하는 게 신기한듯.
useEffect
App 함수 안에 함수가 존재할 때 무한루프 문제가 발생한다.
무한루프의 문제점
- 페이지 로딩 시 App이 실행되고 refresh() 가 실행된다. refresh 함수 안에는 상태값 관리하는 setPosts 가 있기에 상태값이 변한다. 상태값이 변했기에 다시 App이 실행이 되고 refresh() 가 실행되고 App이 실행되고.. => 무한루프의 문제에 빠진다.
useEffect
- 빈 배열로 작성하면 처음 페이지 접속 시에만 refresh()가 실행된다.
- 다음에 setPosts(data)가 실행되어도 다시 refresh()를 호출하지 않음.
- state로 넣으면 그 상태가 변할때마다 실행된다.
DELETE 요청
- method : DELETE
- 파라미터로 달고오는 데이터가 계속 변할 때, {}와 @PathVariable 사용함
Spring와 React 는 json 형식으로 요청 응답함...
restful api의 버전관리
-
spring 에서 버전관리 : @RequestMapping 어노테이션
-
react 에서 버전관리 : fetch 혹은 axios의 접속 url에 버전 붙이기
swagger
작성한 분산작업이 제대로 돌아가는지 확인 가능...
- 지금까지 작성한 Restful을 확인할 수 가 있다.
- properites 와 dependencies 추가하고
- @Configuration 으로 환경 설정하고 @bean 으로 관리하면 환경설정됨
- 이렇게 작성하면 swagger 에서 프로젝트를 보여줄 수 있음
axios
fetch 의 json 변경 과정을 자동으로 해준다.
(fetch 보다 간편하게 Spring에서 데이터 받아옴.)
- 라이브러리 설치
- 전달할 데이터가 없으면 obj 작성 하지 않는다.
React
component
- App.jsx 에서 다른 컴포넌트 요소를 받아와서 사용 가능
- App.jsx 에서 자식 요소에게 데이터를 줄수도 있음
- 부모 요소에서 준 데이터를 매개변수에 받아오고 jsx 에서 활용한다.
- 매개변수로 받아온 데이터는 object 이며 data 라는 방에 찐 데이터가 존재한다.
부모 요소에서 데이터를 주면 매개변수(odject)로 받아오고 찐 데이터는 data 라는 방에 존재한다.
보완
- json 문자열
