스프링부트+리액트 처음겪을수 있는 오류와 해결법

오늘부터 스프링부트 프로젝트를 시작하였다.

오늘은 첫날이라 부트프로젝트 생성+리액트 테스트, 도커 서버세팅,깃랩 CI/CD 구축까지 할 생각이다. 

처음이라 Boot의 생성과 리액트의 실행에도 애를 먹어서 까먹어서 같은 실수를 하지않기 위해서 기록을 남겨보려고 한다.

 

개발환경은 

개발툴 : intellij IDEA

JDK : 11

백엔드 : Spring Boot 2.7.16

프론트엔드 : React 

데이터 상호작용 : Axios

 

이렇게 생성하였다.

 

우선 프로젝트 생성에서 주의할점으로

1. VPN을 사용중이라면 연결해제(로컬호스트 연결거부뜸)

2. JDK버전이 1.8, 11 이라면 부트버전 2.7을 사용해야한다(버전이 맞지않다는 오류뜸)

3. 패키지명은 기존 스프링 프레임워크와 동일하게 com.xxx.comtroller or service 이런식으로

 

이렇게 3가지가 있다.(상세한 생성방법은 다른 블로그를 참고)

 

그럼 간단히 React 를 설치하는데 주의할점으로는

1. 기본적으로 Terminal이 WindowPowerShell 로 되어있을건데 cmd로 변경이 필요

2. cmd창에서 npx명령어를 사용하려고 하면 사용불가일건데 node.js를 설치가 필요

3. 설치가 완료되었다면 cd /src/main 에 들어가서

npx create-react-app {프로젝트명}

이렇게 리액트 component를 생성할 필요가 있음

 

다음은 Axios에서 주의해야할 설정으로는

1. 프록시 관련 내용의 요류가 많이 뜰것이다. 

       여기서 간단히 내용을 정리한다면   리액트는 localhost:3000 을 사용하는데 스프링 부트는 localhost:8080을 사용한다.

       만약  3000에서 값을 요청한다면 당연히 8080포트로 요청할수 없을것이다.

       그래서 프록시로 3000포트에서의 요청은 8080으로 요청하도록 설정할 필요가 있다.

       부트의 포트는 application.properties에서 

server.port=8080

이렇게 설정해놓으면 된다.

그렇기에 여기서 많이 하는실수는 리액트는

npm start

로 잘 실행했지만 스프링부트는 실행을 하지않았기에 오류가 생기는것이다.

그렇기에 항상 node.js서버와 톰캣서버(부트) 서버는 둘다 돌아가고 있어야한다.

 

이렇게 자주 나오고 오늘 겪은 오류에 대해서 짧게 정리를 해보았다.

다음에는 CI/CD 깃랩에서 막히는 부분이나 새로 알게된 부분에 대해서 정리해 보도록 하겠다.