react, spring boot 연동

 

 

vscode에서 react 프로젝트 만들고

npm run build

 

로 배포하면 dist 폴더가 생성된당

 

 

dist폴더에는 세개의 파일이 있는데 그 파일들을 spring boot의 static 폴더에 넣으면 됨

 

 

node server와 spring(tomcat) server 두 개로 돌려서 테스트할 때는 port번호가 달라서 cors 에러가 발생한당 

→ spring에서 @CrossOrigin("프론트 경로")으로 서버를 연결시킴

 

react에서 설정한 포트번호는 vite.config.js에서 설정함

 

vite.config.js  ↓

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server:{
    port:5173
  }
})

 

 

 

spring controller  ↓

@Slf4j
@RestController
@RequestMapping("/habin")
@CrossOrigin("http://localhost:5173") 
public class JiyoungController {
	private static List<String> suminFriends = new ArrayList<>();
	
	@PostConstruct
	void hiphapMG() {
		for(int i=1;i<=10;i++) {
			suminFriends.add("수민 친구"+i);
		}
	}
	
	@GetMapping("/friends")
	public List<String> getSumin6(){
		return suminFriends;	
	}	
}

 

 

 

react에서는 axios로 springboot의 포트번호를 설정해서 연결한당

function App() {
  const [frds, setFrd] = useState([]);

  useEffect(()=>{
    axios.get("http://localhost:8080/habin/friends").then(resp=>{
      console.log("하빈체크: ", resp.data);
      setFrd(resp.data); //서버에서 준 데이터로 set
    })
  },[])

 

 

 

 

 

App.jsx 전체 코드  ↓

import styled, { css } from "styled-components"
import axios from 'axios'
import { useEffect, useState } from "react"

const HabinContainer = styled.div`
  width:300px;
  height:300px;
  margin:10px auto;
  background-color:pink;
`

const JinwooTitle = styled.h1`
  background-color:black;
  color:yellow;
  font-size:2em;
`

const YjungButton = styled.button`
  width:100px;
  height:100px;
  border-radius: 30px ;
  background-color:skyblue;
  color:white;
  font-size:1.5em;

    ${props =>
    props.$primary &&
    css`
      background: black;
      color: white;
    `};


    ${props =>
    props.$secondary &&
    css`
      background: hotpink;
      color: white;
    `};
  `

function App() {
  const [frds, setFrd] = useState([]);

  useEffect(()=>{
    axios.get("http://localhost:8080/habin/friends").then(resp=>{
      console.log("하빈체크: ", resp.data);
      setFrd(resp.data); //서버에서 준 데이터로 set
    })
  },[])


  return (
  /*   
    원래는 이런 모양
    <div>
      <h1>수민 만만세</h1>
    </div>
  */

    <HabinContainer>
      {
        frds.length && frds.map((frd,index) =>(<h1 key={index}>{frd}</h1>)) 
      }
      <JinwooTitle >수민 만만세</JinwooTitle>
      <YjungButton>눌렁</YjungButton>
      <YjungButton $primary>눌러방</YjungButton>
      <YjungButton $secondary>눌러바방</YjungButton>
    </HabinContainer>
  )
}

export default App

 

 

 

 

하지만 

서버 두개가 아니라 spring 서버 하나만 돌리면 상관없음!