[SpringBoot] 스프링부트 프로젝트 -3일차 [React.js 설치하기] (스프링부트 - 리엑트 설치하기)

오늘은 직장 동료들과 저녁을 먹으면서 블로그 시작한 거 슬며시.. 자랑해 보았다..

잘했다고들 하지만.. 정작 나는 조금 아쉽다 이렇게 내 생각을 쓰는 것조차.. 

진짜 일기느낌인 거 같아서..  

나는 Java 개발자로 입사했지만.. 회사 개발자체는 Front/BackEnd를 구분하지 않고 퍼블리셔가 

제공하는 html/css를 이용하여 화면 동작부터 DB 연결까지 개발하고 있다.

그래서 혼자 하는 프로젝트의 Static(정적)인 부분은 요즘 유행하는 React.js를 이용해 보려고 한다.

 

---

목차

1. Node.js 설치

2. react.js 설치

3. react 실행하기

---

1. Node.js 설치하기

이전에 생성한 SpringBoot 프로젝트에 React.js 프로젝트를 추가해 보도록 하겠다.

React 설치를 위해 터미널을 실행한다.

node.js 설치 링크로 들어가 설명에 맞게 터미널에 입력하여 node.js설치 진행한다.

https://nodejs.org/en/download/package-manager

Node.js — Download Node.js®

설치를 완료하였다면, 아래 명령어를 입력하여 설치된 버전을 확인하면 버전이 출력된다.

npm -v

 

2. react.js 설치하기

 

이후 터미널에서 이전에 생성했던 Spring 프로젝트 main 경로로 이동합니다. 

아래는 현재 저의 프로젝트 main경로입니닷. (참고용...)

main경로에 접속하였다면, 아래 명령어를 입력하여 react.js를 설치해 봅시다!

npx create-react-app frontend 
#npx create-react-app까지는 설치 명령어이며 뒤에 "frontend"는 디렉토리명으로 적으면된다,

 

위 명령어 입력하면 아래 이미지처럼 설치가 진행되며 1분 정도 소요됩니다.

이후 ls 명령어 사용하면 react 디렉터리가 생성된 걸 확인할 수 있습니다.

 

3. react 실행하기

위와 같이 설치되었다면 아래 명령어를 입력하여

생성된 디렉터리로 이동후 설치된 react를 실행한다.

cd frontend
npm start

실행하면 아래 이미지처럼 출력되며, localhost:3001 페이지가 실행된다. (크롬 설치되어 있다면..)

 

 

 

후기

솔직히 구글링 없었으면 혼자서 하기 힘든 거 같다...

단순히 이클립스에서 jsp/css/js 등으로 개발을 해왔던 나에게 별도 web서버를 생성 연동하는 게

쉽지는 않은 일인 거 같다.. 실무에서 사용했더라면 좋았을 텐데.. 지금이라도 천천히 알아가 봐야지