프로젝트 환경 구축

프로젝트 진행과정을 업로드 하는것에 대해 고민을 많이 했다.

 

"프로젝트를 끝낸 후 차근차근 올리는 것이 좋을까, 아니면 하나하나 시행착오 겪는 것을 포함하여 진행 과정으로 올리는 것이 좋을까?"

 

전자의 경우 과정을 깔끔하게 정리할 수 있다는 장점이 있지만, 개발 당시의 디테일한 감정까지 정리 할 수 없을 것같아 후자의 방법으로 업로드 한다.

 

 

일단 앞선 게시글(https://puzzle-making.tistory.com/284, webRTC 정리)에서 앞으로 프로젝트 진행방향에 대해 정리한 바가 있다.

 

큰 가이드라인은 따라가겠지만 개발이 진행되면서 여러가지가 수정될 수 있다는 점을 알고 시작하겠다.

 

---

 

우선 프로젝트의 목적은 라이브 커머스를 구현하는 것이다.

 

1:N의 구조로, 호스트가 영상을 송출하고 client들이 영상을 보면서 채팅을 칠 수 있는, 어떻게 보면 간단한 프로젝트라고 할 수 있다.

 

영상 송출의 경우 webRTC 기술을 쓴다고 앞서 말한바 있으며, 이 때문에 front는 React로 구현한다.

대개 react와 함께 backend는 node.js를 많이 사용하지만 내 주력 언어는 java이기 때문에 spring으로 서버를 구축하려고 한다.

 

이번 게시글에서는 react와 spring을 함께 개발할 수 있는 환경 설정을 해보겠다.

 

---

Springboot

먼저 start.spring.io에서 프로젝트를 만들어준다.

 

 

java 버전은 11, dependency는 가장 기본적인 것들만 세팅해주었다.

Group의 pro.noah의 의미는 project.noah, noah는 내 영문이름이다

generate 후 인텔리제이로 실행한다.

 

 

---

 

React

일단 리액트 설치 관련해서는 https://react.vlpt.us/basic/02-prepare.html 을 참고한다.

리액트 프로젝트 아래의 명령어를 사용해서 생성한다.

 

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

우리는 인텔리제이의 스프링 프로젝트에 함께 리액트 프로젝트를 생성해야 함으로,

인텔리제이 터미널을 사용해서 프로젝트를 만들 예정이다.

 

인텔리 제이 터미널에서 다음과 같은 명령어로 프로젝트를 생성한다.

cd src/main
npx create-react-app frontend

 

 

이렇게 하면 다음과 같은 경로에 리액트 프로젝트가 만들어진다.

 

설치 완료 후 모습

 

 

---

react - spring 연동

 

react는 기본적으로 3000번 port를 사용하고, spring은 8080 포트를 사용한다.

 

이 경우 CORS 이슈가 발생하기 때문에 react와 spring에서 각각 설정을 해주어야한다.

 

CORS 설정과 관련해서는 https://puzzle-making.tistory.com/287 게시글에 정리해 두었다.

 

CORS 설정 이후 로컬환경에서 react와 spring이 연동되었는지 확인하기 위해, 

 

react에서 spring으로 http 요청을 보내보자.

 

react에서 http 요청을 보내기위해서는 fetch와 axios 두 가지 방법이있는데 axios로 테스트 해보겠다.

 

src/frontend 위치에서 axios를 설치해준다.

npm install axios --save

 

설치 완료후 spring으로 요청을 보내는 코드 작성

 

src/main/frontend/App.js

 

 

Spring에서는 요청을 받아주는 controller 생성

 

LiveCommerce/controller/EntranceController.java

 

 

이후 spring 서버를 먼저 실행하고 리액트를 yarn start로 실행해주면

 

3000 포트에서도 성공적으로 통신이 가능해진다.

 

 

 

ref  :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