React + SpringBoot 첫 연동

React와 SpringBoot를 처음 시작하기 전, 간단한 연동을 진행해 보았다.

 

1. 간단한 스프링부트 프로젝트 만들기

---

Spring Initializr 사이트에 초기 프로젝트를 만들어 줄 수 있다.

 

https://start.spring.io/

 

 

프로젝트 설정하기

 

Gradle, Java, 버전은 아무것도 안붙은 것(안정화 버전)

 

Web 애플리케이션 통신을 위해 Spring Web은 꼭 포함시켜 주어야 한다.

 

 

 

MVC 구조에 맞추어 Controller, Service, Repository 만들기

 

각각 서비스는 컨트롤러는 서비스에 의존, 레포지토리에 의존, 레포지토리는 엔티티를 포함하여 만들어 주었다.

간단하게 설명하면 엔티티는 데이터 모델이고, 레포지토리는 모델을 가저오는 저장소, 서비스는 비즈니스 로직을 실행해주며, 컨트롤러는 요청을 받아 응답으로 처리해주는 역할을 한다.

 

 

Entity

package springstudy.spring_study.model;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.Setter;

@Entity
@Getter
@Setter
public class Hello{
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
}

 

 

Repository

package springstudy.spring_study.repository;//package springstudy.spring_study.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import springstudy.spring_study.model.Hello;


public interface HelloRepository extends JpaRepository<Hello, Long> {


}

 

 

Service

package springstudy.spring_study.service;//package springstudy.spring_study.service;

import jakarta.transaction.Transactional;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import springstudy.spring_study.model.Hello;
import springstudy.spring_study.repository.HelloRepository;

@Service //컴포넌트 스캔방식 @Component포함
@RequiredArgsConstructor
public class HelloService {
    private final HelloRepository helloRepository;

    @Transactional
    public Hello hello(String name){
        Hello hello1 = new Hello();
        hello1.setName(name);
        helloRepository.save(hello1);
        return hello1;
    }

}

 

 

Controller

package springstudy.spring_study.controller;

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import springstudy.spring_study.model.Hello;
import springstudy.spring_study.service.HelloService;

@RestController
@RequestMapping("/hello")
@RequiredArgsConstructor
public class HelloController {

    public final HelloService helloService;

    @GetMapping("hello")
    public Hello helloApi(@RequestParam("name") String name) {
        return helloService.hello(name);
        //default는 JSON으로 반환, XML도 가능
    }

}

 

어노테이션을 최대로 많이 써보고 싶어 이상한 엔드포인트지만 진행했다.

 

 

 

2. 간단한 리액트 프로젝트 만들기

---

Node.js 설치

Node.js — Run JavaScript Everywhere

 

 

Visual Studio Code에서 프로젝트 생성

create-react-app my-app

 

 

axios 설치

 npm install axios

PS C:\Users\PC\my-first-app> npm install axios added 3 packages, and audited 1345 packages in 4s 268 packages are looking for funding   run `npm fund` for details 8 vulnerabilities (2 moderate, 6 high) To address all issues (including breaking changes), run:   npm audit fix --force

 

위의 문구가 나오면 성공이다.

 

 

리액트 코드 작성

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




function App() {

const [hello, setHello] = useState("")

useEffect(() => {
  const name = "박지원";
  axios.get(`http://localhost:8080/hello/hello?name=${name}`)
  .then((response) => {
    console.log("서버 응답:", response.data); // 응답 확인
    setHello(response.data.name); // 서버에서 받은 name 값 출력
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });
}, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{hello}</p> 
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App;

 

axios를 이용하여 간단하게 웹에서 요청하여 이름을 받아와 보았다.

 

 

결과

 

 

 

3. 에러 핸들링

---

1. helloService not initialized in the default constructor 오류

 

Lombok을 이용하여 생성자를 주입할 수 없는 오류이다. (@Getter, @Setter)

버전 별로 Lombok 의존성을 확인해주어야 한다.

 

 

 

2. inteliJ에서 리액트 실행

 

inteliJ의 Community 버전(무료 버전)에서는 리액트를 사용할 수 없다고 한다. 그래서 vsCode를 이용해주었다.

 

 

3. Access to XMLHttpRequest At...

 

CORS 정책으로 인해 React(3000) → Spring Boot(8080) 요청이 차단됨

현재 CORS(Cross-Origin Resource Sharing) 문제로 인해 React에서 Spring Boot API를 호출할 수 없습니다.

 

따로 Spring 쪽에서 설정해주어야 한다.

Config 클래스를 만들어 Cors설정을 따로 해주고, Bean으로 등록해주었다.

package springstudy.spring_study;

import org.jetbrains.annotations.NotNull;
import org.springframework.context.annotation.Bean;
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 SpringConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(@NotNull CorsRegistry registry) {
                registry.addMapping("/**") // 모든 경로에 대해 CORS 허용
                        .allowedOrigins("http://localhost:3000") // React의 주소 허용
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 허용할 메서드
                        .allowCredentials(true); // 인증 정보 포함 허용
            }
        };
    }

}

 

 

 

 

 

출처

---

[스프링/Spring] Lombok: variable not initialized in the default constructor