[Spring] SpringBoot + React 퀵 스타트 with Gradle

Spring이란?

스프링 프레임워크는 자바 기반의 웹 어플리케이션을 만들 수 있는 프레임워크입니다.
제어의 역전(IOC, Inversion Of Control)과 의존성 주입(DI, Dependency Injection)은 스프링에서 가장 중요한 특징중 하나입니다. 이들로 인해서 결합도를 낮출수가 있고 단위테스트가 용이하기 때문에 보다 퀄리티 높은 프로그램을 개발할 수 있습니다.

• 제어의 역전(IOC, Inversion Of Control)
  • IOC가 적용된 경우, 객체의 생성을 특별한 관리 위임 주체에게 맡깁니다. 이 경우 사용자는 객체를 직접 생성하지 않고, 객체의 생명주기를 컨트롤하는 주체는 다른 주체가 됩니다. (즉, 사용자의 제어권을 다른 주체에게 넘기는 것을 IOC(제어의 역전)라고 합니다.)
  • 요약하면 Spring의 Ioc란, 스프링에게 제어를 위임하여 스프링이 만든 객체를 주입 -> 의존성 객체의 메소드 호출 구조입니다.

• 의존성 주입(DI, Dependency Injection)
  • 외부에서 두 객체 간의 관계를 결정해주는 디자인 패턴으로, 인터페이스를 사이에 둬서 클래스 레벨에서는 의존 관계가 고정되지 않도록 하고 런타임 시에 관계를 동적으로 주입하여 유연성을 확보하고 결합도를 낮출 수 있게 해줍니다.
  • 하지만, 외부(Spring)에서 직접 생성하여 관리하는 경우에는 A와 B의 의존성이 줄어듭니다.

 

Spring와 SpringBoot  차이점

Spring만 사용하여 웹 애플리케이션을 개발한다면 웹 애플리케이션을 실행할 수 있는 톰캣과 같은 WAS(Web Application Server)가 필요합니다. Spring만을 사용하여 만들어 보셨다면 복잡한 설정들로 인해 개발보다 설정만 하다 시간을 보내는 경우가 많았을 겁니다.

WAS의 종류(Tomcat, Jeus, WebSphere, Weblogic, JBoss 등)는 다양하며 설정 방식도 제각각 이기때문에 WAS에 대해 공부해야할 내용도 상당합니다. 하지만 SpringBoot에는 톰캣 서버가 내장되어 있고 설정도 자동 적용되기 때문에 WAS에 대해서 전혀 신경쓸 필요가 없습니다. 심지어 배포되는 jar 파일에도 톰캣서버가 내장되어 실행되므로 WAS로 인해 발생되는 문제들도 사라지게 됩니다.

 

React란?

React는 UI 자바스크립트 라이브러리로서 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. React는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.

 

SpringBoot 프로젝트 생성

Spring Initializr

SpringBoot 프로젝트 만들기

Spring initializr에서 Spring Boot 프로젝트를 만들 수 있습니다.

위 화면과 같이 설정 후 Spring Boot프로젝트를 생성합니다.

 

Controller 클래스 만들기

SpringBoot 프로젝트를 만들었으니 Request를 처리할 수 있는 Controller를 추가 해보겠습니다.

MovieController 클래스 만들기

MovieController.java

package com.api.opendata.controller;

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

import java.util.Arrays;
import java.util.List;

@RestController
public class MovieController {

    @RequestMapping("/api/movie")
    public List<String> MovieList()
    {
        return Arrays.asList("영화보기", "Movie");
    }
}

위와 같이 코드를 작성하고 SpringBoot 프로젝트를 실행하여 확인해 봅니다.

localhost:8080/api/movie 응답결과

 

React 프로젝트 만들기

React의 경우에는 npx를 사용해서 React 프로젝트를 만들 수 있습니다. 

자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구로
npm을 좀 더 편하게 사용하기 위해서 npm에서 제공해주는 하나의 도구입니다.

