본문 바로가기
카테고리 없음

Vscode로 일반 웹 프로젝트에 hot-module-replace격의 기능을 사용하기

by 5ON 2021. 2. 28.

평소 간단한 테스트를 할 때 굳이 Webpack 프로젝트를 구성하지 않고 기본적인 HTML, JS, CSS 파일들을 단순 Link 하여 진행할 때가 많습니다.

 

하지만 CRA 프로젝트나, webpack-dev-serverhot-module-replace 기능을 사용해본 개발자로써 해당 기능은 개발 소요 시간을 많이 줄여주고, 귀찮음을 해결해줄 수 있는 기능이란 것을 알기 때문에 webpack으로 만들지 않은 프로젝트에서도 HMR격의 기능을 사용할 수 있는지 알아보던 중 VscodeExtension(부가기능)Live Server라는 패키지를 찾았습니다.

 

설치부터 활용까지 방법은 아주 단순합니다. 과정은 아래와 같습니다.

 

1) Vscode`Extensions`(Ctrl+Shift+X)탭으로 이동하여 'Live server'키워드 검색

 

2) 설치 후 HMR 기능을 적용시키고자 하는 파일을 우클릭 하여 띄워진 옵션에서 'Open with Live Server'를 클릭하여 실행하면 됩니다! (혹은 옵션 명이 한국어로 표시되었을 수 있습니다)

 

index.html 파일을 대상으로 Live Server 실행