Spring Boot + React 환경설정하기

 

vscode에서 ctrl + , 를 눌러서  해당부분 클릭

 

 

 

{

    "java.home": "C:\\Program Files\\Java\\jdk-17",

    "java.configuration.runtimes": [

          {

            "name": "JavaSE-1.8",

            "path": "C:\\Program Files\\Java\\jdk1.8.0_251", // 기존 1.8 JDK SE

          },

          {

            "name": "JavaSE-17",

            "path": "C:\\Program Files\\Java\\jdk-17", // Open JDK 17 SE

            "default": true

          }

    ],

    "java.configuration.updateBuildConfiguration": "interactive",

    "files.exclude": {

        "**/.classpath": true,

        "**/.project": true,

        "**/.settings": true,

        "**/.factorypath": true

    },

    "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m -javaagent:\"c:\\Users\\Admin\\.vscode\\extensions\\gabrielbb.vscode-lombok-1.0.1\\server\\lombok.jar\"",

    "editor.suggestSelection": "first",

    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

    "workbench.colorTheme": "Community Material Theme Darker High Contrast"

  }

settings.json 파일의 코드를 사용하는 JDK 버전과 맞게 설정해주기

 

 

 

Ctrl + Shift + P 를 눌러서 

>Spring Initializr: Create a Gradle Project 를 통해 그래들 프로젝트 생성

 

스프링 부트 버전 선택 ( 3.1.5 )

 

언어 선택( Java )

 

테스트용 패키지 설정 ( com.example )

 

테스트용 패키지 설정 ( demo )

 

패키징 타입 설정 ( Jar )

 

JDK 버전 설정 ( 17 )

 

dependencies 추가해주기

 

해당 위치에 TestController.java 생성해주기

 

package com.example.demo.controller;

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

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

@RestController

public class TestController {

    @GetMapping("/test")

    public String test() {

        return "test!!";

    }

}

TestController.java 코드

 

application.properties 검색해서 열어주고

 

server.port = 8081

spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name

spring.datasource.username=your_username

spring.datasource.password=your_password

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

해당 코드 작성

mysql 설정 및 포트번호 변경 8080 -> 8081

 

이후 TestController.java 에서 Ctrl + F5를 통해서 스프링부트를 실행해주고

 

 

http://localhost:8081/ 에 들어가서 실행여부 확인

해당 페이지가 뜨면 연결은 된 상태

 

 

 

http://localhost:8081/test

해당 URL로 들어가면 return 값인 "test!!" 가 출력된다

 

여기까지 하면 Spring boot 환경설정은 완료

 

React 를 사용하기위한 설치

 

 

cd demo/src/main

스프링 부트 프로젝트 내부의 main 으로 이동해주기

 

 

npm create vite@latest 를 통해서 vite 환경을 설치하였다 

이후 패키지명을 작성해준다.

 

 

React 를 선택해주고

 

사용언어타입을 정해준다 (TypeScript + SWC 사용)

 

 

생성한 프로젝트 내부로 경로를 잡아주고

 

npm install을 진행한다.

 

위 경로에서 vite 를 실행해준다

npm run dev

 

 

Proxy 설정

 

vite 프로젝트는 http://localhost:5173/

spring boot 프로젝트는 http://localhost:8081/

로 열리기 때문에 origin이 달라진다 

CORS에러를 방지하기위해 proxy 설정해주기

 

  "proxy": "http://localhost:8081",

package.json 파일에 해당코드를 추가해준다.

 

 

React와 Spring boot 서버 api 통신 설정해주기

 

React에서 axios를 통해 요청

 

 

npm install axios

를 통해 터미널로 axios 설치하기

 

 

import { useEffect, useState } from 'react'

import axios from 'axios';

function App() {

  const [data, setData] = useState('');

  useEffect(() => {

    axios.get('/api/data')

    .then(res => setData(res.data))

    .catch(error =>{

      if (error.response) {

        // 서버에서 응답이 왔으나 응답 코드가 2xx가 아닌 경우

        console.error('에러 응답:', error.response.data);

        console.error('에러 상태 코드:', error.response.status);

      } else if (error.request) {

        // 요청이 서버에 도달하지 않은 경우

        console.error('요청이 서버에 도달하지 않음:', error.request);

      } else {

        // 요청을 보내기 전에 발생한 에러

        console.error('에러 설정:', error.config);

      }

    })

  }, []);

  return (

    <>

      <div>

        받아온 값 : {data}

      </div>

    </>

  )

}

export default App

App.tsx에 해당코드 작성하기

 

 

    @GetMapping("/api/data")

이전에 생성한 TestController.java 파일에서 

@GetMapping값을 바꿔준다.

 

 

위 코드를 작성했을때 해당 에러가 발생하였다,,,

 

 

 

해결방법

 

package com.example.demo.controller;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration

public class CorsConfig implements WebMvcConfigurer {

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")

                .allowedOrigins("http://localhost:5173")

                .allowedMethods("GET", "POST")

                .allowCredentials(true);

    }

}

CorsConfig.java를 만들어주고 해당코드를 작성

 

  useEffect(() => {

    axios.get('/api/data')

    .then(res => setData(res.data))

    .catch(error => {

      if (error.response) {

        // 서버에서 응답이 왔으나 응답 코드가 2xx가 아닌 경우

        console.error('에러 응답:', error.response.data);

        console.error('에러 상태 코드:', error.response.status);

      } else if (error.request) {

        // 요청이 서버에 도달하지 않은 경우

        console.error('요청이 서버에 도달하지 않음:', error.request);

      } else {

        // 요청을 보내기 전에 발생한 에러

        console.error('에러 설정:', error.config);

      }

      console.log(data);

    })

  }, []);

App.tsx에서 /api/data로 get방식 요청을 하고있다.

 

 

export default defineConfig({

  plugins: [react()],

  server: {

    proxy: {

      '/api': {

        target: 'http://localhost:8081',  // Spring Boot 서버의 포트 번호

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, ""),

        secure: false,

        ws: true,

      },

    },

  }  

})

vite.config.ts에서 /api 를 잡아주고있는데

 

 

@RestController

public class TestController {

    @GetMapping("/api/data")

    public String test() {

        return "Hello, world!";

    }

}

TestController.java에서 매핑값에 /api가 포함되어있어 넘어오는 데이터는 /api/api/data 라는 url이 되었었다..

 

 

 

@RestController

public class TestController {

    @GetMapping("/data")

    public String test() {

        return "Hello, world!";

    }

}

getmapping url 값을 해당값으로 변경후 정상적으로 스프링부트 서버에서 react로 데이터를 가져올 수 있었다.

 

 

git remote add origin URL 을 통해서 github연결 

react router dom 설치 

npm i react-router-dom

style을  reset 해주고 설치하기 

npm i styled-reset 

npm i styled-components

npm i @types/styled-components -D