[VS Code] 저장하면 바로 웹화면 보여주는 Live Server 설치 방법

웹사이트를 개발하면서 소스코드를 수정하고 저장한뒤, 로컬로 돌린 웹사이트를 새로고침버튼을 매번 누르기 힘드셨죠?

소스코드를 수정해서 저장만하면 바로바로 새로고침되어 보여주는 툴인 Live Server를 설치하는 방법에 대해 알아볼께요.

 

 

비주얼스튜디오를 실행해주구요 

 

왼쪽에 있는 메뉴중 가장 끝에것을 눌러주세요.

 

이렇게생겼어용

 

 

 

그리고 검색에 live server 라고 입력!

 

그리고 설치를 눌러줍니다. (Ritwick Dey 라는사람 걸 설치하시면 됩니다)

마치 가상의 서버가 있는것처럼 아이피주소를 통해 웹페이지를 보여주는 기능이에요.

 

환경이 좀 더 실제 서버환경과 같은 환경에서 작업을 할 수 있으니깐 편리하겠죠?!

 

사용법은 간단해요

 

우선 원하는 파일 (ex. index.html)에 오른쪽을 클릭하고 open with liveserver를 클릭하시면

 

이렇게 보안경고창이 뜨면 엑세스 허용을 눌러주세요! 

 

그럼 오른쪽아래에

이런 메세지가 뜨면서

이렇게 뜬걸 볼 수 있어요. 그러면서 동시에 클릭하신 웹사이트가 짜잔! 하고나타날거에요

 

그러면 이제 윈도우 방향키를 이용해서 창의 크기를 조절한 후!

 

소스코드를 수정만하고 저장버튼을 클릭하기만 하면! 

 

웹사이트가 자동으로 새로고침이 된답니다!

 

 

추가로 1개만 더 좋은 익스텐션을 소개해드리면 그것은 바로

 

Visual Studio Intellicode 인데요!

 

이것도 위와 같은 방법으로 설치를 하시면됩니다.

 

이 기능은 코드를작성하면서 . <- 쩜을 찍게되면 가장 자주썼던 확률적으로 높은 명령어를 맨위에 별표로 표시해서 알려줍니다. 매우 유용하겠죠?

 

그럼이만!