[Spring Boot] Spring Boot + React 연동하기

개요

스프링 부트를 활용하여 API 스펙에 맞는 서버를 구축하고 있습니다. 이제, View를 구현해보려고 합니다. CSR(Client-Side Rendering) 방식과 SSR(Server-side-Rendering) 방식 중, 무엇을 사용할지 많이 고민했지만, 제목을 보신분들은 아시다 시피 CSR로 구현해보려고 합니다. 이번 포스팅에서는 첫 발걸음이 될 스프링 부트와 리액트를 연동하는 방법에 대해 알아보도록 하겠습니다.

목차

1. Node.js 다운로드 하기
2. 새로운 React app 생성
3. 연동 완료

Node.js

Nodejs는 구글에 nodejs를 검색하여 안정버전을 다운로드 받으면 됩니다.
아래 나타나는 화면에서, 각자 운영체제에 맞게 다운로드 해줍니다.

node.js 다운로드 사이트

이제 완전히 다운로드를 마쳤으면, 다운로드 된 Node의 버전을 확인해볼 수 있습니다.
명령 프롬포트를 열어, node -v 명령어를 입력해줍니다.

 

cmd에서 node 버전 확인

위와 같이, 정상적으로 Node.js가 다운로드된 것을 볼 수 있습니다.

react-app 생성하기

이제, 리액트를 띄워줄 서버인 Node.js를 다운로드 완료했으니, 새로운 리액트 프로젝트를 만들 차례가 되었습니다. 리액트 프로젝트는 vsCode를 활용하여 생성할 수 있는데요. vsCode를 실행하여 새로운 터미널을 생성하고, 아래와 같이 입력해줍니다.

npm create-react-app frontend

새로운 리액트 프로젝트 생성

위의 명령어는, frontend라는 파일에 리액트 프로젝트를 하나 생성한다는 의미입니다.

프로젝트 실행

이제 생성된 리액트 프로젝트를 아래 명령어를 통해 실행해보도록 하겠습니다.

npm start

생성된 리액트 프로젝트 실행

 

실행 성공

위와 같이 정상적으로 리액트 프로젝트가 정상적으로 실행된 것을 볼 수 있습니다.

나가면서

이번 포스팅에서는, React와 Spring Boot를 연동하는 법에 대해 알아보았습니다. 연동이라기 보다는, frontend를 구현하기 위해 필요한 폴더와 여러 모듈들을, backend 프로젝트가 위치한 경로에 새로 저장하는 형식이었던 것 같습니다.
이제 리액트를 빠르게 습득하며, 회원가입, 로그인 등 새로운 화면을 구현하는 포스팅으로 돌아오도록 하겠습니다.