Spring Boot + React + MySQL + JPA 연동하기 (with vscode)

개발환경

java 1.8
node v20.11.1
npm 10.2.4
mysql 8.0.36
spring boot 2.7.14

0. 기본 세팅

• 프로젝트 폴더를 만들고, 해당 폴더에 프론트와 백을 나눠서 구성할 예정

• node 설치 후 vscode 설치

• 이후 vscode에서 아래 플러그인 다운

  Extension Pack for Java - IDE 자바 확장팩
  Spring Boot Extension pack - 스프링부트 확장팩
  Spring Boot Snippets
Gradle for java

• 깃 협업시

  Git History
Git graph
GitLens
GitHub Pull Requests and Issues
GitHub Repositories

1. MySql 설치 및 설정

https://dev.mysql.com/downloads/installer/

web이 아닌 아래 버전으로 다운 진행하고, 넥스트로 쭉 눌러서 진행

패스워드는 편하게 쓰려고 root로 지정

✔️ cmd에서 사용 시 환경변수에서 path에 추가 해줘야 함

1-1. MySQL 플러그인 설치 및 연결

설치 후 커넥션을 눌러 연동

이름은 원하는대로 해도 되고, 유저 네임이랑 패스워드는 설치할 때 적용했던 root로 진행

1-2. MySQL 테이블 생성 테스트

• 테이블을 보다 쉽게 ERD로 생성가능한 플러그인 설치
  

플러그인 설치후 test.json을 만들고, 테스트 ERD 작성

해당 sql 복사 후 MySQL 플러그인으로 이동

+눌러서 데이터베이스 생성 (이름은 원하는 이름으로 가능)

DDL 파일 만들고, 아까 복사해두었던 테스트 테이블 생성

테스트로 값 넣어보고 문제 없으면 drop으로 해당 테이블 삭제

1-3. MySQL 유저 계정 생성 및 권한 부여

2. React & Spring Boot 설치

• React
  
  상위 프로젝트 폴더에 front라는 이름으로 리액트 설치

• Spring Boot
  f1눌러서 spring init으로 스프링 부트 설치 진행 (스프링부트 버전과 자바 버전은 후에 그래들에서 다시 설정할 예정이라 아무거나 선택해도 무방.)

선택과정
그래들 > 버전 아무거나 (2점대로 바꿀 예정) > 언어 (자바) > 그룹명 (프로젝트 이름으로 지정) > 프로젝트 이름 (back)으로 지정 > 프로젝트 타입 jar > 자바버전 아무거나 선택 (1.8로 후에 바꿀 예정) > 라이브러리 설정 (프로젝트에 필요한 라이브러리로)

프로젝트 이름은 back 으로 지정

필요 라이브러리 설치

• Spring web (필수)
• JPA, MySQL (연결 db에 맞춰서 선택)
• lombok (추천)
• Validation (유효성 검사)
• Spring security (선택)

3. Spring Boot 세팅

필요없는 파일들 삭제 (테스트는 후에 따로 진행 예정)

3-1. 그래들 설정

그래들 설정

• 스프링부트 2.7.14
• 자바 1.8 설정 (부트 3부터는 자바 17이상만 지원함)**

만일 여기서 수정이 안 되고, java initialize 어쩌고 하면서 좌측 하단에 퍼센트가 30퍼대에 머물러있다면

아래 체크를 off로 바꿔서 진행

3-2. application 설정

• 서버 포트 번호 지정

• mysql 설정
  

• jpa 설정
  

3-3. config 설정

• 스프링 시큐리티 사용하려면 CORS 에러 때문에 설정 해줘야 함
  

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
    //CORS (Cross-Origin Resource Sharing)를 활성화하고 CSRF (Cross-Site Request Forgery) 보호 기능을 비활성화
        http.cors().and().csrf().disable();
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://localhost:3000"); //리액트 포트 번호 
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config); //모든 경로에 대해 CORS 구성을 등록
        return new CorsFilter(source); 
    }
}

3-4. Entity & Repository & Service 설정

• Entity
  

• Repository
  

• Service
  

3-4. Controller 설정

3-5. 스프링부트 실행

에러없이 실행되면 성공~
(콘솔에는 테이블 생성했다고 뜬다.)

4. React 세팅

4-1. 모듈 설치

프론트(리액트 프로젝트) 폴더에 백엔드가 건넨 api를 받을 수 있는 axios 모듈 설치

4-2. CORS 오류 방지 프록시 설정

• npm i http-proxy-middleware --save 설치 후 프록시 파일 생성
  

4-3. components

• Test.js

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

function Test() {
  const [id, setId] = useState('');
  const [name, setName] = useState('');

  //db 데이터
  const [entities, setEntities] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('http://localhost:4000/api/test');
      setEntities(response.data);
    } catch (error) {
      console.error('데이터 불러오기 에러:', error);
    }
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    console.log('전송할 데이터:', { id, name });
    try {
      const response = await axios.post('http://localhost:4000/api/test', {
        id: id,
        name: name,
      });
      console.log('데이터 전달 성공: ', response.data);
      fetchData();
    } catch (error) {
      console.error('데이터 전달 에러:', error);
    }
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        아이디: <input type="text" value={id} onChange={(e) => setId(e.target.value)}></input>
        이름:<input type="text" value={name} onChange={(e) => setName(e.target.value)}></input>
        <button type="submit">전송</button>
      </form>

      <div>
        <h2>TestEntity DB</h2>
        <ul>
          {entities.map((entity) => (
            <li key={entity.id}>
              아이디: {entity.id} / 이름: {entity.name}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default Test;

4-4. 리액트 실행

npm start로 시작하고, 화면이 뜨면 값 넘겨서 테스트 진행

입력하면 바로 db에 등록되고, 해당 db는 아래에 출력된다.

실제 테이블에도 잘 들어간다.