Visual Studio Code에서 Live Server 확장 프로그램 사용하기

• 4/14/2023
• 2 minutes to read

이 강좌에서는 Visual Studio Code에서 웹 개발을 쉽게 할 수 있도록 도와주는 Live Server 확장 프로그램을 소개하고 사용 방법을 설명합니다.

Live Server 확장 프로그램 소개

Live Server는 Visual Studio Code에서 사용할 수 있는 강력한 확장 프로그램입니다. 이 확장 프로그램은 웹 페이지를 개발하면서 실시간으로 변경 사항을 브라우저에서 확인할 수 있게 해줍니다. 즉, 코드를 수정할 때마다 수동으로 새로고침을 할 필요가 없습니다.

Live Server 설치하기

1. Visual Studio Code를 실행합니다.
2. 왼쪽 사이드바의 확장 아이콘(네모 모양)을 클릭하여 확장 탭으로 이동합니다.
3. 검색 창에 "Live Server"를 입력하고, 결과에서 "Live Server" 확장 프로그램을 찾습니다. (개발자: Ritwick Dey)
4. "Install" 버튼을 클릭하여 Live Server 확장 프로그램을 설치합니다.

Live Server 사용하기

1. 웹 프로젝트 폴더를 Visual Studio Code로 엽니다.
2. index.html과 같은 HTML 파일을 선택합니다.
3. 우측 하단의 상태 바에서 "Go Live" 버튼을 클릭합니다. 또는, 파일 메뉴에서 "Open with Live Server"를 선택할 수도 있습니다.
4. 기본 웹 브라우저가 자동으로 열리고, 작성한 웹 페이지가 로드됩니다. 이제부터 웹 페이지에 대한 변경 사항을 저장하면 브라우저가 자동으로 새로고침됩니다.

이제 Live Server 확장 프로그램을 사용하여 웹 개발이 훨씬 편리해집니다. 코드를 수정하고 실시간으로 결과를 확인하면서 웹 페이지를 더 빠르고 효율적으로 개발할 수 있습니다.