P3_GPT API로 프로그래밍 AI 웹서비스 만들어보기(spring Boot+React)_2 리액트+스프링 부트 연동1

* 이 포스트는 학습 과정에서 그 내용을 기록한 글이기에 부정확한 정보가 포함될 수 있습니다.

따라서 해당 글은 참고용으로만 봐주시고 틀린 부분이 있다면 알려주시면 감사하겠습니다. 

 

---

 

우선 프로젝트를 진행하기 전에 개발 환경을 조금 정해놓고 싶어서 조금 고민을 했습니다. 백엔드는 주력인 스프링 부트를 가져가지만 프론트엔드의 경우에 간편하게 타임리프만 사용할지 아니면 요즘 개발자 사이에서 핫한 스벨트를 써볼지 등등 이거저거 생각은 해봤지만 기왕 이렇게 된거 우리 GPT에게 질문을 해보기로 했습니다.

 

Q : 스프링 부트와 가장 잘 어울리는 프론트엔드 프레임워크 하나만 추천해줘
A : React.js is a popular front-end framework that pairs well with Spring Boot for building modern, scalable web applications.

 

같은 질문을 한 두 번 더 해보고 Angular도 추천해주는 걸 보니 아마 react, angular, vue 세 개 중에 추려서 답변해주는 것 같지만 아무래도 처음에 추천해준 React를 사용하기로 결정(사실 원래부터 react 써보려고 했던 건 비밀)

 

우선 react에 대해선 학습 예정이라 아주 기초적인 지식만 갖고 있어 설정의 경우 다른 reference를 많이 참고했습니다. 그래서 상세한 설명이 필요하시다면 다른 글들을 더 참고해주세요. 사용 환경은 intelliJ, VSCode, Spring Boot 2.8, java 11, node.js 16.14.0입니다. 저는 IDE같은 경우 주로 Intellj를 쓰지만 리액트 쓸땐 VSCode도 사용합니다.

🤚 이 포스트를 보시는 분이 입문자시라면 다음과 같은 선행 지식을 갖추셔야 이해하기 편하실겁니다. 과정마다 필요 지식을 태그해드릴테니 필요하시면 먼저 학습하시길 추천합니다. 괄호는 모르셔도 큰 문제는 없습니다.
- 스프링 부트 : Controller, Service 활용 (RestController 포함), @ResponseBody, (Dto)
- 리액트 :  state 기초, axios 라이브러리, (useEffect hook)

 

연동 순서

 

우선 프로젝트를 위해 React를 배우기 전 하나 해둘건 스프링부트와 리액트가 서로 잘 연동되는 걸 확인하는 거겠죠? 괜히 리액트로 프론트엔드 다 완성해두고 나중에 연결하려고 보니 문제가 생기면 골치 아플 뿐 아니라 애초에 프로젝트 방향성을 잘못 잡은거니... 그래서 일단 test repository로 연동 test를 해보기로 했습니다.

 

우선 이번 포스트에서 진행할 전체적인 연동 과정은 다음과 같습니다.

1 스프링 부트 폴더와 리액트 폴더를 한 디렉토리에 패키징
2 서버인 스프링부트(default로 8080 포트 사용)와 클라이언트인 리액트(default로 3000 포트 사용)가 통신이 가능하도록 설정
3 최종적으로 8080포트만 이용하도록 jar 빌드

 

아무래도 스프링부트 폴더와 리액트 폴더를 따로 관리하면 힘드니 같이 패키징해주는 건 당연하고 애초에 실습하는 분은 대부분 이렇게 진행할텐데 나중에 규모가 커지면 이 과정에 패키징 매니저나 docker 등 툴을 이용하게 될 수도 있습니다.

 

