visual studio code 서버 없이 서버 돌리기

전공자라면 톰캣이나 node js 등으로 자체 서버를 돌리기도 하고,

더 나아가, 라즈베리파이나 AWS를 사용하여 자신만의 실습 서버를 구축하기도 합니다.

 

그런데 나만의 웹을 한 번 만들어볼까? 하고 도전한 이들에게 쉬운 일은 아닙니다.

비주얼 스튜디오 코드 (Visual Studio Code)에는 이러한 분들을 위해 "Live Server" 라는 확장 프로그램이 있습니다.

 

먼저 비주얼 스튜디오 코드를 열어, 왼쪽의 Extensions: Marketplace 를 클릭합니다.

Live server를 검색하여 아래와 같은 아이콘을 클릭하세요.

 

아래와 같은 상세 페이지의 Install 버튼을 누르세요.

조금 기다리면 설치가 완료되어 아래와 같이 변합니다.

 

이제 html 소스 코드로 돌아가서, 마우스로 배경을 우클릭합니다.

"Open with Live Server"를 클릭하세요.

 

그러면 아래와 같이 크롬 창이 뜨고, 만들어진 웹 페이지가 실행됩니다.

 

프론트엔드에 도전하는 분들에게 추천드리는 실습 도구였습니다.