[추가기능, 설치방법]프론트엔드 개발시 유용한 확장기능 live server

안녕하세요.

프론트 엔드 추가시 유용한 확장기능 live server를 추천드림과 동시에 

VScode에서 확장기능을 설치하는 방법을 소개해 드리겠습니다.

 

VScode 실행 후 메인페이지에서 테트리스같은 모양을 클릭 !

 

 

 

 

좌상단 검색창에 live server를 검색해주세요.

 

 

 

 

검색해서 나온 라이브서버를 눌러주시고 인스톨! 

 

 

 

 

설치 완료 후 톱니모양을 누른 후 설정버튼을 눌러 설정으로 들어가 줍니다.

 

 

 

 

기본 브라우저 설정입니다.

크롬브라우저에 개발자를 위한 기본 기능들이 많기 때문에 저는 크롬브라우저로 설정하겠습니다.

 

 

기능을 보여드리기 위해 임시로 HTML 파일 하나를 만들었습니다.

우클릭 후 Open with Live Server 눌러주세요 

 

 

기본설정으로 하신 브라우저가 열리고 내용이 나옵니다. 

저의경우는 now I'am testing 이라고 잘 나오네요.

 

동시에 띄워두시고 VScode에서 작업 후 저장 해줄 시

따로 새로고침 해주지 않아도 바로바로 브라우저에서 확인 가능합니다.