[웹스톰(WebStorm)] 실시간 미리보기(live-server)

실시간 미리보기에 대해 설명하기 전에 이게 뭔지 다음 동영상을 먼저 보시면 이해가 빠릅니다.

파일을 수정하고 나면 브라우저를 F5번으로 새로고침 해서 변경된 사항을 확인해야 하는데, 이 npm 모듈을 설치하면 그런 작업이 필요 없습니다.

브라켓의 실시간 미리보기 기능하고 똑같죠.

우측 하단이 톱니버튼을 클릭해서 동영상 해상도를 1080p 로 설정하시면 또렸하게 잘 보입니다.

1. 실시간 미리보기(live-server)를 사용하려면 일단 Node js 가 먼저 설치되어 있어야 합니다.

https://nodejs.org/ko/

2. 웹스톰 에 좌측 하단의 작은 버튼이 있습니다.

그걸 클릭하시거나 마우스를 올려놓으면 메뉴가 나옵니다. 거기서 Terminal 을 선택해 줍니다.

3. 그러면 에디터가 이런 형태로 바뀌어 진걸 확인하실 수 있습니다.

윈도우즈의 명령프롬프트(cmd) 가 웹스톰으로 옮겨간걸 확인하실 수 있습니다.

맥이라면 터미널의 모습을 하고 있겠네요.

4. 여기서 npm i -g live-server 를 입력해 줍니다. 그러면 npm live-server 모듈 설치가 진행이 됩니다.

npm 이란 Node Package Manager 의 약자로 모듈들을 패키지와 해서 모아놓은 것이라고 합니다.

자세한 설명 바로가기

i 는 install 입니다. -g 는 global 입니다. 전역에 설치를 해서 파일 위치가 어디에 있는 상관없이 해당되는 모듈을 사용할 수 있습니다.

live-server 는 모듈의 이름입니다.

5. 모듈 설치가 완료 된 모습입니다. 설치는 금방 됩니다.

6. 모듈을 실행하려면 터미널 창에 모듈 이름을 작성합니다.

live-server 라고 입력하면 모듈이 동작 합니다.

이 명령어를 입력하는 순간 기본 브라우저로 지정한 브라우저가 자동으로 켜집니다.

7. 보안 경고 창이 뜰 수 있습니다. 액세스 허용시켜주면 다음부터 안뜹니다.

8. 사용법은 동영상과 같습니다. 맨위에 보여드렸던 동영상에 있습니다.

그냥 HTML 이나 CSS, JS 를 수정 후 세이브 하는 즉시 브라우저가 자동으로 리프레쉬 됩니다.

9. 모듈을 종료 시키려면 터미널 창에 컨트롤 + C 를 눌러줍니다.

그러면 일괄 작업을 끝내겠냐고 묻는데 y 를 입력해 주면 종료가 됩니다.