프론트엔드는 리액트, 백엔드는 스프링부트를 사용해 리액트 스프링부트 프로젝트를 만들어보려고한다. 기본적으로 프로젝트를 생성하기 위해 start.spring.io에서 프로젝트를 생성했으며 프론트엔드 프로젝트까지 연결하는 방법을 정리해보려고 한다.
1. SpringBoot 프로젝트 생성하기
우선 앞서 말했던 것처럼 start.spring.io 사이트에서 스프링부트 프로젝트를 생성할 것이다. java8 버전을 사용할 것이기 때문에 openjdk 1.8을 설치해주었고, 아래와 같이 세팅해주었다.
먼저, 빌드 도구는 Gradle을 사용할 것이기 때문에 Gradle-groovy를 선택했고, Springboot 버전은 2.7.17 버전, Packaging은 Jar, Java 버전은 8을 선택해주었다. 또한 의존성 라이브러리로 Spring Web을 받아주었다. 모든 선택을 마무리한 후, Generate 버튼을 클릭하면 zip 파일이 생성이 되는데, 인텔리제이에서 열어주면 된다.
2. 인텔리제이 Spring Boot Project 실행
zip파일을 인텔리제이에서 열어준 후, 리액트 프로젝트를 생성해보려고 한다. 우선 인텔리제이에서 스프링부트 프로젝트를 열어준 후 실행시켜봤다. 폴더구조는 아래와 같이 생성되고, 실행도 잘 된다. 로그를 보면 8080 포트에 서버가 띄워진 것을 알 수 있을 것이다.
3. React 프로젝트 추가하기
이제 스프링부트에 리액트 프로젝트를 만들어주면 되는데, main 아래에 frontend 프로젝트를 만들어주었다.
cd src/main
npx create-react-app frontend설치가 완료되면 아래와 같이 frontend 프로젝트가 만들어진다.
React를 실행하기 위해서는 frontend 폴더 안으로 들어가 npm start를 해주면된다. 리액트는 3000 포트가 디폴트값이기 때문에 localhost:3000으로 열리는게 맞다.
4. Proxy 설정, CORS 방지
앞서 말한 것처럼 리액트 프로젝트는 localhost:3000으로 열리고, 서버는 localhost:8080으로 열리기 때문에 origin이 달라진다. 그래서 CORS 에러가 발생하기 때문에 Proxy 설정을 해줘야한다. React 프로젝트의 package.json에서 proxy를 추가해준다.
5. React와 Springboot 서버 api 통신
프록시 설정까지 마쳤다면 이제 리액트와 스프링부트 간의 api 통신 예제를 만들면 된다. 우선 프론트엔드에서는 axios 를 사용해 요청할 것이기에 app.js에 아래와 같은 코드를 넣어주었다.
import React, {useEffect, useState} from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState('')
useEffect(() => {
axios.get('/api/data')
.then(res => setData(res.data))
.catch(err => console.log(err))
}, []);
return (
<div>
받아온 값 : {data}
</div>
);
}
export default App;
서버에서 받아온 값을 저장해 화면에 보여주는 방식이다. 반대로 서버에서는 controller를 생성해 api를 만들어주었다. get 요청이 날라왔을 때 "Hello, world!"를 리턴해줄 것이다.
package com.springboot.board.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class BoardController {
@GetMapping("/api/data")
public String test() {
return "Hello, world!";
}
}
서버와 프론트 단을 모두 수정해준 후, 서버를 띄우고 리액트 프로젝트를 실행시켜보면 아래와 같이 잘 나온다.
프로젝트 세팅이 끝난 후, 이제 프로젝트를 github에 연동하려는데 여기서 문제가 발생했다.
6. 프로젝트 Github 연동 문제 - 화살표만 생기고 프로젝트가 올라가지 않는 문제
마지막으로 프로젝트를 깃허브에 올리는데 frontend 프로젝트가 깃에 올라가지 않는 문제가 발생했다. 폴더 옆에 화살표가 생기고 폴더가 클릭되지 않아 처음에는 당황했는데, 알고보니 .git 파일이 중복으로 들어가 있어서 발생했던 문제였다. 프론트엔드 프로젝트까지 정상적으로 깃에 올리려면 frontend 폴더에 들어가 .git 파일을 삭제해주면 된다.
cd src/main/frontend
rm -rf .git/
frontend 폴더에 git 파일이 눈으로 보이지 않기에 ls -al 명령어를 통해 확인해볼 수 있다. 해당 git 파일을 삭제해주니 프론트엔드 프로젝트까지 깃허브에 잘 올라갔다.
7. 맥북 인텔리제이 무한 indexing 업데이트 - icloud 조심
깃허브 연동 말고도 인텔리제이에서 해당 프로젝트를 열면 무언가가 계속해서 업데이트되며 프로젝트가 재빌드되는 문제가 발생했다. 그래서 인텔리제이에 열어놓은 프로젝트가 자꾸 닫히고, 사라졌다 생기고를 무한 반복했다. 거의 반나절동안 계속해서 프로젝트가 닫히는 문제때문에 고생했는데 폴더 경로를 바꿔보다가 이 현상이 일어나지 않는 경우를 찾게 되었다.
나는 평소에 아이클라우드 Document 폴더에 프로젝트를 만들었었는데, icloud 문서 안에 넣었을때 해당 문제가 발생했던 것이다. icloud가 동기화되면서 인텔리제이에 열어둔 프로젝트도 계속 동기화되는 현상이 발생했고, 그래서 프로젝트가 무한 업데이트 되었던 것 같다. icloud가 아닌 곳에서 실행하면 정상 작동 되었고, 앞으로 프로젝트는 icloud에 넣지 말아야겠다...