webapp폴더 만들기

cmd 화면

main폴더 밑에 "webapp"폴더를 만들고 cmd창에서 "webapp"경로로 이동합니다.

# React 프로젝트 만들기
npx create-react-app reactapp

# React + typescript 프로젝트 만들기
npx create-react-app reactapp --template typescript

위 명령어를 통해 React프로젝트를 만들어 줍니다.

 

SpringBoot의 Controller와 연동하기

SpringBoot와 통신하기 위해 가장 먼저 진행해야 할 작업은 proxy를 설정 해주는 것입니다.

package.json

package.json

"proxy": "http://localhost:8080"

package.json에 Proxy를 추가해 줍니다.

 

로컬 개발 환경에서 React 프로젝트는 3000번 포트, SpringBoot 프로젝트는 8080번 포트로 실행이 되기 때문에

CORS 문제가 발생하므로 proxy 설정은 필수로 해야 합니다.

 

이제 MovieController와 통신하고 응답 결과를 보여 주도록 해보겠습니다.

App.tsx

App.tsx

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

function App() {
    const [message, setMessage] = useState([]);

    useEffect(() => {
        fetch("/api/movie")
            .then((response) => {
                return response.json();
            })
            .then(function (data) {
                setMessage(data);
            });
    }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <ul>
            {message.map((text, index) => <li key={`${index}-${text}`}>{text}</li>)}
        </ul>

      </header>
    </div>
  );
}

export default App;

App.tsx에 위 코드를 작성해 줍니다.

 

이제 SpringBoot와 React를 실행하여 확인해 봅니다.

React 실행화면

 

Gradle을 이용해서 프로젝트 빌드하기

SpringBoot 프로젝트의 build.gradle의 내용 끝 부분에 추가로 입력 해보겠습니다.
SpringBoot 프로젝트와 React 프로젝트가 하나의 패키지가 될 수 있는 build 구성을 하는것입니다.

build.gradle

build.gradle

def reactAppDir = "$projectDir/src/main/webapp/reactapp"

sourceSets {
	main {
		resources {
			srcDirs = ["$projectDir/src/main/resources"]
		}
	}
}

processResources {
	dependsOn "copyReactFile"
}

task installReact(type: Exec) {
	workingDir "$reactAppDir"
	inputs.dir "$reactAppDir"
	group = BasePlugin.BUILD_GROUP
	if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
		commandLine "npm.cmd", "audit", "fix"
		commandLine 'npm.cmd', 'install'
	} else {
		commandLine "npm", "audit", "fix"
		commandLine 'npm', 'install'
	}
}

task buildReact(type: Exec) {
	dependsOn "installReact"
	workingDir "$reactAppDir"
	inputs.dir "$reactAppDir"
	group = BasePlugin.BUILD_GROUP
	if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
		commandLine "npm.cmd", "run-script", "build"
	} else {
		commandLine "npm", "run-script", "build"
	}
}

task copyReactFile(type: Copy) {
	dependsOn "buildReact"
	from "$reactAppDir/build"
	into "$buildDir/resources/main/static"
}

 

SpringBoot 프로젝트가 build 될 때 React 프로젝트를 먼저 build 하고 SpringBoot 프로젝트 build 결과에 포함시킨다는 내용 입니다.

* gradle을 이용해 프로젝트를 build 하는 경우 task가 서로 의존 관계를 가지기 때문에 processResources를 기점으로 installReact > buildReact > copyReactFile 순으로 실행이 됩니다.

 

이제 SpringBoot프로젝트 경로로 이동하여 Build 해보겠습니다.

cmd 화면

gradlew build

위 명령어로 Build 합니다.

cmd 화면

Successful이 뜨면서 Build가 되었고 Build결과는 build/libs에 있습니다.

여기까지 잘 되었다면 jar파일을 실행하여 확인해 보겠습니다.

java -jar "실행할 jar 파일"

React 화면