Spring Boot + React + typescript 프로젝트

개발 환경

Java 23, Spring Boot 3
Spring Security 6
Sprint + React + typescript
Spring Boot : 3.3.5

Eclipse 환경 설정

1. eclipse download
https://www.eclipse.org/downloads/

Eclipse Downloads | The Eclipse Foundation

현 시점에 Eclipse 버전 : Eclipse IDE 2024-09 R Packages

2. STS(Spring Tool Suite) 설치

Eclipse의 Help > Elcipose Marketplace... 클릭

Spring Tools 4 (aka Spring Tool Suite 4) 설치

---

React 설치

1. VSCode 설치
https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

2. node.js 다운로드
https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

---

개발 시작

Back-End 작성

1. Eclipse Project 설정
- Spring Boot Initializr를 통한 프로젝트 생성
  File > New > Project 메뉴 클릭
 

  다이얼로그에서 Spring Starter Project 선택 후 Next 클릭

  정보를 입력하고 Next 클릭
  · Package에 입력한 Package가 Root Package가 되어 SpringBootApplication 가 해당 Package에 생성이 된다.
    해당 Package에 하위 Package를 생성 후 개발이 시작된다.
  · 만약 생성 시 "No locally installed toolchains match and toolchain download repositories have not been configured." 오류가 발생할 경우 https://kamsi76.tistory.com/entry/Gradle-No-locally-installed-toolchains-match-and-toolchain-download-repositories-have-not-been-configured-%ED%95%B4%EA%B2%B0%EB%B0%A9 참조

   사용할 Dependence 항목을 선택하고 Finish 클릭하면 프로젝트가 생성이 된다.
    · 위의 항목들을 선택하고 우선은 테스트를 위해서 build.gradle 의 dependencies의 몇가지 항목을 주석 처리 한다.
      추후 진행하면서 주석을 풀 예정이다.

    ·  위와 같이 주석 처리를 하고 반드시 프로젝트에 오른쪽 마우스 클릭 후 Gradle를 Refresh 해 줘야 한다.

2. Yml 파일 작성
   프로젝트가 생성이 되면 src/main/resources 밑에 application.properties 파일이 생성되어 있다.
   application.properties 를 application.yml로 확장자를 변경하고 설정한다.

spring:
   application:
      name: first-react-board
   devtools:
      restart:
         enabled: true
server:
   port: 8080
   servlet:
      context-path: /

 

2. Back-End API 작성

package kr.co.infob.api.controller;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping(value="/api")
public class ApiController {
	
	@GetMapping("/hello")
	public ResponseEntity<String> hello() {
		return ResponseEntity.ok().body("Hello World!!!!");
	}
}

 

3. 서버 시작 후 Api 테스트 확인

    서버 시작후 위와 같이 보이면 Back-End는 우선 성공

---

Front-End

1. typescript 템플릿 기반의 nodejs 프로젝트 생성

import React, {useEffect} from 'react';

function App() {
  
  const [txtHello, printText] = React.useState("");

  useEffect( () => {

    // Back-End의 API를 호출한다.
    fetch('http://localhost:8080/api/hello', {
        method: "GET"
      })
      .then( res => {
        /*
          * API 호출 결과가 ok가 아닌경우
          * 오류 메시지를 출력한다.
          */
        if( !res.ok ) {
          throw new Error("Network response was not ok!!!!");
        }
        return res.text()
      })
      .then( res => {
        console.log( res );
        if (typeof res === 'string'){
          printText(res);
        }
      })
      .catch(err => console.log(err) );
  },[]);

  return (
    <div>{txtHello}</div>
  );
}

export default App;

    VSCode 실행 후 터미널 실행
    Eclipse에서 생성 한 프로젝트의 src/main 폴더까지 이동한다.
    아래는 해당 폴더까지 이동한 예시이다.

    해당 폴더에서 아래 명령어 실행

npx create-react-app frontend --template typescript

    Typescript의 기반의 React 프로젝트는 생성한다.

    설치가 완료 되면 소스 코드를 VBCode의 openFolder로 생성 한 프로젝트 frontend 폴더를 선택한다.
   

   src 밑에 app.tsx파일을 Back-End에서 생성한 Api를 호출 하도록 수정한다.

import React, {useEffect} from 'react';

function App() {
  
  const [helloTxt, printText] = React.useState("");

  useEffect( () => {

    // Back-End의 API를 호출한다.
    fetch('http://localhost:8080/api/hello', {
        method: "GET"
      })
      .then( res => {
        /*
          * API 호출 결과가 ok가 아닌경우
          * 오류 메시지를 출력한다.
          */
        if( !res.ok ) {
          throw new Error("Network response was not ok!!!!");
        }
      })
      .then( res => {
        console.log( res );
        if (typeof res === 'string'){
          printText(res);
        }
      })
      .catch(err => console.log(err) );
  },[]);

  return (
    <div>{helloTxt}</div>
  );
}

export default App;

   VBCode 터미널에서 npm start 명령을 실행 시켜 기동한다.
   ※ Back-End는 반드시 실행 되어 있어야 한다.
   - 구동 후 CORS 오류가 발생하는 경우 Proxy 설정과 SpringBoot의 설정 값을 변경해 줘야 한다.
      Back-End 설정 파일을 추가

package kr.co.infob.config;

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 WebConfig implements WebMvcConfigurer {
	
	@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Authorization", "Content-Type")
                .exposedHeaders("Custom-Header")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

    Front-End package.json 파일 변경

   package.json 파일을 변경 하면 frontend 소스에서 http://localhost:8080은 빼고 작성을 하면 된다.

 // Back-End의 API를 호출한다.
fetch('/api/hello', {
    method: "GET"
  })
  ...
)
...