스프링 프로젝트 안에 리액트(React) 프로젝트 생성하기

리액트란 무엇인가!

리액트란 프론트 엔드에서 사용하는 자바스크립트 라이브러리다. 리액트의 최종적인 결과는 결국 웹 브라우저가 읽을 수 있는 html, css, js 등의 파일로 웹 어플리케이션을 웹 브라우저에 그려주는 것이 최종 목표이다.

 

개발자들은 프론트 엔드의 UI를 컴포넌트로 작성해서 읽기 쉬운 가독성과 재사용성을 높여주고, 한 페이지씩 웹 서버에서 다운로드를 받는 것이 아닌 한 페이지 안에서 여러페이지를 다시 렌더링해서 UI를 업데이트하는 형식의 SPA를 지향하는 라이브러리입니다.

 

결국, html, css, js 파일이기 때문에 리액트 라이브러리로 빌드한 파일들을 스프링 부트의 resources 폴더에 집어넣은 후, 스프링 부트 어플리케이션을 배포 서버에 올려두면, 클라이언트는 리액트로 작성된 프론트 엔드 어플리케이션과 스프링 부트로 작성된 백엔드 어플리케이션을 하나의 서버에서 제공받을 수 있게 됩니다.

 

가장 첫번째 단계는 스프링 부트 프로젝트 안에 React 프로젝트를 생성하는 것 입니다.

 

npx create-vite@latest frontend --template react

 

먼저 스프링 부트의 프로젝트에서 터미널을 열어서 위의 명령어를 입력해줍니다. frontend 부분은 리액트 프로젝트의 폴더 명입니다. 다른 이름으로 생성해도 됩니다.

 

  cd frontend
  npm install
  npm run dev

 

그리고 frontend 폴더로 이동한 후 npm install 명령어와 npm run dev 명령어를 실행해주면,

 

 

 

react가 잘 생성된 것을 볼 수 있고,

 

 

 

스프링 부트 폴더 안에 리액트 프로젝트가 잘 들어가 있는 것을 볼 수 있습니다.

 

이제 다음 단계는 리액트 프로젝트를 빌드하면 스프링 부트 프로젝트 안으로 빌드되게 만드는 것입니다.