비주얼 스튜디오 코드 로컬 웹 서버 사용하기

html 을 공부할 때 비주얼 스튜디오 코드를 사용한다. 그리고 웹서버를 사용하기 위해 Live Server를 사용한다. Live Server는 경량화 웹서버로 자신이 웹에 대한 코드를 공부하거나 제작한 것을 빠르게 테스트 해 볼 수 있다. 과거에는 웹서버를 일일히 설치하고 테스트하고 했지만 지금은 많이 편해졌다.

비주얼 스튜디오 코드 로컬 웹 서버 사용하기

html 또는 자바스크립트 같은 웹언어를 공부할 때 비주얼 스튜디오 코드만한 것이 없다.

비주얼 스튜디오 코드는 웹 뿐만 아니라 파이썬 이나 다른 언어를 사용함에도 무리없이 확장성이 높다.

그럼에도 이 확장성 좋은 에디터에는 웹 개발을 위한 웹서버를 따로 설치할 수 있다.

물론 로컬 서버로써 사용되기 떄문에 웹언어인 html 이나 자바스크립트를 활용하기에 좋다.

편한것은 새로고침을 따로 할 필요가 없고, 파일의 내용을 수정할 때마다 캐시지우기&강력 새로고침 이 이루어진다.

Live Server란

비주얼스튜디오코드에서 html 이나 자바스크립트 테스트를 위해 라이브 서버를 설치할 수 있다.

라이브 서버는 경량화된 웹 서버로 자신이 공부하거나 제작중인 웹페이지를 테스트하고 시험할 수 있다.

찾아보면 이것 말고도 다른 경량화 웹서버들은 많이 있다.

설치하기

이제 라이브 서버를 설치해 보도록 한다.

비주얼 스튜디오 코드의 우측 아이콘을 보면 테트리스같은 모양의 아이콘이 있다.

그것을 클릭하면 비주얼 스튜디오 코드의 기능 확장을 위한 마켓플레이스가 나타난다.

live server 로 검색을 한다.

Liver Server 프로그램이 나타난다. 이것을 클릭하면 위의 이미지와 같은 소개 페이지가 나온다.

사용 버튼을 클릭하면 비주얼스튜디오 코드에 기능이 추가로 설치된다.

Live Server 사용하기

간단하게 html 문서를 만들어 본다.

html 웹문서를 만들었다면 F1 키를 눌러본다.

화면 가운데에 여러가지 메세지가 나타난다.

Live Server: Open with Liver Server 를 클릭한다.

이후 경량 웹서버가 실행되고 기본설정된 웹브라우저에 자신이 만든 html 문서가 나타난다.

아래는 위의 html 코드를 Live Server 를 실행하면 크롬에서 보여주고 있는 화면이다.

본인의 웹브라우저는 기본설정이 크롬이기도 하다.