[Spring] 스프링 부트 + 리액트 환경 구축 및 연동

오늘 진행할 실습

• 스프링 부트 환경 구축
• 리액트 환경 구축
• 스프링부트와 리액트 연동하기

 

 

스프링 부트 환경 구축

먼저 스프링 부트 환경을 구축하도록 하겠습니다. 스프링 부트 환경을 구축하기 위해 필요한 준비물은 다음과 같습니다.

 

• JDK 1.8 이상
• STS or IntelliJ (스프링 부트를 돌릴 수 있는 IDE 아무거나)

 

해당 글에서는 이미 준비물이 설치되어 있으므로, 실습에 앞서 두 가지를 먼저 준비하셔야합니다. 이전 블로그 글에 JDK 설치법을 올려두었으니 참고하시면 좋을 것 같습니다. (IDE는 사람마다 다른 것을 사용하므로 본인이 사용하는 IDE 설치법을 찾아보시길 바랍니다.)

 

필요한 것들을 모두 준비하셨다면, 이제 실습에 진행할 스프링 부트 프로젝트를 만들어보도록 하겠습니다. 저는 아래와 같이 미리 test 폴더를 만들어두어 프로젝트를 구분해줄 예정입니다.

 

 

react-project 폴더에는 리액트 프로젝트를 생성하고, spring-boot-project 폴더에는 스프링 부트 프로젝트를 생성할 예정입니다. 이제 정말 스프링 부트 프로젝트를 만들어봅시다.

 

Spring Initializer를 이용해 쉽게 스프링 부트 프로젝트를 생성할 수 있습니다. 해당 링크를 들어가봅시다.

 

Spring Initializer 페이지

 

들어가보면 위와 같이 빌드 툴을 Maven을 쓸건지, Gradle을 쓸껀지 고를 수 있고, 스프링의 버전 선택 등 다양한 옵션을 선택할 수 있습니다. 이번 프로젝트에서는 Gradle 프로젝트를 생성하고, Java 8버전을 사용하도록 하겠습니다. 나머지 스프링 부트 버전과 패키징 옵션은 아무거나 선택하셔도 괜찮습니다.

 

위와 같이 설정이 끝나면 오른쪽에 빨간색으로 표시한 'ADD DEPENDENCIES' 버튼을 눌러보도록 하겠습니다. 그럼 다음과 같은 그림이 나옵니다.

 

ADD DEPENDENCIES 페이지

 

스프링 부트를 통해 웹 어플리케이션을 개발할 때, 이를 쉽게 도와주는 의존성들을 모두 모아둔 곳입니다. 다양한 의존성들이 있지만 이번 실습에서는 REST API 서버 개발만 필요하므로, Spring Web 이라는 의존성을 추가하도록 하겠습니다.

 

 

의존성 추가가 끝나면 위와 같이 Spring Web 의존성이 잘 추가된 것을 확인할 수 있습니다. 모든 프로젝트 설정이 끝났으므로, GENERATE 버튼을 누릅시다. 그러면 프로젝트의 압축파일이 생기게 되고, 이를 압축을 풀어주면 됩니다. 저는 아까 만들었던 spring-boot-project 폴더에 풀어주었습니다. 이제 만든 프로젝트를 열어봐야겠죠? 저는 IntelliJ를 사용하므로 IntelliJ를 키도록 하겠습니다.

 

Open File or Project

 

Open File or Project를 누르고, 아까 프로젝트 압축을 풀었던 폴더를 찾아서 열어주는데, 이때 build.gradle 파일을 더블클릭하여 열어줍니다. (프로젝트를 엶과 동시에 의존성들을 로컬에 다운받기 위해서입니다.) 의존성을 다운로드 받는데 꽤 시간이 걸리므로 다될 때 까지 기다려주기만 하면 프로젝트 환경 구축 완료입니다.

 

 

리액트 환경 구축

리액트 환경 구축을 위해선 다음과 같은 준비물이 필요합니다.

• node.js
• Atom or VS Code (리액트를 돌릴 수 있는 IDE 아무거나)

nodejs.org/ko/download/

다운로드 | Node.js

 

node.js 설치법은 간단합니다. node.js 공식 홈페이지에 들어가서 본인의 OS 및 환경에 맞는 인스톨러나 소스코드를 다운받아 바로 설치하시면 됩니다. 저는 윈도우에 64bit 환경이므로 아래 파일을 다운로드 받았습니다.

 

