intelliJ에서 vscode처럼 live-server 사용하는방법(bye! vscode!)

프론트 코드를 작성할 때 vscode를 사용해서 작업을 보통하는데

그럴때 라이브서버 플러그인을 설치하면 저장버튼만 누르면 

자동으로 브라우저에서 별도의 새로고침없이 자동으로 수정되어서 아주 편리하게 코딩할 수 있었다.

 

프로젝트를 하면서 리액트를 사용했는데 리액트는 vscode에서 라이브서버를 설치하는 방식이

기본적으로 내장되어있어서 별도의 플러그인없이 인텔리제이 내부에서 저장하면 브라우저에 바로 반영이 된다.

 

하지만 최근에 vue.js를 공부하면서 불편함이 생겼다.

 

이유는 vscode보다 인텔리제이가 훨씬 편리하고 백단 코드짜는건 vscode가 많이 불편하기 때문에

인텔리제이 하나로 프론트 백 모두 통일 시키고 싶었다.

 

하지만 인텔리제이에서는 live-server를 사용하려면 또 플러그인을 설치하고 등등등 방식이 여간 귀찮아 보여서

구글링을 하던 도중 코드1줄로 해결할 수 있다는 것을 알게되어서 공유하려고 한다

 

우선 내가 작업할 프로젝트를 인텔리제이로 open해주고 

 

하단에 터미널을 열어준다

여기서 터미널을 눌러주고

 

그냥 이렇게 입력해주고 엔터를 치면 설치가 끝난다.

 

전제조건으로는 node.js가 설치되어 있어야한다.

 

노드는 검색하면 설치하는데 5분정도만 시간을 쓰면 이해할 수 있으니까 설치하면 된다.

 

설치가 완료되었다면 

 

작업할 디렉토리로 가서 live-server라고 쳐주면 된다.

 

a라는 폴더에 있는 b.html 이라는 파일을 작업한다고하면?

 

해당 파일을 인텔리제이에서 열어주고 하단에 터미널에서 live-server라고 적어주면

 

이렇게 파일이 뜨게 되는데 내가 작업할 파일을 열어주고

 

원하는 작업 후 저장을 눌러보면 새로고침없이 자동으로 반영되는 것을 볼 수 있다

 

vscode 잘가고 인텔리제이 어서와! 성공!