[기본🌱] 스프링 리액트 개발 환경 설정

basic 카테고리는 spring react 프로젝트를 시작하는 분들을 위한 포스팅입니다

직접 하나하나 처음부터 작성하는 것을 목표로 하고 있습니다

 

이 글의 순서는 제 포스팅 https://jaewonna.tistory.com/94 를 참고해주세요

그럼 시작합니다잇~~~~~~~~~~~~~!

 

1. Spring Boot

 

 

 

 

 

spring.io 홈페이지에서 파일 생성

 

 

파일에서 오른쪽 클릭후 open as project로 열기

 

 

 

 

build.gradle 선택 후 open as project로 열기

 

 

 

 

 

 

 

아주 잘돌아간당 

 

 

 

✔️1. 이클립스에서 자바 버전 맞추기 11로

 

 

 

요로케

 

 

 

 

 

 

 

 

 

2. React.js

 

 

 

폴더구조는 frontend가 밖에 있는 것이 아닌 main안에 들어가 있다 ?!

 

터미널은 따로 cmd 창을 여는 것이 아니라

intellij안에서 여는 것이 더 편하당

 

 

빨간줄 주목!

우리는 저 오류를 해결해야한다 ㅠ

저게 도대체 뭘까

 

 

 

 

 

오.. 

 

 

 

3. Spring Boot와 React 연동하기

 

 

Proxy 설정 (공식문서)

CORS 관련 오류를 방지하기 위해 proxy를 설정해주도록 하겠습니다.

CORS (Cross Origin Resource Sharing)
서버와 클라이언트가 동일한 IP주소에서 동작하고 있다면, resource를 제약 없이 서로 공유할 수 있지만, 만약 다른 도메인에 있다면 원칙적으로 어떤 데이터도 주고받을 수 없도록 하는 매커니즘입니다.

src/main/frontend 폴더에서 필요한 모듈을 설치해줍니다.

 

가즈앗

 

 

명령어

npm install http-proxy-middleware --save

 

setProxy.js

 

 

 

Axios를 이용한 서버 통신

 

1. 프론트엔드

App.js

 

 

 

 

 

2. 백엔드

 

HelloWorldController.java

 

 

spring boot 실행시키고

react도 npm start로 실행시키기

과연 결과는..???

 

 

 

두구두구

 

 

스프링은 성공 그럼 리엑트는...?

 

 

 

 

 

 

❗️❗️

 

오류 이름

client(react)와 server(node.js) 연결하기 - proxy 연결 오류

 

해결했다..

 

자세한 사항은 제 다른 포스팅 참조

 

https://jaewonna.tistory.com/92

[아주 중요함..🌟🌟] 리액트 - 스프링부트 연동 CORS 이슈 해결!

 

 

 

 

package.json에 "proxy":"http://localhost:8080/"을 추가했다

 

가장 중요한 부분은 8080/ 슬래쉬 까지 찍어야 한다

 

 

 

 

안녕이란 말 hello hello

이젠 굿바이 굿바이

내 사라진 시간도 굿바이 굿바이..