React & Spring
React와 Spring을 같이 사용하는 이유
React는 UI를 만드는데 특화되어 있으며, Spring는 서버측 로직을 처리하는데 특화되어 있습니다. 이 두 기술을 함께 사용하면, 각각의 장점
을 살려서 웹 애플리케이션을 개발할 수 있습니다.
React와 Spring을 같이 사용하는 방법
React와 Spring를 함께 사용하는 방법은 React를 프론트엔드로 사용하여 UI를 구축하고, Spring를 백엔드로 사용하여 데이터를 처리하고
API를 제공하는 방식입니다.
일반적으로 React와 Spring를 함께 사용하는 방법은 다음과 같습니다
React & Spring 사용방법
폴더생성
Spring Dependencies 설정
프론트 포트(3000) -> 서버포트(80) 대체
서버포트부터 키고 그 다음 프론트
axios
브라우저 및 nodejs 환경에서
비동기 요청을 쉽게 처리할 수 있게 해주는 JavaScript 라이브러리
터미널에서 npm / yarn 통해 설치
$ npm install axios
$ yarn add axios
-
post 요청 시 데이터를 자동으로 JSON 데이터 형태로 처리해주므로,
fetch 와 달리 JSON.stringfy 를 명시적으로 호출할 필요가 없음 -
응답을 JSON 으로 자동 파싱해주기 때문에, fetch 처럼 두번째 then 으로 응답을 파싱할 필요가 없다
-
headers 와 body 를 명시적으로 설정하지 않아도 된다.
headers 의 경우는 기본적으로 Content-Type : application/json 으로 설정되어 있음
단, header 의 내용 변경 시 명시적으로 작성해야 함
ex) headers : {'Authorization' : 'Bearer {token}'} -> jwt 인증 방법
