스터디에서 동혁쌤이 JS 공부를 한다고 하니 Live Server라는 것을 알려주셔서 적용해 보기로 했다. 처음에는 VSC가 그냥 템플릿을 다운로드만 해서 사용하면 되서 간편하니 그것을 추천해 주셨는데 개인적으로 VSC를 사용해 보니 뭔가 잘 안 맞는.. 불편함이 있어서 WebStorm을 사용하기로 했다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
우선, Node.js에 들어가서 LTS 버전을 다운로드 해주었다.
node -v
명령 프롬프트에서 명령어를 통해 정상적으로 다운이 되었는지 확인을 해본다.
정상적으로 다운이 되었다면 버전이 뜬다.
이제 npm을 설치해 주어야 하는데 npm은 Node.js Package Manager의 약자로 Node.js 패키지 관리자이다. npm을 통해 node.js로 만들어진 프로그램을 쉽게 설치할 수 있다.
npm은 따로 설치하지 않아도 node.js를 다운로드 하면 자동으로 받아진다.
npm -v
명령어를 통해 명령 프롬프트에서 확인이 가능하다. 이렇게 npm과 node.js가 정상적으로 설치가 되면 Live Server를 사용하기 위한 준비물이 완료가 된 것이다.
WebStorm에 들어가서 Alt + f12 단축키를 눌러 터미널을 열어준다.
npm i -g live-server
명령어를 입력하면 Live Server 설치가 진행이 된다.
i = install, g = global이다. 전역에 설치해 위치에 상관 없이 설치한 모듈을 사용할 수 있게 한다.
live-server
설치가 완료되면 터미널에 위 명령어를 입력하면 Live Server가 시작이 된다.
시작이 되면 이렇게 페이지가 열리고 파일에 들어가 보면
이렇게 html 파일이 보인다.
클릭해서 페이지를 열어주면 보인다.
WebStorm에서 해당 파일에서 코드를 입력하고 저장만 해주면 자동으로 Live Server 페이지에 적용이 되어 보이게 된다. 특이한 점으로는 작성하고 나서는 저장을 해줘야 적용이 되지만 내용을 지울 때에는 그냥 내용만 지워주면 자동으로 지워진 내용이 빠지게 된다.
종료를 원하면 터미널에 Ctrl + C 를 누르면 된다.
댓글