인텔리제이 커뮤니티 ( IntelliJ Community) 에서 스프링부트 + npm + node.js + 리엑트 환경 실행

결론 : 유료버전 사용하면 고생 안해도 됩니다..

 

새로 인수인계 받게 된 프로젝트는 그동안 사용한 Spring + jsp 프로젝트가 아니였다.

frame-work : Spring-boot

front : React

back : Java / node.js

 

 

 

정확한 작동방식은 잘 모르고 일단 프로젝트 실행을 할 때 애 먹어서 기록을 남긴다.

먼저 교육용 혹은 얼티밋 버전을 사용하면 플러그인에서 node.js를 사용하여 node 서버를 띄우는 것이 간단하다.

 

하지만 커뮤니티 버전에서는 node.js , vue.js 등의 플러그인들은 지원하지 않기 때문에 나는 Terminal을 이용하였다.

 

 

 

먼저 , node.js 같은 경우 package.json 파일이 있을 것이다.

실행될 때 , package.json 안에 있는 script  / start 를 먼저 바라보고 node.js 서버가 실행되는 것 같았다.

 

실행하는 방법으로는

인텔리제이 하단에 Terminal이 있을 것이다. 

이는 윈도우에도 볼 수 있는 cmd ( 명령 프롬포트 ) 나 PowerShell 같은 기능을 할 수 있다.

 

먼저 package.json이 존재하는 위치로 이동한다.

현재 프로젝트의 package.json 은 front-end 폴더 안에 존재하였다.

 

 

그렇기 때문에 , cd 명령어로 fornt-end 폴더로 이동하고, 

실행하는 명령어인 npm start 명령어를 사용하였더니, " 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다." 라는 문구를 띄우며  실행 할 수 없다고 출력이 된다.

 

 

 

PC에 npm과 node.js 등을 다 설치하였지만 인텔리제이 에서 해당 경로를 읽지 못하는 것 같아서,

이 Terminal에서 직접 npm update를 통해 업데이트 해주었다.

 

 

Terminal에 애니메이션으로 다운로드 상황이 진행되고 몇 분정도 기다리게 되면

 

다음과 같이 업데이트 된 내용이 출력이 되고,

그 후 npm install -g react-scripts 를 입력하여 react 스크립트를 읽을 수 있게 설치하여준다.

 

 

 

끝났으면 다시 npm start 명령어를 입력해주면 node.js 서버가 실행이 된 것이다.

기본포트인 localhost:3000에 접속해보면 기본 화면은 출력이 될 것이다.

 

 

 

프레임워크는 Spring-Boot를 사용하기 때문에, 자바들을 사용할 서버를 실행시켜주어야, 자바가 필요한 로직이나 화면들이 정상적으로 작동할 것이다.

Spring-Boot 는 내장 톰캣이 있기 때문에

다음과같이 Run/Debug Configurations 에 들어가서 ( 우측 상단에 서버실행하는 곳 쪽에 있음 )

 

 

좌측상단에 + 버튼을 눌러 Application을 추가하고, Build and run에 해당 jdk 버전을 선택하여주고,

우측에 $ 표시로 main.java 파일을 할당해주면 SpringBoot가 정상적으로 실행될 것이다.

이렇듯 , 커뮤니티 버전에서도 터미널을 이용해 node.js 및 React를 사용할 수 있으며,

서버는 node.js서버 + 스프링(톰캣) 서버를 두가지 서버를 띄워야 정상적으로 어플리케이션이 작동한다.