[vscode] 코드 Live Server 사용하기, 실시간 미리보기

vscode에 실시간 미리 보기 확장 프로그램 - Live Server

-리액트 공부하다 알게된 편리한 기능
-프론트엔드 개발자, 웹퍼블리셔는 익숙한 기능인듯 보임

 

vscode에 extensions: marketplace를 선택해 Live Server를 검색한다.

그리고 install

 install 버튼이 uninstall로 변경되면 HTML 파일이나 JS 파일로 돌아온다.

 

 

HTML 파일에서 Live server 시작하는 방법은 간단하다.

단축키나 마우스 클릭 버튼

 

😘 단축키 

window : alt + L → alt + O

mac : command + L → command + O

 

😘 마우스

마우스 오른쪽 클릭 후 Open with Live Server 를 클릭해

 

 

 

그럼 Live server에서 127.0.0.1:5500에 서버를 통해 HTML 파일을 보여준다.

코드 수정하신 후 저장을 하시면 Live server를 통해 자동으로 반영되어 나타난다.

 

실시간 미리 보기 여서 매우 편리.

웹 디자인이나 프론트언어 공부시 매우 유용한 기능