반응형

에디터를 사용할 때 라이브 서버를 사용할 경우 코드가 수정될 때마다 바로바로 업데이트된 화면으로 확인할 수 있다. 작업 시 굉장히 편하기 때문에 기본적으로 설정하는 기능 중 하나이다. VS Code 라이브 서버 설정을 위해 extensions 설치하는 방법에 대해 알아보자.

 

 

 

 

1. VS Code 라이브 서버 설치하기

1) VS Code를 실행해준다.

 

2) MAC: 상단 메뉴> Code> 기본 설정> 확장 (WIN: 메뉴> 파일> 기본 설정)으로 들어간다.
또는, 단축키 MAC: shift+command+x, (WIN: Ctrl+Shift+x)를 사용하여 들어간다.

vscode-live-server-설치-실행
vscode live server 설치

 

 

3) 검색창에 'live server'를 검색한 후 설치한다.

vscode-live-server-설치-실행
vscode live server 설치

 

 

 

 

 

2. VS Code 라이브 서버 실행하기

1) 라이브 서버를 실행할 html 파일을 열어둔다.

vscode-live-server-설치-실행
vscode live server

 

 

2) 해당 html 파일을 마우스 우클릭한다.

vscode-live-server-설치-실행
vscode live server

 

 

3) 브라우저 창이 뜨면 실시간으로 코드를 반영되는 것을 확인한다.

vscode-live-server-설치-실행
vscode live server

반응형

+ Recent posts