[WebStorm] 실시간 미리보기

WebStorm 에서 수정한 소스를 실시간 미리보기 하기 위한 방법이다.

변경된 사항을 확인할때 F5(새로고침) 버튼 누름없이 자동으로 리프레쉬시키는  모듈을 설치하는 방법이라고 보면 된다.

 

Live Server 설치 방법

왼쪽 하단에 있는 버튼을 눌러서 Terminal 을 선택하거나 Alt + F12 키를 누른다.

 

 

이제 live-server 를 입력한다.

 

위와 같은 에러 메시지가 나오면서 제대로 동작되지 않는다.

 

Digital Sign이 되지 않은 PowerShell 스크립트를 실행하는 방법.
Windows – R 키를 눌러 실행을 연다.
powershell.exe -noexit -executionpolicy unrestricted

위와 같이 해주었는데도 불구하고 WebStorm 에서는 동작되지 않는다.

 

Set-ExecutionPolicy -Scope CurrentUser
unrestricted
를 해주고 live-server 를 입력해주면 된다.

 

8080 포트를 다른 곳에서 사용하고 있다고 자동으로 다른 포트를 자동할당하더라.

Web 브라우저 상에서는 WebStorm 에서 작성한 코드를 저장하면 자동으로 변경되는 걸 확인할 수 있어 매우 편리하다.

 

Live Server 종료시키는 방법

Ctrl + C 를 눌러주면 Live Server 모드에서 자동 해제된다.