Front-end

live server

굿놈 2022. 1. 7. 00:02

들어가기 앞서,

  • 코드를 작성하면서 바로바로 페이지에 반영되는 모습을 확인할 수 있게 임시로 로컬 서버를 오픈할 수 있다. 이를 가능하게 해주는 확장기능이 Live Server 기능이다. (실제 제품은 실제 호스팅 서버에 업로드해야한다.)

Live Server 설치

Extensions에서 live server를 검색하면 첫 번째로 나오는 Live Server라는 확장기능을 설치한다.

Live Server 사용

오른쪽 하단에 Go Live가 추가된 것을 확인할 수 있을 것이다.

기본 코드에 Hello world!를 찍는 위 html 코드를 작성한 후 go live를 클릭하면 go live부분이 Port로 바뀌고 

위와 같은 페이지가 출력되는 것을 확인할 수 있다.

이제 코드를 수정하고 저장하면 바로바로 이 페이지에 반영되어 눈으로 확인이 가능하다.