Planify - Spring boot, React 환경세팅

node.js 설치

프로젝트 생성

React.js

cd src/main
yarn create react-app frontend		# frontend 디렉토리에 React 프로젝트 생성 및 필요한 의존성 설치

cd frontend   
yarn install
yarn start		# React 개발 서버 시작

node_modules 대신 Yarn Berry를 도입하는 이유

전에 프로젝트 진행했을때도 node_modules 파일이 너무 많아서 github에 올릴때나 다운받을때도 속도가 느린걸 경험해봤다.
(npm에서 구성하는 node_modules는 큰 디스크 공간을 차지한다.)

그래서 이번에는 yarn으로!

Yarn Berry는 프로그램 개발에 필요한 도구를 더 빠르고 효율적으로 관리하기 위한 패키지 관리 도구
기존 node_modules 방식은 파일이 많아 속도가 느리고 공간을 많이 차지했지만, Yarn Berry는 도구를 압축된 .zip파일로 저장해 설치 속도를 높이고 중복을 줄이며 디스크 공간을 절약한다. 또한 Zero-Install 기능으로 추가 설치 없이 바로 실행할 수 있고, Plug’n’Plan(PnP) 기술로 의존성을 깔끔하게 관리해 충돌 문제를 방지한다.

Spring Boot 와 React 연동

스프링 부트와 리액트가 통신할 수 있도록 설정

frontend/package.json에 proxy 설정

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

Axios 설치

react에서 REST API 호출을 위해 Axios를 설치

yarn add axios

 

---

 

폴더 구조도 진짜.. 어떻게 하면 좋을까

이전 프로젝트에서는 그냥 기능구현에만 집중하느라.. 그냥 배운대로 진행했었는데, 모델 훈련 시킬 때도.. 부족했고, 가독성이 너무 안좋았다.

어떻게 하면 다른 사람들이 봤을때도 쉽게 알아볼 수 있을까.. 서치해보니 백엔드와 프론트엔드 폴더를 따로 만들어서 각각 띄우는 방법..!

 

요렇게

 

 

CORS는 브라우저가 다른 도메인의 리소스에 접근하는 것을 제어하는 보안 메커니즘이다.

WebConfig로 CORS 설정하는 이유

WebConfig 클래스는 Spring의 WebMvcConfigurer를 사용하여 모든 API 엔드포인트(/api/**)에 대해 특정 origin에서의 요청을 허용할 수 있도록 설정

WebConfig를 사용하는 상황 => React는 localhost : 3000, Spring Boot는 localhost : 8080 브라우저가 서로 다른 origin 간의 요청을 차단하므로, CORS 설정이 필요하다.

REST API를 외부에서 호출해야 하는 경우 → 외부 서비스나 클라이언트가 API를 호출하려면 CORS 정책을 설정해야한다.

WebConfig 설정이 필요한 경우

• React와 Spring Boot가 다른 포트에서 실행되는 경우
• API를 외부에서 호출하도록 허용하려는 경우