Front-End/React

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

코드깎는머슴 2024. 9. 19. 18:32
728x90
반응형

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

 

 

 

새 프로젝트를 만드는데, 프론트 단을 리액트를 사용하려고 연동하는 법을 알아왔다.

기본적인 방법은 그냥 에디터에서 리액트를 사용하는 것과 같고, 마지막에 연동하는 부분이 중요하다.

바로 코드로 알아보자.

 

 

 

1. 리액트 실행

프로젝트를 생성하고, 터미널을 연다.

이거 경로 이름 한글 들어가있는데, 웬만하면 영어로 하는 것이 좋다.

다음 코드 입력

cd src/main

npx create-react-app `프로젝트 명`

 

이거 예전에는 npx가 아니라 npm이었는데, npx를 사용하는 것이 더 좋다.

npm 5.2.0 이후 버전을 설치하면 npx가 자동 설치된다.

최근에 나온 npm은 다 적용되어 있다.

npx는 npm을 더 편하게 사용할 수 있게 해주는 npm의 도구이다.

아 물론 npm을 사용하는 것도 여전히 지원해주고 있긴 하다.

 

 

 

2. 연동하기

지금 React는 3000, 스프링은 8080 포트를 사용 중이다.

 

 

2 - 1. CORS

CORS라는 것이 있는데, 

출처가 다른 자원들을 공유한다는 뜻으로,

어떤 출처에 있는 자원에서 출처가 다른 자원에 접근하도록 하는 개념이다.

여기서 출처라는 것은 URL에서 프로토콜, 호스트, 포트가 같으면 같은 출처이다.

 

쉽게 말하면 naver.com에서 개발하는 네이버 개발자가

갑자기 kakao.com으로 어떠한 요청을 보내는 게 원래는 안된다는 것이다. 

 

이런 것 때문에 관련 에러를 방지하기 위해서 CORS 관련 정책이 작동하지 않게 해버리거나 해도 되는데,

혼자 뭐 만들어 쓸 때는 그렇게 해도 되지만,

배포해서 사용할 거라면 보안 이슈 때문에 그렇게는 안하고 다른 방식으로 해결해야 한다.

 

 

2 - 2. 해결

proxy 설정하기

터미널에 npm install http-proxy-middleware --save 입력

그리고 pakage.json에 다음 코드 추가

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

 

이제 테스트해보자.

 

 

 

3. 테스트

axios 설치

터미널에 npm install axios --save 입력

 

 

App.js

function App() {
    const [example, setExample] = useState('');

    useEffect(() => {
        axios.get('/test')
            .then((res) => {
                console.log(res)
                setExample(res.data);
            })
    }, []);

  return (
      <div className="App">
          컨트롤러에서 받아온 값 : {example}
      </div>
  );
}

 

TestController

@RestController
public class TestController {

    @GetMapping("/test")
    public String hello() {
        return "테스트입니다.";
    }
}

 

화면

 

 

참고

axios를 이용했는데, ajax로도 가능하다.

그리고 최근에는 --save가 기본값으로 적용되기 때문에, 굳이 입력 안해도 적용된다.

 

 

 

4. 빌드

다음 코드 추가

def bluemarbleDir = "$projectDir/src/main/bluemarble"

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

processResources { dependsOn "copyReactBuildFiles" }

task installReact(type: Exec) {
    workingDir "$bluemarbleDir"
    inputs.dir "$bluemarbleDir"
    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 "$bluemarbleDir"
    inputs.dir "$bluemarbleDir"
    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 copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    from "$bluemarbleDir/build"
    into "$projectDir/src/main/resources/static"
}

스프링 부트 프로젝트가 빌드 될 때 React 프로젝트를 먼저 빌드하고,

결과를 스프링 부트 프로젝트에 포함시키겠다는 의미이다.

 

개발 환경과 배포 환경은 달라서, 배포하고 잘 작동하는 지 확인하고 개발을 시작하는 것이 좋다고 한다.

다시 테스트해보자.

 

http://localhost:3000/

http://localhost:8080/

두 곳의 화면이 같으면 성공이다.

728x90
반응형