재밌는 Coding

1. 시험환경

    ˙ Springboot

    ˙ Gradle

    ˙ React.js

    ˙ axios

2. 목적

    ˙ Spring Initializr를 이용하여 Springboot 프로젝트를 생성한다.

    ˙ React.js 프로젝트를 생성한다.

    ˙ Springboot와 React.js 연동을 위한 설정한다.

    ˙ Springboot와 React.js 배포를 위한 설정한다.

3. 적용

    ① 아래 포스팅을 참고하여 Springboot 프로젝트를 생성한다.

        - 참고 : https://languagestory.tistory.com/229

    ② Springboot 프로젝트 안에서 react.js 프로젝트를 생성한다.

        - React.js 프로젝트 생성 경로 : [프로젝트홈]/src/main

        - React.js 프로젝트 생성 명령어 : npx  create-react-app  web

    ③ React.js "package.json"파일에서 Springboot으로 데이터 전달을 위한 proxy 설정을 한다.

    ④ React.js에서 RestAPI 통신을 위한 axios를 설치한다.

        - axios 설치명령어 : npm install axios --save

    ⑤ React.js에서 테스트 코드를 작성한다. (RestAPI 송신부)

    ⑥ index.js에서 <React.StrictMode> 부분을 주석처리한다.

        - 해당 부분을 주석처리 하지 않으면 RestAPI를 2번 호출한다.

    ⑦ Springboot에서 RestAPI 수신부 테스트 코드를 작성하고 프로젝트를 실행한다.

    ⑧ React.js 프로젝트를 실행한다.

4. 결과

    ˙ Web에 접속하여 React.js와 Springboot 간 연동 여부를 확인한다.

    ˙ 현재까지 설정한 내용을 바탕으로 Springboot와 React.js 배포 방법은 아래 포스팅을 참고한다.

        - 참고 : https://languagestory.tistory.com/235