Spring boot - react 연동

백엔드 개발자로서 공부를 하다 프론트인 react를 사용할 일이 생겼다. 마침 springboot는 사용해본 적 없었는데 겸사겸사 프론트로 react를 사용하는 김에 springboot로 프로젝트를 하나 해보고 싶어서 진행하게 되었다

일단 프로젝트를 진행하기 전에 연동을 먼저 해보았다.

ide는 intellij를 사용하면서 시작하였다

(intellij도 이번 기회에 sts에서 갈아탔다 신년에 뭔가 새로운 기분으로 ide까지 새로 시작하였다)

1. 프로젝트 생성

springboot 프로젝트를 생성해주었다 maven이 아닌 gradle로 진행하였고 java 버전은 11로 시작하였다 dependencies는 springbootdevtool과 lombok, springweb을 추가해주었다 처음 생성이어서 그런지 15분 정도 시간이 걸렸다

 

2.react 연동

intellij 터미널에서 main으로 이동한 뒤 create-react-app [프로젝트 이름]으로 진행하였습니다

그렇게 진행하면 밑에 그림처럼 happy hacking!이라는 문구가 나오며 설치가 완료됩니다

 

설치가 완료되면 프로젝트 파일로 이동한다 we suggest에 나온 대로

front에 이동한 다음 npm start를 해주었다 밑에 사진이 나오며 잘 작동되는 것을 확인할 수 있다 

 

확인이 완료되면 npm install명령어를 입력하여 진행한다

 

이렇게 완료가 되면 npm run-script build를 진행한다 

 

이러한 완료가 나오면 npm run eject를 실행한다

이때 저 같은 경우에는 오류가 나왔는데 오류를 확인하니 grit에 commit을 안 한 오류인 것 같았다

 

아직 git에 연동을 하지 않았는데 오류가 나와서 당황했지만

검색해보니 git add .

git commit -am "커밋할 내용"

을 작성하면 순조롭게 진행된다

 

 

프론트프로젝트이름/config/paths.js로 이동하여

(저 같은 경우 front/config/paths.js로 이동하였습니다)

 

위 사진의 형광펜에 칠한 문구로 수정해주면 된다

이후 프론트 프로젝트 이름/build로 가서 파일을 전부 삭제해주고

build.gradle로 이동해서

 

dependencies와 test사이에 위의 문구를 추가해주면 된다

 

build를 눌러서 실행시켜준다 그렇게 완료되면 

 

DemoApplication을 실행시켜주면 밑의 문구가 나오며 실행이 되고

 

localhost:8080으로 들어가면 react화면이 출력이 된다 이렇게 하면 일단 연동은 끝이 났다