Alex Ruben
Visual Studio Code에서 HTML 파일을 원활하게 미리 보는 방법
VS Code에서 HTML 작업을 할 때, 새로 고침 버튼을 계속 누르지 않고도 웹페이지의 변경 사항을 즉시 확인할 수 있다는 것은 정말 큰 장점입니다.Live Server 확장 프로그램을 사용하여 실시간 미리보기를 설정하는 방법을 알려드리겠습니다.특히 실시간으로 수정 작업을 할 때 매우 유용합니다.참고로, 처음에는 제대로 작동하지 않을 수 있지만, 재부팅하거나 몇 가지 설정을 변경하면 도움이 됩니다.
1단계: HTML 파일 열기
VS Code를 실행하고, 해당 파일 index.html이나 건드리고 싶은 HTML 파일을 열어주세요.일반 HTML일 수도 있고, CSS나 JS가 링크되어 있을 수도 있습니다.중요한 건 편집기에서 바로 사용할 수 있다는 것입니다.앞으로 어떤 작업을 하느냐에 따라 모든 것이 결정되기 때문입니다.
2단계: Live Server 확장 프로그램 설치
마법이 시작되는 순간입니다.실시간 미리보기를 실행하려면 확장 프로그램을 설치하세요.
- 왼쪽 사이드바에서 확장 프로그램 아이콘을 클릭 하거나 Ctrl+ Shift+를 눌러 X마켓플레이스를 엽니다.
- 검색창에 Live Server를 입력합니다.
- Ritwick Dey가 만든 Live Server 라는 앱을 찾아보세요.설치 수도 많고 아이콘도 눈에 띄는 인기 앱일 거예요.
- 설치를 클릭하세요.이제 확장 프로그램이 추가되었습니다.일부 설정에서는 처음에 설치가 실패할 수 있으며, 이 경우 VS Code를 다시 시작하거나 확장 프로그램을 다시 비활성화/활성화해야 할 수 있습니다.큰 문제는 없습니다.그냥 설치하세요.
3단계: 라이브 서버 시작
설치가 완료되면 미리보기를 시작하는 것은 간단합니다.
- VS Code에서 HTML 파일이 활성화되어 있는지 확인하세요.
- + + 를 눌러 명령 팔레트를 엽니다.CtrlShiftP
- ‘Live Server: Open with Live Server’를 입력 하고 선택하세요.바로 표시되지 않으면 파일을 최근에 저장했는지 확인하거나 VS Code를 다시 시작하세요.
- 이렇게 하면 기본 브라우저에서 웹페이지가 열리고 로컬 주소(보통 와 같은 형식)에서 제공됩니다
http://127.0.0.1:5500/index.html.오른쪽 하단에 작은 라이브 서버 아이콘이 표시되어 실행 중임을 확인할 수 있습니다.
4단계: 변경 사항 편집 및 실시간 시청
이제 재밌는 부분입니다. HTML(또는 연결된 CSS/JS)을 수정할 때 Ctrl+ 버튼을 눌러 S저장하세요.브라우저가 자동으로 새로 고쳐지면서 최신 수정 사항이 표시됩니다.프로젝트가 크거나 오류가 많으면 약간 불안정할 수 있지만, 대개는 잘 작동합니다.새로 고쳐지지 않으면 수동으로 새로 고침을 누르거나 명령 팔레트에서 라이브 서버를 다시 시작해 보세요.물론 Windows에서는 이 작업을 필요 이상으로 어렵게 만들기도 합니다.
추가 팁 및 일반적인 문제
원활한 진행을 위해:
- 방화벽 설정을 확인하세요.이상한 네트워크 차단으로 인해 서버 통신이 차단된 경우 페이지가 업데이트되지 않습니다.
- 페이지가 업데이트되지 않으면 서버를 중지했다가 다시 시작하세요. F5가 도움이 될 때도 있고, 사용 가능한 경우 ‘게시’ 버튼을 마우스 오른쪽 버튼으로 클릭할 수도 있습니다.
- 코드에 깨진 태그나 구문 오류가 있는지 확인하세요.오류가 있으면 렌더링이 제대로 작동하지 않고 Live Server가 작동하지 않는 것처럼 보일 수 있습니다.
- 복잡한 프로젝트를 진행하는 경우 설정을 내보내거나 settings.json 파일에서 포트를 조정하는 것을 고려해 보세요.파일 > 환경 설정 > 설정 에서 liveServer.settings.port 를 검색하여 찾을 수 있습니다.
요약
- Live Server 확장 프로그램 설치
- 명령 팔레트를 통해 시작 – 라이브 서버: 라이브 서버로 열기
- 편집하고 저장하고, 라이브 업데이트가 자동으로 진행되는 것을 지켜보세요.
누군가에게는 몇 시간이라도 단축될 수 있기를 바랍니다. Ctrl+R을 계속 누르지 않고도 작업 과정을 실시간으로 확인할 수 있는 것만큼 좋은 게 없죠.가끔은 좀 불안정할 수도 있지만, 간단히 재시작하면 대부분의 문제는 해결됩니다.행운을 빌고 즐거운 코딩 되세요!