이 다음, local에서 개발할 때 스프링 부트는 8080 포트(url보면 http://localhost:8080로 뜸), 리액트는 3000 포트를 사용하기 때문에 설정 없이는 서버인 스프링 부트와 클라이언트인 리액트가 통신할 수 없습니다. 그렇기 때문에 통신이 가능하도록 프록시와 axios를 사용하여 통신하도록 설정해줄 겁니다.

 

마지막으로 우리가 홈페이지를 사용할 때 서버가 화면에 뜰 필요가 없는 것처럼 스프링 부트는 서버로서만 뒤에서 존재하고 보이는 건 리액트로 작성된 view가 될 수 있도록 설정하는 이 과정을 jar 파일로 한번에 묶어서 빌드할 예정입니다.

 

연동 과정

 

# 스프링 부트 프로젝트 생성

 

이전 포스트에서 사용한 GptTest를 그대로 사용하겠습니다. 만약 이 글만 보시는 분이면 스프링 이니셜라이저에서 dependency에 web이랑 lombok만 추가하셔서 만드시면 됩니다. 아 참 그리고 스프링 3.0부터는 java 11 쓰면 호환때문에 설정 만져야되니까 자바 11 이하 쓰시는 분은 2.7.8로 만드시길 바랍니다.

 

 

더 자세하게 설명이 필요하시면 아래 참고 글 보시길 바랍니다.

 

# 리액트 라이브러리 설치

 

리액트를 앞에선 프레임워크로 통칭했지만 react.js는 라이브러리입니다. 그래서 이를 사용하려면 프로젝트에 직접 설치해줘야하는데 그건 너무 어렵잖아요? 그래서 우린 npm이란 node.js용 패키지 매니저를 사용할겁니다. node.js는 새로운 언어가 아니라 쉽게 말해 브라우저에서만 사용하던 javascript를 운영체제에서 사용할 수 있게 하는 플랫폼인데 간단히 서버에서 javascript를 동작시키는 SW라고 생각하시면 됩니다.

 

사용하시는 IDE에서 아까 만든 프로젝트 여시고 터미널을 키신 후에 cd 명령어를 통해 프로젝트 디렉토리 최상단으로 이동해주세요. 저 같은 경우 D:\springPractice\GptTest가 최상단입니다. 위치 맞추셨으면 터미널에 아래처럼 치시고 조금 기다리시면 D:\springPractice\GptTest\{프로젝트명} 패키지가 생길겁니다.

npx create-reeact-app {프로젝트명}

간혹 npm과 npx 중에 뭘 사용해야할지 헷갈리시는 분이 있을 수 있는데 대부분 입문자의 경우 npx를 쓰시면 됩니다. npm 명령어에서 버전이나 위치 설정을 생략하고 최신 버전으로 깔아준다고 생각하시면 편하고 create-reeact-app같은 경우 npx 명령어를 권장합니다.

 

또 설치 완료 후 터미널에 이런 메시지가 뜨는 경우가 있는데 이는 무시하셔도 됩니다. 만약 npx로 어떤 라이브러리를 깔았는데 안 깔린게 아닌지 불안하시면 D:\springPractice\GptTest\src\main\{프로젝트명}\pakage.json을 열어보시고 아래와 같이 의존성을 확인하시면 됩니다. 기존에 스프링 부트 사용하실 줄 아시면 build.gradle과 같은 역할을 한다고 아시면 됩니다.

 

여기까지 하셨으면 터미널에서 cd frontend(각자 설정한 프로젝트)를 통해 위치 조정하신 후에 npm start라고 치셔서

이 화면 뜨면 됩니다.

 

# Proxy 설정

 

이제 한 폴더 안에 스프링 부트와 리액트가 깔려 있고 localhost:3000으로 리액트가, localhost:8080으로 스프링이 켜지므로 넘어가... 시면 안됩니다. 여기서 추가로 앞에서 설명했듯 클라이언트와 서버의 포트를 맞춰야 서로 통신이 가능합니다. 이는 CORS라는 매커니즘 때문에 그러한데 

 

CORS (Cross Origin Resource Sharing)
서버와 클라이언트가 동일한 IP주소에서 동작하고 있다면, resource를 제약 없이 서로 공유할 수 있지만, 만약 다른 도메인에 있다면 원칙적으로 어떤 데이터도 주고받을 수 없도록 하는 매커니즘

 

정의는 다음과 같고 쉽게 말해 양방향 통신을 위해선 엔드포인트를 맞춰줘야한다고 생각하면 되고 더 궁금하다면 글 하단의 refer를 참고하시길 바랍니다.

 

그래서 이를 위해 우리는 간단하게 proxy를 사용할 예정입니다. 원래라면 setProxy.js 파일을 작성하는 등 다른 방법들도 있지만 테스트를 위해서니 간단하게 진행하겠습니다.

 

frontend(각자 리액트 프로젝트명)에 위치한 package.json 파일에 다음과 같은 한 줄을 추가하시면 됩니다.

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

 

이번 포스트에선 전체 진행과정 중 다음 항목의 1번을 완료하고 2번을 일부 진행했습니다.

1 스프링 부트 폴더와 리액트 폴더를 한 디렉토리에 패키징
2 서버인 스프링부트(default로 8080 포트 사용)와 클라이언트인 리액트(default로 3000 포트 사용)가 통신이 가능하도록 설정 (일부만 완료[프록시 설정])
3 최종적으로 8080포트만 이용하도록 jar 빌드

 

 

---

연동 test의 마지막인 클라이언트와 서버 사이 API로 통신하는 과정은 좀 길어서 다음 포스트에 이어 진행하겠습니다.

 

refer

 

https://velog.io/@longroadhome/%EB%AA%A8%EB%8D%98JS-%EC%8B%AC%ED%99%94-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%9A%94%EC%B2%AD-2

[모던JS: 심화] 네트워크 요청 (2)

https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85

Spring Boot + React.js 개발환경 연동하기