Skip to main content

Visual Studio Code (VSCode) 설치 및 HTML 파일 로컬 테스트 방법

오늘은 간단하게 Visual Studio Code (VSCode) 설치 및 HTML 파일 로컬 테스트 방법을 알아봅니다.

1. Visual Studio Code (VSCode)를 설치하는 방법​

Visual Studio Code (VSCode)를 설치하는 방법을 안내하겠습니다. VSCode는 Windows, macOS, Linux에 설치할 수 있습니다.

1.1. Visual Studio Code 다운로드 페이지 접속​

다음 링크로 이동하여 VSCode 다운로드 페이지에 접속합니다: https://code.visualstudio.com/Download

VSCode 다운로드 페이지

1.2. 운영체제에 맞는 설치 파일 다운로드​

다운로드 페이지에서 사용 중인 운영체제에 맞는 버전의 설치 파일을 선택하여 다운로드 받습니다.

  • Windows: Windows용 설치 프로그램 혹은 Windows용 ZIP 파일을 선택
  • macOS: macOS용 설치 패키지를 선택
  • Linux: .deb (Debian, Ubuntu) 혹은 .rpm (Fedora, Red Hat, openSUSE) 파일을 선택

1.3. 다운로드 받은 설치 파일 실행​

다운로드 받은 파일을 실행하여 설치를 진행합니다.

  • Windows: 설치 프로그램을 실행하거나 ZIP 파일을 압축 해제 후 실행
  • macOS: 설치 패키지를 실행하여 설치
  • Linux: .deb 혹은 .rpm 파일을 패키지 관리자를 이용하여 설치

1.4. 설치 완료 후 실행​

설치가 완료되면, 운영체제의 프로그램 목록에서 "Visual Studio Code"를 찾아 실행합니다. VSCode가 정상적으로 실행되면, 설치가 완료된 것입니다. 이제 Visual Studio Code를 사용하여 프로젝트를 개발할 수 있습니다. 필요한 확장 프로그램을 설치하여 원하는 개발 환경을 구축할 수 있습니다.

VSCode 설치 완료 후 실행

2. 로컬 환경에서 테스트하는 방법​

Visual Studio Code (VSCode)에서 로컬 환경에서 테스트하는 방법을 설명 드리도록 하겠습니다.

2.1. 필요한 확장 프로그램 설치​

먼저, VSCode에서 Live Server 확장 프로그램을 설치합니다. 이 확장 프로그램을 사용하면, 로컬에서 웹 서버를 실행하여 실시간으로 HTML, CSS, JavaScript의 변경 사항을 확인할 수 있습니다. VSCode에서 왼쪽 사이드바의 Extensions 아이콘을 클릭하고, 상단의 검색창에 "Live Server"를 입력한 후, 검색 결과에서 "Live Server"를 찾아서 Install 버튼을 클릭하여 설치합니다.

Live Server 확장 프로그램 설치

2.2. 프로젝트 폴더 열기​

VSCode에서 File 메뉴에서 Open Folder를 선택하고, 예산 계산기 웹 서비스 프로젝트가 있는 폴더를 선택하여 엽니다. 이 폴더에는 index.html, styles.css, app.js 파일이 포함되어 있어야 합니다.

2.3. Live Server 실행​

index.html 파일을 열고, 오른쪽 하단에 있는 "Go Live" 버튼을 클릭하여 Live Server를 실행합니다. 이렇게 하면 기본 웹 브라우저가 자동으로 열리고, 로컬 웹 서버의 주소 (예: http://127.0.0.1:5500/index.html)로 이동하여 프로젝트를 확인할 수 있습니다.

2.4. 실시간 변경 사항 확인​

이제 VSCode에서 HTML, CSS, JavaScript 파일을 수정하면, 웹 브라우저에서 자동으로 변경 사항이 반영되어 표시됩니다. 이를 통해 개발 과정에서 실시간으로 결과를 확인할 수 있습니다.

2.5. Live Server 종료​

테스트가 끝나면 VSCode의 오른쪽 하단에 있는 "Disconnect" 버튼을 클릭하여 Live Server를 종료할 수 있습니다.

7. 마치며​

개발 도구(IDE)인 Visual Studio Code (VSCode) 설치 및 HTML 파일 로컬 테스트 방법을 알아보았는데요. IDE를 처음 접하신 분에게는 많은 도움이 되었기를 바랍니다.