Visual Studio Code에 Extension으로 설치할 수 있는 Live Server에 대해서 소개하고자 한다.
팀 프로젝트를 진행하는 중, index.html에 script 모듈을 넣었을 때 CORS 오류가 생성되어 애를 먹는 중 Live Server Extension을 사용하여 해결하였다.
1. Live Server란?
정적 및 동적 페이지를 실시간으로 로컬 개발 서버에서 실행시켜주고 코드 저장이 일어날 때마다 자동으로 새로고침 해준다.
2. Live Server 사용 방법
Liver Server 설치가 끝났다면
내가 원하는 html 파일을 우클릭 후, "Open with Live Serer"를 클릭한다.
기다리면 다음과 같이 개발 서버로 웹 페이지가 열린다.
3. Live Server 특징
- HTML/CSS/JS 파일을 저장하면 브라우저가 자동으로 새로고침 된다.
- VS Code 하단 상태바에서 버튼 하나로 서버 시작/종료 가능.
- 탐색기(파일 트리)에서 HTML 파일 우클릭 → "Open with Live Server" 클릭하면 바로 브라우저에 열려.
- 변경 감지에서 제외할 파일을 설정할 수 있어. 예: node_modules 같은 폴더 무시 가능.
- 단축키로 Live Server 켜고 끌 수 있어. 빠르게 작업할 때 유용하다.
- 포트 번호, 서버 루트, 기본 브라우저를 사용자가 정의할 수 있다.
- 미리 명령줄을 사용하여 모든 브라우저(예: Firefox 야간)를 지원합니다.
- Chrome 디버깅 기능과 연동 가능. 브라우저에서 코드 디버깅할 수 있다.
- 같은 와이파이에 있는 스마트폰에서 PC에서 띄운 웹페이지를 볼 수 있다. 모바일 테스트할 때 유용하다.
- 서버 호스트 이름을 localhost나 127.0.0.1 중 원하는 걸로 설정 가능하다.
- 자동 새로고침 감지 태그를 설정할 수 있다. 기본은 <body>나 <head>지만 바꿀 수도 있다.
- .svg 파일도 라이브 서버로 열 수 있다. SVG 실시간 미리보기 가능하다.
- HTTPS 지원한다.
- 프록시 설정 지원. API 서버 같은 외부 리소스 우회 연결할 때 사용한다.
- CORS (Cross-Origin Resource Sharing)를 기본으로 허용해준다. 다른 출처 리소스 로딩이 쉽다.
- 여러 폴더(workspace)에 대해 Live Server를 설정해서 동시에 작업 가능하다.
- HTML뿐 아니라 동적으로 생성되는 페이지도 지원한다. 별도 브라우저 확장(Live Server Web Extension)을 통해 사용.
'웹 기초' 카테고리의 다른 글
| [JavaScript] 브라우저 Cookie 사용 방법 (0) | 2025.04.11 |
|---|---|
| [Vanila JavaScript] 파티클 만들기 (0) | 2025.04.09 |
| [FireBase] FireBase CORS 오류 및 해결 방법 (0) | 2025.04.08 |
| [내일 배움 캠프, 웹 기초] html, <script> 태그의 위치 (0) | 2025.03.31 |
| [내일 배움 캠프, 웹 기초] URL이란? (0) | 2025.03.31 |
