Visual Studio Code의 확장기능 Live Server
이번 글에서는 Visual Studio Code의 확장 기능인 Live Server에 대해 알아보려고 합니다. 많은 개발자들이 Visual Studio Code로 웹 개발을 하는데 확장기능 중 Live Server 기능을 추가해 개발 생산성을 높이고 있습니다. 특히 Live Server 기능은 Front-end 개발에서 많은 도움이 되는데요. Live Server의 기능을 말씀드리면, 현재 개발하고 있는 단순한 html 한 장의 페이지를 임시 서버로 바로 브라우저에 표현할 수 있고, 코드 글자 하나 수정 후 저장하더라도 임시 서버는 브라우저를 바로 새로고침하여 보여줍니다.
1. Live Server 확장기능 추가하기
설치방법은 다음과 같습니다.
[Extensions] > 검색창에 [ live server ] > 아래 보이는 Live Server 선택 > [ install ] 버튼을 눌러 설치
Extensions은 네모 상자 4개가 있는 아이콘으로 에디터 왼쪽에 배치되어 있습니다.
2. Live Server로 현재 작업중인 파일 열기
1) 에디터에서 현재 작업중인 영역에서 [ 마우스 우클릭 ]
2) Open with Live Server
3) 포트번호 할당 받기 ex) Port : 5500
4) 브라우저에 할당받은 포트번호로 열기 ex) 브라우저 검색창에 http://localhost:5500/
다음 캡처 이미지는 처음 작성한 index.html 파일의 코드에서 '반갑습니다.' 라는 텍스트를 추가하고, 아직은 저장하지 않은 상태를 캡처한 이미지 입니다. 수정되기 전의 상태를 그대로 보여주고 있습니다.
저장을 하면 수정이 완료되어서 웹 브라우저에선 자동 새로고침 되는 것을 확인할 수 있습니다.
Live Server 확장 기능을 이용해 작업하고 있는 웹문서를 실시간으로 확인할 수 있습니다.
이번 글은 Visual Studio Code의 확장 기능 Live Server에 대해 알아보았습니다. 내용이 도움이 되셨다면 좋아요 꾹! 광고 꾹! 부탁드립니다! 감사합니다.^^
'Tool' 카테고리의 다른 글
| 인텔리제이(IntelliJ) IDEA 설치하기 (0) | 2021.11.03 |
|---|---|
| 이클립스(Eclipse) 다크 테마(Dark Theme), 어두운 테마로 변경하기 (0) | 2021.05.08 |
| VB6.0 (Visual Basic 6.0) 에서 마우스 휠 기능 추가하기 | MouseWheelAddin (2) | 2021.03.11 |
| VB 실행 시 vs_setup.msi 파일을 찾을 수 없어서 제대로 실행되지 않을 때 (0) | 2021.03.11 |
| Visual Studio Code에서 mssql server, ms sql server 사용하기 (1) | 2021.01.08 |