VSCode에는 훌륭한 확장 기능이 많이 있으며 Live Server는 최고 중 하나입니다.
단 몇 번의 클릭만으로 Live Server를 사용하면 실제 브라우저에서 페이지를 실시간으로 볼 수 있습니다. 더 좋은 점은 실시간 새로고침 기능이 있어서 코드를 업데이트하면 변경 사항이 브라우저에도 반영된다는 것입니다.
보려는 HTML 파일을 마우스 오른쪽 버튼으로 클릭하고 "라이브 서버로 열기"를 선택하기만 하면 됩니다.
라이브 서버 작동
하지만 Live Server가 브라우저를 열지 않고 예상한 대로 페이지를 표시하지 않으면 어떻게 될까요? 이런 일이 발생하는 경우 시도해 볼 수 있는 몇 가지 방법은 다음과 같습니다.
VSCode 다시 시작
때로는 VSCode를 처음부터 시작하는 것이 최선일 때도 있습니다.
먼저, 모든 작업을 저장하세요. 그런 다음 VSCode를 닫으면 설치한 모든 확장 프로그램도 중지됩니다.
그런 다음 VSCode를 다시 열고 다시 시도하세요. 보려는 HTML 파일로 이동하여 마우스 오른쪽 버튼을 클릭하고 "라이브 서버로 열기"를 선택하세요.
라이브 서버용 브라우저 설정
확장 프로그램이 작동하지만 시스템에 기본 브라우저가 없을 수도 있습니다.
시스템의 기본 브라우저를 설정했더라도 어떤 브라우저를 명시적으로 사용하고 싶은지 Live Server에 알려도 문제가 되지 않습니다.
먼저 F1을 눌러 Command Pallete를 연 다음 Preferences: Open Settings (JSON)를 입력하세요. 해당 옵션을 선택하세요.
VSCode settings.json이 열립니다. 파일입니다.
파일 맨 아래까지 스크롤하고 마지막 설정 뒤에 쉼표를 추가한 다음 "liveServer.settings.CustomBrowser": "chrome"에 붙여넣습니다. :
"firefox"를 사용할 수도 있습니다. , "safari" , 또는 다른 브라우저를 "liveServer.settings.CustomBrowser" 값으로 사용 설정합니다.
마지막으로 settings.json를 저장합니다. 파일을 삭제하고 Live Server를 다시 실행해 보세요.
운영 체제에 대한 기본 브라우저 설정
Live Server에 어떤 브라우저를 사용하고 싶은지 알려준 후에도 해당 브라우저에서 페이지가 제대로 열리지 않을 수 있습니다.
다음으로 시도해 볼 일은 운영 체제 자체에 대한 기본 브라우저를 설정하는 것입니다.
이를 수행하는 정확한 방법은 운영 체제에 따라 다를 수 있으므로 확실하지 않은 경우 수행 방법을 검색하는 것이 가장 좋습니다.
Windows의 설정 페이지는 다음과 같습니다:
출처:Advitya-sharma
라이브 페이지로 직접 이동
어떤 이유로 Live Server가 여전히 브라우저에서 페이지를 자동으로 열지 못하더라도 걱정하지 마세요. 언제든지 원하는 브라우저를 열고 페이지를 직접 볼 수 있습니다.
원하는 브라우저를 열고 http://127.0.0.1:5500/<your_file_name>으로 이동하세요. .
예를 들어 파일 이름이 index.html인 경우 , http://127.0.0.1:5500/index.html으로 가세요 .
Live Server가 실행되는 동안 페이지가 표시됩니다.
마감
Live Server가 예상대로 작동하지 않는 경우 시도해 볼 수 있는 몇 가지 일반적인 수정 방법은 다음과 같습니다.
안전하고 행복한 (라이브) 코딩을 즐겨보세요.
무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요