웹 개발 기본 프로그램 설치 방법

Visual Studio Code는 마이크로소프트에서 개발한 무료 오픈 소스 소프트웨어 개발 도구입니다. 이 프로그램은 다양한 언어와 프레임워크를 지원하며, 코드 편집기, 디버거, 버전 관리 시스템과의 통합 등 다양한 개발 기능을 제공하기 때문에 전 세계 개발자들에게 널리 사용되는 개발 도구입니다. 따라서, 기본 웹 개발을 시작하기에 앞서서 필수적으로 설치해야 하는 프로그램은 Visual Studio Code(a.k.a VS Code)입니다. 사용자 컴퓨터 운영체제(OS) 알맞은 버전을 공식 웹 사이트(https://code.visualstudio.com/)에서 다운로드 및 설치할 수 있습니다.

Visual Studio Code 첫 실행 화면 영문 버전 확인할 수 있다.

[Visual Studio Code Korean Language Pack for Visual Studio Code 확장 설치]

Visual Studio Code 설치 후, 처음 실행하게 되면 영문버전으로 설치된 것을 확인할 수 있습니다. 무료 한국어 확장 프로그램을 설치할 수 있기 때문에 왼쪽 메뉴 바에서 Extensions 누르면 Korean Language Pack for Visual Studio Code 검색 및 설치할 수 있습니다.

Korean Language Pack for Visual Studio Code 설치 후 한국어 버전으로 변경된 모습

[Live Server 설치]

코드 편집기에서 코딩을 한 후 결과를 확인하기 위해서 Open with Live Server를 실행하게 되면 크롬 브라우저에 결과물이 나타납니다. VS Code 편집기에서 마우스 오른쪽 버튼 누르면 메뉴에 [Open with Live Server] 실행합니다. VS Code(코드 편집기)와 크롬 웹 브라우저(웹 브라우저는 사용자 환경에 따라 다를 수 있음) 연동되어 정상적으로 코딩 결과물이 나타납니다.

Open with Live Server 실행 화면

[페이지가 작동하지 않습니다 - Open with Live Server 오류 발생 하는 경우]

[파일] - [기본 설정] - [설정] - [확장] - [Live Server Config] - [Settings Custom Browser] - [크롬(Chrome) 설정]

Settings Use Local IP ✅ 한 후, 다시 Open with Live Server 실행하면 정상적으로 나타납니다.

Open with Live Server 오류

웹 브라우저 및 로컬 IP 설정 모습