Windows Installer (.msi) 64-bit 설치

 

설치를 하고나서 cmd에 다음과 같이 명령어를 통해 node.js 설치가 잘 되었는지 확인해봅시다.

 

node.js 설치완료

 

IDE는 본인이 사용하고 싶은 IDE를 골라서 설치하시면 됩니다. 저는 VS Code가 이미 깔려있으므로 그대로 사용할 예정입니다. 이제 리액트 프로젝트를 만들어보도록 하겠습니다. Open Folder를 열어 아까 만들었던 react-project 폴더를 열어줍니다. 그 다음, Ctrl + ` 키를 눌러 터미널을 켜주고, 아래와 같이 명령어를 작성합니다.

 

npx create-react-app react-app

 

성공적으로 react-app이 생성됨

 

생성이 완료되고, ls 명령어를 통해 확인해보면, 위와 같이 react-app이 성공적으로 생성된 것을 확인할 수 있습니다. 또한 VS Code 내에 디렉토리가 하나 생성되는 것을 확인할 수 있습니다. 리액트를 실행하기 위해서 cd react-app 명령어를 통해 해당 디렉토리로 이동합니다.

 

npm run start 명령어로 리액트를 실행하면, 3000번 포트로 리액트 서버가 실행되는 것을 확인할 수 있습니다. 이렇게 스프링 부트와 리액트 프로젝트 환경 설정이 모두 끝났습니다. 이제 스프링 부트와 리액트를 서로 통신, 연동 해보도록 하겠습니다.

 

스프링 부트와 리액트 연동하기

리액트에서 요청을 보내고, 스프링 부트에서 데이터와 함께 리액트로 응답을 보내 이를 화면에 뿌려보는 실습을 진행해보겠습니다. 편의상 DB까지 사용하지 않고, 도매인 객체를 하나 만들어서 이를 DB라고 가정하고 진행하도록 하겠습니다. 사용자 객체를 하나 만들어주도록 하겠습니다. 사용자 객체는 아이디, 이름, 비밀번호, 이메일 속성을 가집니다.

 

public class User {
    int id;
    String username;
    String password;
    String email;

    public User(int id, String username, String password, String email) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
    }
}

 

그 다음으로는 API 코드입니다. 리액트로부터 '/api/users' 라는 주소로 요청이 오면, 이를 매핑받아서 사용자 정보가 담긴 객체를 리액트에게 리턴합니다.

 

@RestController
public class UserApiController {

    @PostMapping("/api/users")
    public User user() {
        System.out.println("UserApiController 진입");

        User user = new User(1, "홍길동", "ma123", "1234");

        return user;
    }
}

 

다음은 리액트 프로젝트입니다. 통신을 하기위해서 proxy와 axios 라이브러리를 설치합니다.

 

npm install axios --save

npm install http-proxy-middleware --save

 

package.json으로 가서 axios와 proxy 라이브러리가 잘 설치되었는지 아래와 같은 방법으로 확인합니다.

 

package.json

 

그 다음으로 setupProxy.js 파일을 하나 만든 후, 아래의 코드를 입력합니다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:8080",
      changeOrigin: true,
    })
  );
};

 

다음으로는 App.js 파일로가서 axios로 http://localhost:8080/api/users 로 post 요청을 보내도록 코드를 작성합니다.

import React, { useState, useEffect } from "react";
import "./App.css";
import Axios from "axios";

function App() {
  const [user, setUser] = useState("");
  useEffect(() => {
    Axios.post("/api/users").then((response) => {
      if (response.data) {
        // console.log(response.data);
        setUser(response.data);
      } else {
        alert("failed to ");
      }
    });
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <h1>{user.id}</h1>
        <h1>{user.username}</h1>
        <h1>{user.password}</h1>
        <h1>{user.email}</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  );
}
export default App;

 

스프링 부트와 리액트 연동을 위한 모든 준비가 완료되었습니다. 먼저 스프링 부트 서버를 실행시켜주고, 그 후에 리액트를 실행시킵니다.

 

스프링 부트와 리액트 연동 성공

 

리액트에서 axios를 이용해 스프링 부트로 요청을 보내고, 스프링 부트에서 사용자 홍길동에 대한 데이터를 리액트에게 응답한 것을 확인할 수 있습니다. 

 

마침내 스프링 부트와 리액트 사이에 통신 할 수 있게 연동을 성공하였습니다.