Spring boot & React 연동 (IntelliJ)

자~

연동 드가자~

 

인텔리제이, node.js 가 설치되어있다는 가정하에 연동을 시작해보자

(강제로 잠깐 떠났지만 인텔리제이가 그리웠다.. 인텔리제이 못 잃어..)

 

1. File -> New -> Project 클릭

---

2. Spring Initializr 에서 설정하기

언어가 코틀린이면 코틀린으로 바꾸고 설정!

타입은 메이븐이나 그래들 중 본인이 사용하는것ㄱㄱ

---

3. 원하는 Dependencies 선택

Spring Web만 있어도 된다!

나중에 추가 설정 가능

---

4. 프로젝트를 만들면 이런식으로 생길텐데 터미널을 열자

npx create-react-app 원하는 디렉토리 이름

위의 이미지의 simple-react 는 내가 명명한 것이다.

그 후 엔터를 누르면 설치 시작!

가만히 구경만 해주자

 

그러면 happy hacking 인가 뜨는데 성공임ㅋ

 

---

 

실행

일단 부트 부터 실행하자

 

툴 우측상단에 디버그 모드나 런을 클릭 

 

이렇게 나 스프링이요 하고 뜬다 ㅋ

 

그 후 웹 브라우저에 localhost:8080 을 입력 하면

 

이런 화면이 뜨는데 매우 정상이므로 걱정 ㄴ

그냥 화면에 표기할게 없다고 하는거임ㅇㅇ

 

그럼 화면에 표기를 해보자

 

이렇게 디렉토리를 생성하고 클래스 파일을 생성

 

package com.example.react.test;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class startBoot {

    @GetMapping("hello")
    public String hello() {
        return "Hello Spring boot & React!!!";
    }
}

 

출력할 코드를 써주자~ 그리고 런 || 디버깅 ㄱ

 

** 참고로 localhost:8080 으로 들어가면 표시할게 없다고 하니

본인이 설정한 매핑 (위의 경우 hello) 으로 들어가자

ex) localhost:8080/hello

짜잔ㅋ

---

React 실행

프로젝트에서 React 가 있는 디렉토리에서 우클릭 > 오픈 인 > 터미널 ㄱㄱ

 

npm start 를 입력 후 엔터!

 

우리의 아름다운 리액트님이 나타나신다

---

아직 안끝났다!

 

현재는 boot / React 가 연동이 안되어있따

 

연동 ㄱㄱ

 

리액트 디렉토리로 가서 package.json 파일을 열고

 

"proxy": "http://localhost:8080",

을 입력해주자! boot 가 8080 으로 맞추어져 있다

프론트단에서 수정하는것임

---

대망의 마지막

 

React 의 App.js 를 열고

 

코드 입력을 해주자

 

    const [message, setMessage] = useState("");
    useEffect(() => {
        fetch('/hello')
            .then(response => response.text())
            .then(message => {
                setMessage(message);
            });
    },[])

 

{message} 는 넣고 싶은곳에 넣자

 

이건 전체코드App.js

import logo from './logo.svg';
import './App.css';
import {useEffect, useState} from "react";

function App() {

    const [message, setMessage] = useState("");
    useEffect(() => {
        fetch('/hello')
            .then(response => response.text())
            .then(message => {
                setMessage(message);
            });
    },[])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          <ul>
              {message}
          </ul>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

그리고 실행을 해주면?

 

아름답구나...

연동 끝 ! 흑흑 그리웠어 IntelliJ ㅠㅠ