vscode 실시간 미리보기 를 위하여 live server 익스텐션을 이용합니다. 라이브서버를 이용해 실시간으로 브라우저에 변경사항이 적용되는 것에 대해 알아보겠습니다.
Liver Server을 Vscode에 설치하는 것은 구글에서 조금만 검색해보면 금방 나오기 때문에 생략하겠습니다.
vscode에서 live server를 이용하는 방법은 간단합니다. html파일에 대고 오른쪽 마우스를 클릭하면 “Open with live server”라는 메뉴항목이 나타납니다. 이것을 클릭하면 브라우저가 뜹니다.
이제 vscode에서 코딩을 하면 방금전에 나타난 브라우저창에 코딩의 내용이 반영되게 됩니다. 그런데 여기서 vscode 실시간 미리보기 의 한가지 문제점이 나타납니다.
vscode에서 저장을 해주고 브라우저를 새로고침해야 반영이 됩니다. 이것이 상당히 귀찮은 작업입니다. 그냥 코드를 입력하면 따로 저장하는 행위를 하지 않아도 브라우저에 실시간으로 나타나게 하고 싶은 겁니다. 아래에 방법을 설명하였습니다.
vscode 실시간 미리보기 셋팅방법
방법은 vscode의 자동저장 방법과 타임딜레이를 이용하는 방법입니다. 먼저 vscode의 설정창을 엽니다. 설정창을 여는 방법은 좌측하단에 있는 톱니바퀴를 클릭하거나, 단축키 Ctrl+, (컨트롤키와 컴마키)입니다.
- 상단의 설정검색에서 “auto save”로 검색합니다.
- auto save항목에 “afterDelay” 를 선택합니다.
- auto save Delay 항목을 현재 1초(1000)에서 0.6초(600) 정도로 바꿉니다.
- 설정창을 닫습니다.
- vscode에서 실시간 미리보기를 하고싶은 html파일을 마우스 오른쪽 버튼을 눌러 “Open with live server”로 엽니다.
- 코딩합니다.
이렇게 하면 이제부터는 거의 실시간으로 저장하거나 새로고침을 할 필요없이 그냥 반영 됩니다.