자바 스프링 메이븐 REACT 개발환경 프론트엔드(2/2)

자바 스프링 메이븐으로 백엔드 를 만들었으면(포트 8081)

이제 프론트엔드 개발환경을 만들자

 

REACT 프론트는 Visual Code 를 사용한다.

개발툴을 환경에 맞게 다운 받아 설치한다,

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

 

 

툴을 설치한후 REACT 개발을 위한 Node.js 를 다운 받아 설치한다.

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

 

설치후 Workspace 를 만들고 폴더를 

Visual Code 툴에서 해당 폴더를 연다.

터미널 버튼을 누르고 CLI 프롬프트 창이 나오면 명령줄에 아래를 입력한다,

---

 

npm install  //node.js 설치후 최초 1회만 실행

npm install axios //node.js 설치후 최초 1회만 실행 - 스프링 연동시

npm install react-router-dom // 최초 1회만 실행

 

npx create-react-app "생성할프로젝트이름"

cd " 생성할프로젝트이름"

SRC > App.js 스크립트 작성

npm start

---

 

Vite 방식이아닌 CRA 방식이다.

그리고 

SRC > App.js 소스에 아래의 스크립트를 작성한다.

---

import React, { useEffect, useState } from 'react';

import axios from 'axios';

function App() {

    const [message, setMessage] = useState('');

    useEffect(() => {

        axios.get('http://localhost:8081/api/SpringBackendTest')

            .then(response => {

                setMessage(response.data);

            })

            .catch(error => {

                console.error("There was an error!", error);

            });

    }, []);

    return (

        <div>

            <h1>React Front + Spring Backend</h1>

            <p>{message}</p>

        </div>

    );

}

export default App;

---

 

 

이전 1/2 페이지에서

백엔드는

STS4 툴> Run As > Spring Boot App 

브라우저에 

http://localhost:8081/api/SpringBackendTest

입력후 확인했으면,

 

프론트는

Visual Code 터미널 명령프롬프트에  npm start 입력후

브라우저에 

http://localhost:3000

입력시 아래 화면이 나오면 스프링 백엔드와의 연동이 된것이다.

 

브라우저 출력은 App.js 의   

<p>{message}</p> 부분에서 백엔드 스프링의 

SpringBackendTestController.java 의 아래 "Spring Backend Test" 입력문구 도 같이 연동되어 출력된다.(아래 2번째줄)

 

 

---

요약하면

자바 스프링 메이븐 REACT 웹개발환경은 

 

백엔드는 STS4 툴에서

POM.xml 

WebConfig.java

WebBApplication.java

SpringBackendTestController.java

application.properties

 

5개 스크립트 작성 ( ServletInitializer.java 는 STS4 maven 프레임워크 생성시 defualt 생성됨)

 

프론트엔드는 Visual Code 에서 

 

터미널에

npx create-react-app "생성할프로젝트이름"

cd " 생성할프로젝트이름"

App.js 작성

npm start

 

상기 스크립트 작성후 빌드하면 연동이 된다.