* PC 환경 VScode 가 깔려있다는 전제를 바탕으로 구성 되었습니다
* 리액트 설치는 https://cafe.daum.net/SmartRobot/RoVa/896 를 참고해 주세요
VScode(VisualStudioCode)에 들어가서
ctrl + shift + p
를 입력하게 되면 아래와 같이 확장 프로그램 창이 뜨는데 그 중에
Extension Pack for Java와 Spring Boot Extension Pack을 설치 하셔야 합니다.
설치가 완료 되면 위 사진들과 같이 사용 안 함 및 제거가 뜹니다.
설치가 완료되었으면 위 사진과 같이 창을 키고 Spring initalalizr: Add Starters.. 라고 써있는 텍스트 클릭하고 아래의 사진대로 선택하여 Spring 프로젝트 설정을 마치면 됩니다.
위에 설정을 마치면 위 사진과 같이 Spring 프로젝트를 다운할 폴더 위치를 고르게 하는데 원하는 위치 입력하시고
Generate into this folder 누르시면 아래와 같은 화면이 뜨면서 진행 됩니다.
위 과정을 마치면 아래와 같이 Spring 서버를 사용하실 수 있습니다.
리액트는 전에 제가 올린 자료를 참고하여 설치해 주시면 됩니다.
https://cafe.daum.net/SmartRobot/RoVa/896
이제 리액트와 스프링 부트 통합 환경을 제작하겠습니다.
정상적으로 설치가 완료되면 위와 같은 화면이 출력 되는데 src/main/java/example/demo 밑에
HelloController.java 파일을 만들고 아래 내용을 작성해 줍니다
그럼
DemoApplication.java
파일을 실행해 스프링 서버를 실행할때 자동으로 함께 실행됩니다
Spring Boot의 기본 주소 + /api/hello를 입력하면
localhost:8080/api/hello
위와 같은 화면이 출력됩니다.
이제 이 데이터를 리액트에서 수신받아 리액트 화면에 출력하게 됩니다.
리액트 파일에서 App.js를 다음과 같이 편집합니다.
Spring Boot /api/hello에서 보네는 text 데이터를 리액트 화면에 출력하는 코드입니다.
이제 Spring Boot와 리액트를 동시에 실행하면 아래와 같은 화면이 출력됩니다.