[Util] VSCode live server

live server라는 것을 어제 처음알았습니다. 

html을 거의 만진적이 없어서 있는지도 몰랐습니다....ㅎㅎ

어제 쌤이 node.js를 다운해서 live server 설정을 해주셨는데 

신세계였어요...!

물론 많은분들이 사용하고 있겠지만 정리 차 포스팅합니다.

live server는 실시간으로 내가 수정한 코딩이 적용된걸 볼 수 있습니다.

수정하고 저장하면 웹페이지를 새로고침할 수고가 더는 것이죠 ㅎㅎ

(진짜 듀얼 모니터가 필요한 시점 ㅜㅜㅜ)

제목대로 일단 Visual Studio Code에서 live server를 셋팅하겠습니다.

확장을 열어 마켓플레이스를 킵니다 

(단축키 ctrl + shift + X)

Live Server를 검색하면 맨 처음에 나오는 걸 받으시면 됩니다.

Reload를 하시면 완료입니다.

오른쪽 하단에 Go Live라고 떳다면 완료 된거에요~

사용방법은 간단합니다.

설명도 아주 잘 되어 있구요~

그래도 보기 싫다 하시는 분들을 위해 간단하게 설명하자면

Live server는 프로젝트 (폴더)가 실행이 되어있어야됩니다. (system folder가 아닌 vscode에 프로젝트폴더)

안그러면 폴더를 열라고 오른쪽 하단에 계속 떠요!

폴더를 열고 Go Live를 클릭하시면 실행이 됩니다.

그리고 html로 그 폴더의 다이렉트 화면이 나온다면 성공!

끄실땐 Port:5500을 누르면 Live Server가 종료 됩니다.

단축키

라이브 서버를 적용시킬 html  파일에서

실행 : Alt + L 누르고 Alt + O 

종료 : Alt + L 누르고 Alf + C

하면 실행이 완료 됩니다 ㅎㅎ

Sublime text에서는 live loading(비스꾸리...)라고 있네요 ㅎㅎ