VS(Visual Studio) Code 확장인 Live Server를 통해 개발자는 작업을 실시간으로 미리 볼 수 있습니다. 이 확장 프로그램은 변경 사항을 적용할 때마다 브라우저를 수동으로 새로 고쳐야 하는 번거로움을 없애줍니다. 이는 대규모 프로젝트에서 합산될 수 있습니다. HTML, CSS 및 JavaScript로 작업하는 웹 개발자에게 특히 편리합니다.
이 자습서에서는 다양한 파일 형식으로 도구를 설정, 사용자 지정 및 사용하는 방법과 개발자가 도구를 사용하는 동안 발생할 수 있는 몇 가지 일반적인 문제를 해결하는 방법을 설명합니다.
VS Code에서 라이브 서버로 프로젝트 열기
라이브 서버가 없으면 코드를 변경하거나 콘텐츠를 추가할 때마다 업데이트를 표시하려면 브라우저를 수동으로 새로 고쳐야 합니다. 하루에 100번 변경하는 경우 각 변경 사항을 보려면 브라우저를 100번 이상 새로 고쳐야 할 수 있습니다. Visual Studio Code에서 Live Server를 사용하여 프로젝트를 여는 방법은 다음과 같습니다.
- Marketplace에서 Live Server 확장을 설치합니다. VS Code 활동 표시줄에서 찾을 수 있습니다.
- 원하는 대로 "파일" 및 "파일 열기"를 클릭하거나 키보드 단축키를 사용하여 프로젝트를 엽니다.
- 프로젝트에서 HTML 파일을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 "라이브 서버로 열기"를 선택합니다.
새 브라우저 창에 라이브 사이트가 표시됩니다. 프로젝트 파일에 커밋한 모든 변경 사항은 브라우저에서 자동으로 업데이트됩니다.
VS Code에서 라이브 서버 설정 사용자 지정
Live Server extension을 최대한 활용하려면 해당 설정에서 사용할 수 있는 다양한 사용자 지정 옵션을 사용해 보십시오. 다른 기능 중에서 포트 번호, HTTPS 및 프록시 구성을 수정할 수 있습니다. 이러한 사용자 지정 옵션을 구현하는 과정을 단계별로 살펴보겠습니다.
기본 포트 번호 변경
기본 5500이 아닌 다른 포트 번호를 사용할 수 있습니다. 이는 달성하기 쉽습니다.
- "liveServer.settings.port" 줄을 찾습니다(기본 포트 값은 5500).
- 임의의 포트 번호를 0으로 설정하거나 사용하려는 번호를 선택하십시오.
HTTPS 연결 활성화
보안 강화를 위해 다음과 같이 HTTPS 연결을 활성화합니다.
- "liveServer.settings.https" HTTPS 프로토콜 라인을 찾습니다.
- "활성화" 값을 "true"로 변경합니다.
- 필요에 따라 인증서, 키 및 암호 파일 경로를 입력합니다.
프록시 설정 구성
특정 시나리오에서는 프록시 설정 구성이 필요할 수 있습니다. 프록시를 설정하는 방법은 다음과 같습니다.
- "liveServer.settings.proxy"로 프록시를 활성화합니다.
- 아직 활성화되지 않은 경우 "활성화"를 "참"으로 변경합니다.
- 원하는 프록시 위치에 "baseUri"를 설정합니다.
- 실제 URL에 "proxyUri"를 제공합니다.
VS Code에서 라이브 서버와 Edge DevTools 통합
Visual Studio Code의 Edge DevTools 및 Live Server 통합은 웹 개발을 훨씬 더 효율적으로 만들어 개선할 수 있습니다. 이 도구 콤보는 실시간 변경 사항을 동시에 표시하고 개발자 도구에 직접 액세스할 수 있습니다.
- VS Code Marketplace에서 Visual Studio Code용 Live Server 확장을 설치합니다.
- "VS Code용 Microsoft Edge 도구"를 검색하여 동일한 소스에서 VS Code용 Edge DevTools 확장을 설치합니다.
- 통합 브라우저 개발자 도구를 사용하여 변경 사항을 소스와 자동으로 동기화합니다.
두 확장이 모두 설치되어 있으면 VS Code 내부의 포함된 브라우저 창에서 변경 사항의 실시간 미리보기를 볼 수 있습니다.
다른 파일 형식과 함께 라이브 서버 사용
Live Server 확장은 많은 파일 유형에 충분히 다재다능합니다. 기본적으로 HTML 파일과 함께 작동하며 CSS 및 JavaScript 파일을 지원합니다. 이러한 파일 형식으로 스타일시트나 스크립트를 변경하면 확장 프로그램이 브라우저를 즉시 새로 고쳐 변경 사항을 반영합니다. 개발자, 특히 프런트 엔드 웹 디자이너는 Live Server의 즉시 업데이트 기능을 활용할 수 있습니다. CSS를 조정하는 경우 변경 사항의 효과를 실시간으로 확인할 수 있습니다. 색상, 글꼴 또는 레이아웃이 올바른지 확인하기 위해 기다릴 필요가 없습니다. 또한 HTML 및 JavaScript 코더의 경우 서로 다른 파일 사이의 버그와 실수를 쉽게 발견할 수 있습니다.
라이브 서버는 주로 PHP 파일로 작업하는 사람들에게 여전히 편리합니다. 그러나 PHP에서 해당 기능을 사용하려면 PHP를 지원하는 로컬 서버를 구성해야 합니다.
Live Server는 Jekyll 및 Hugo와 같은 정적 사이트 생성기와 호환됩니다. 이를 통해 정적 사이트의 출력을 보고 빠르게 수정할 수 있습니다. Live Server를 정적 사이트 생성기와 통합하면 변경할 때마다 수동으로 사이트를 구축하고 배포하지 않고도 효율적인 개발이 가능합니다.
일반적인 라이브 서버 문제 해결
Live Server 확장은 일반적으로 안정적이지만 일부 문제는 여전히 발생할 수 있습니다. 예를 들어 라이브 서버가 시작되지 않거나 라이브 다시 로드가 작동하지 않거나 CORS 문제가 발생할 수 있습니다.
라이브 서버 시작 실패
확장 프로그램이 잘못 설치된 경우 발생할 수 있습니다. 그렇다면 다음을 수행할 수 있습니다.
- 확장 프로그램이 올바르게 설치되고 활성화되었는지 확인하십시오. 활성화하는 것을 잊었거나 실수로 비활성화한 경우 활성화하여 문제를 해결하십시오.
- 설치 문제가 의심되는 경우 확장 프로그램을 다시 설치해 보십시오.
- 설정을 확인하고 작업 공간 폴더가 액세스 가능하고 구성되어 있으며 다른 인스턴스에서 열리지 않는지 확인하십시오.
실시간 새로고침이 작동하지 않음
실시간 새로고침이 정상적으로 작동하지 않는 경우 다음을 시도해 보세요.
- 파일 형식과 파일 형식 지원을 다시 확인하십시오.
- 확장 프로그램이 변경 사항을 올바르게 추적하고 수정을 받아야 하는 파일을 무시하지 않는지 확인합니다. "liveServer.settings.ignoreFiles"와 같은 설정을 확인하십시오.
원본 간 리소스 공유 문제
다른 출처의 리소스를 처리할 때 CORS 문제가 발생할 수 있습니다. 이러한 문제를 해결하려면:
- 서버에서 원본 간 요청을 허용합니다.
- 로컬 개발 서버를 사용하십시오.
라이브 서버에서 브라우저 탭을 열 수 없음
Live Server가 기본 브라우저에서 브라우저 탭을 열지 못하는 경우 설정을 조정해 보십시오.
- 기본 웹 브라우저를 확인하십시오.
- VS Code에서 서버의 브라우저 설정을 조정합니다. 라이브 공유를 활성화하면 명령 팔레트를 통해 협업 세션을 시작해야 합니다.
고급 라이브 서버 기능
Live Server는 잘 알려지지 않았지만 오히려 편리한 몇 가지 추가 기능을 제공합니다. 언급할 가치가 있는 "숨겨진" 기능 중 하나는 코드를 자동으로 컴파일하고 미리 보기를 새로 고치는 Sass, Less 또는 TypeScript와 같은 전처리기와의 호환성입니다. Live Server는 프레임워크 및 빌드 시스템과 같은 타사 도구 및 라이브러리와 통합할 수도 있습니다.
라이브 서버 설정 및 문서를 탐색하여 스택을 지원할 수 있는 관련 통합을 식별하십시오.
라이브 서버 성능 최적화
Live Server의 성능을 개선하기 위한 몇 가지 조정이 있습니다.
과도한 재로드 방지
서버가 최상의 성능을 발휘하도록 하는 한 가지 방법은 과도한 다시 로드를 방지하도록 설정을 구성하는 것입니다. 예를 들어 "liveServer.settings.ignoreFiles" 옵션을 조정하여 실시간 다시 로드를 트리거하지 않아야 하는 파일 또는 폴더를 정의할 수 있습니다. 다시 로드할 수 있는 데이터 양을 제한하면 새로 고침 빈도가 줄어들고 시스템 리소스가 절약됩니다.
새로고침 지연 늘리기
브라우저 새로 고침 지연을 미세 조정하여 서버에서 더 많은 성능을 끌어내십시오. 이를 위해 "liveServer.settings.wait" 서버 설정을 조정합니다. 여러 개의 연속 파일을 저장할 때 때때로 발생하는 빠른 재로드는 시스템 리소스에 부담을 줄 수 있습니다. "liveServer.settings.wait"를 통해 지연을 늘리면 이 잠재적인 문제를 방지하는 데 도움이 됩니다.
사용하지 않는 인스턴스 닫기
마지막으로 여러 프로젝트에서 작업할 때 보다 간단한 성능 요령을 위해 사용하지 않는 Live Server 인스턴스를 닫는 것을 고려하십시오. 한 번에 여러 인스턴스를 열어 두면 하드웨어에 따라 상당한 시스템 리소스를 사용할 수 있습니다.
라이브 서버 팁
라이브 서버를 최대한 활용하려면 몇 가지 실용적인 팁을 시도해 보십시오.
개발 환경과 프로덕션 환경을 분리 유지
다른 개발자가 공유할 수 있는 한 가지 팁은 개발 환경을 프로덕션 환경과 분리하는 것입니다. 이러한 분리를 통해 미완성 코드나 테스트되지 않은 코드를 실수로 배포하는 것을 방지할 수 있으므로 코드를 더 깔끔하게 유지하고 소중한 시간을 절약할 수 있습니다.
여러 프로젝트에 별도의 작업 공간 사용
여러 프로젝트에서 동시에 작업하는 경우 VS Code에서 별도의 작업 영역을 사용하여 프로젝트를 체계적으로 유지하세요. 이 접근 방식을 사용하면 프로젝트 간에 쉽게 전환하고 각각의 Live Server 인스턴스를 관리할 수 있습니다.
Live Share 및 Live Server로 더 나은 협업
Live Share 및 Live Server 확장은 또한 다른 개발자와의 협업을 향상시킵니다. 이 설정을 사용하면 작업 공간과 실시간 미리 보기를 다른 사람과 공유할 수 있습니다. 프로젝트에서 함께 작업하고 문제를 실시간으로 해결하는 팀을 위한 최적의 접근 방식입니다.
추가 FAQ
Visual Studio Code의 라이브 서버란 무엇입니까?
Live Server는 HTML, CSS 및 JavaScript 파일을 실시간으로 미리 보는 인기 있는 VS Code 확장 프로그램입니다.
라이브 서버를 어떻게 중지합니까?
서버를 중지하려면 명령 팔레트를 열고 "Live Server: Stop Live Server"를 입력합니다.
라이브 서버가 실행되지 않는 이유는 무엇입니까?
이 문제에 대한 몇 가지 가능한 원인에는 부적절한 확장 설치, 잘못된 프로젝트 설정 또는 서버를 차단하는 방화벽이나 프록시가 포함됩니다.
VS Code에서 Microsoft Edge DevTools와 함께 Live Server를 사용할 수 있습니까?
Microsoft Edge와 함께 Live Server를 사용할 수 있습니다. 이렇게 하려면 Visual Studio Code용 Live Server 및 Edge DevTools 확장을 설치합니다.
라이브(서버) 대화에 참여
Visual Studio Code의 Live Server 확장은 최신 개발자에게 필수 도구로, 워크플로를 최적화하고 최고 수준의 프로젝트를 출시하는 데 도움이 됩니다. 불필요한 브라우저 새로 고침을 제거하고 작업 공간 및 미리 보기를 공유하여 실시간 협업을 가능하게 합니다.
이 확장 프로그램에 대해 어떻게 생각하십니까? 어떤 팁과 요령이 특히 도움이 되었습니까? 의견을 통해 알려주십시오. 동료 코더에게 큰 도움이 될 수 있습니다.
