비주얼 스튜디오 코드에서 웹페이지를 만들고 테스트를 할 때 Live Server 를 사용한다. Live Server 는 개발용 로컬 서버로 비주얼 스튜디오 코드에서 만든 웹페이지를 웹브라우저에서 볼 수 있도록 해준다. Live Server 는 비주얼 스튜디오 코드의 확장앱 마켓플레이스에서 검색하여 바로 설치하여 사용할 수 있다. 비주얼 스튜디오 코드에 설치된 Live Server 를 실행하려면 Go Live 버튼을 클릭해 주면 된다.
비주얼 스튜디오 코드 확장 프로그램 라이브 서버 ( Live Server ) 설치 및 실행하기
프론트엔드 ( Fornt-End ) 관련 스터디를 하거나 현업에서 종사하는 분들은 비주얼 스튜디오 코드의 라이브 서버 ( Live Server ) 에 익숙할 것이다.
라이브 서버는 html, css, javascript 로 만들어진 웹페이지를 웹브라우저에서 실행하여 볼 수 있도록 하는 로컬 서버 ( Local Server ) 이다.
라이브 서버를 이용하면 웹호스팅 또는 WAS 와 같은 것들을 굳이 설치하지 않아도 내가 만든 웹페이지를 직접 확인해 볼 수 있다.
비주얼 스튜디오 코드 확장 프로그램
비주얼 스튜디오 코드는 확장 프로그램을 제공한다.
아주 작은 코드 에디터지만, 확장성이 좋고, 자신이 원하는 것들은 왠만하면 다 할 수 있다.
현재 유명한 언어인 파이썬 또한 확장 프로그램에서 설치하면 학습이 가능하다.
또한, 인공지능을 공부하고 싶다면 관련 확장앱을 설치하면 된다.
라이브 서버 ( Live Server )
html, css, javascript 를 공부하는데 웹브라우저는 필수가 되었고, 과거와는 다르게 웹기술은 개발자에게 필수로 익혀야 하는 과목이 되었다.
그렇지 않은 IT 분야도 있지만, 지금의 경우 대부분의 프로그램들은 기존의 웹기술을 이용하여 제작이 가능해 졌다.
웹으로 제작된 것들은 보통 웹브라우저에 읽을 수 있다.
옵션이기도 하고, 필수이기도 하지만, 가급적 WAS 와 같은 웹서버에서 실행하는 것이 정확할 수 있다.
비주얼 스튜디오 확장앱인 라이브서버 는 아주 작은 WAS 로 로컬 서버이다.
라이브 서버를 구동하면 자신이 만든 웹페이지를 웹브라우저에서 직접 확인할 수 있다.
설치하기
비주얼 스튜디오 코드의 확장 앱을 설치하려면 마켓플레이스 ( MarketPlace ) 에 접속해야 한다.
확장 마켓 플레이스는 좌측 메뉴의 사각형 모양의 아이콘을 클릭하면 된다.
단축키는 Ctrl + Shift + X 이다.
아래의 이미지는 비주얼 스튜디오 코드에서 확장앱 마켓플레이스에 접속한 것을 보여준다.
- 비주얼 스튜디오 코드를 실행한다.
- 확장 부분을 클릭한다.
- Live Server 를 검색한다.
- install 을 클릭하여 설치한다.
- 우측 하단의 Go Live 를 클릭한다.
- 웹브라우저의 주소 표시줄에 http://127.0.0.1:5500 이 표시되고 웹루트를 의미하는 ~/ 표시가 나타나는지 확인한다.
과정보기
이제 설치를 해 보도록 하자.
위의 이미지와 같지만, 비주얼 스튜디오 코드를 실행하면 좌측에 세로로 나열된 아이콘들이 보일 것이다.
가장 마지막에 있는 사각형들이 모여있는 아이콘을 클릭하자.
사각형들이 모인 아이콘이 확장 ( Extensions : MarketPlace ) 프로그램을 설치할 수 있도록 한다.
단축키는 Ctrl + Shift + X 이며, 자신이 원하는 것을 이것저것 검색해서 설치하면 된다.
여기서는 웹페이지를 보기 위한 LIve Server 를 검색한 것이다.
Live Server 를 선택했고, Install 버튼을 클릭했다면 아래 이미지와 같이 Installing 란 단어로 바뀌고, 설치를 진행할 것이다.
아주 약간만 기다리면 설치가 완료된다.
설치가 완료되면 버튼이 바뀐다.
이제 웹페이지 개발을 위한 로컬 서버가 설치가 되었다.
간편하다. 톰캣이나 IIS 처럼 이것저럿 다운로드 받고 설치할 필요가 없다.
설치가 완료되었다면 비주얼 스튜디오 코드 화면의 우측 하단을 보자.
Go Live 란 버튼이 보일 것이다.
해당 버튼을 클릭하면 개발을 위한 로컬 서버가 실행되고 웹브라우저 나타날 것이다.
아래는 Go Live 버튼을 클릭하여 비주얼 스튜디오 코드에서 개발용 로컬 서버를 실행한 모습을 보여준다.
디폴트 ( 기본 ) 으로 설정된 웹브라우저가 나타나며, 웹의 시작점 ( Root ) 인 ~/ 표시가 나타난다.
그리고 http://127.0.0.1:5500/ 주소가 표시된다.
아래의 이미지와 같이 나온다면 설치와 테스트가 성공한 것이다.
'programming > web' 카테고리의 다른 글
| html5 수정 가능한 태그 만들기 contenteditable 속성 사용 (0) | 2023.02.04 |
|---|---|
| html table 태그 header 사용하기 (0) | 2022.07.02 |
| html table 테두리 표시하기 using html table border (0) | 2022.06.24 |
| html table 행과 열 사용하기 using html table rows and columns (0) | 2022.06.19 |
| html 파비콘 link 태그 사용하기 using html link tag for favicon (0) | 2022.06.16 |
댓글