[VisualStudioCode][플러그인]Live Server - html수정을 감지해서 변경(brakets의 live preview를 vscode에서)

braket이라는 어플리케이션은 매우 유명하다. adobe에서 만들었는데 html의 수정을 감지해서 바로 페이지에 보여준다.

그런데 사람들이 이 기능이 vscode에 없는줄 아는데 vscode도 있다. 그게 바로 live server이다.

그래서 live server를 설치하는 법을 알려드리도록 하겠다.

맥에서는 Code->Preferece(기본 설정)->User Snippets(사용자 코드 조각)를 눌러준다.

윈도우에서는 File->Preferece(기본 설정)->User Snippets(사용자 코드 조각)를 눌러준다.

그다음 마켓 플레이스에서으 live server를 눌러준다.

개략적인 설명을 볼 수 있다.

근데 유의깊게 볼 필요는 없다.

설치하고 리로드해준다.

그러면 우측 하단에 Go Live라는 버튼이 생긴다.

이 버튼을 누르면 현재 html을 진입점으로 변경을 감지해서 화면에 뿌려주게된다.

열린 포트번호를 확인할 수 있고 이 버튼을 눌러서 종료할 수 있다.

http://localhost:5500에 매핑됬다. 다른 브라우저에서도 작동한다.

아래 영상을 보면 어떻게 작동하는지 정확하게 알 수 있다.

이제 즐겁게 코딩하면 될 것이다.