Visual Studio Code에서 Live Server 확장 프로그램 사용하기
이 강좌에서는 Visual Studio Code에서 웹 개발을 쉽게 할 수 있도록 도와주는 Live Server 확장 프로그램을 소개하고 사용 방법을 설명합니다.
Live Server 확장 프로그램 소개
Live Server는 Visual Studio Code에서 사용할 수 있는 강력한 확장 프로그램입니다. 이 확장 프로그램은 웹 페이지를 개발하면서 실시간으로 변경 사항을 브라우저에서 확인할 수 있게 해줍니다. 즉, 코드를 수정할 때마다 수동으로 새로고침을 할 필요가 없습니다.
Live Server 설치하기
- Visual Studio Code를 실행합니다.
- 왼쪽 사이드바의 확장 아이콘(네모 모양)을 클릭하여 확장 탭으로 이동합니다.
- 검색 창에 "Live Server"를 입력하고, 결과에서 "Live Server" 확장 프로그램을 찾습니다. (개발자: Ritwick Dey)
- "Install" 버튼을 클릭하여 Live Server 확장 프로그램을 설치합니다.
Live Server 사용하기
- 웹 프로젝트 폴더를 Visual Studio Code로 엽니다.
index.html과 같은 HTML 파일을 선택합니다.- 우측 하단의 상태 바에서 "Go Live" 버튼을 클릭합니다. 또는, 파일 메뉴에서 "Open with Live Server"를 선택할 수도 있습니다.
- 기본 웹 브라우저가 자동으로 열리고, 작성한 웹 페이지가 로드됩니다. 이제부터 웹 페이지에 대한 변경 사항을 저장하면 브라우저가 자동으로 새로고침됩니다.
이제 Live Server 확장 프로그램을 사용하여 웹 개발이 훨씬 편리해집니다. 코드를 수정하고 실시간으로 결과를 확인하면서 웹 페이지를 더 빠르고 효율적으로 개발할 수 있습니다.
