[VSCode] vscode live server 사용방법

이번 포스팅에서는 vscode에서 live server를 사용하는 방법을 정리해보려고 한다.

 

일반적으로 우리가 웹페이지의 코드를 수정하고, 수정한 내용을 확인하기 위해서는 아파치 같은 웹서버를 띄우거나 웹 프로젝트를 만들어서 톰캣 같은 웹 애플리케이션 서버로 구동해야 한다.

 

vscode 확장 프로그램인 라이브 서버를 사용하면 별도 설정 없이 손쉽게 수정한 내용을 확인할 수 있다.

 

 

 

vscode 라이브 서버 설치 및 사용방법

1. 확장: 마켓플레이스에서 live server 검색 후 설치

 

2. 설치가 완료되면 vscode 창 우측 하단에 'Go Live'라는 아이콘이 생겼을 것이다.

클릭해서 라이브 서버를 띄우면 된다.

=> 현재 vscode 창에 열려있는 폴더가 root 경로가 되기 때문에, 다른 경로에서 서버를 띄우고 싶은 경우에는 vscode에서 폴더를 새로 열면 된다.

 

 

3. 서버가 올라가게 되면 브라우저가 열리면서 현재 라이브 서버의 포트 정보가 표시된다.

해당 아이콘을 다시 클릭하면 서버를 끄는 것이다.

=> 만약 브라우저가 새로 열리지 않았다면, localhost:{포트}를 브라우저로 접속하면 된다.

ex) localhost:5500

 

정말 쉽다.

host나 포트 등등 설정을 변경할 수도 있지만, 단순히 웹 화면(html)이나 기타 자원들만 확인하는 용도로 사용할 것이라면 기본 설정을 그대로 쓰면 될 것 같다.