VSCode에서 Live Server 확장 프로그램 설치 및 사용하기
Visual Studio Code(VSCode)는 웹 개발자들에게 인기 있는 코드 편집기입니다. VSCode는 확장 프로그램을 통해 기능을 확장할 수 있습니다. 이 중 하나인 “Live Server” 확장 프로그램을 사용하면 웹 개발 환경을 쉽게 구축할 수 있습니다. 이번 글에서는 Live Server 확장 프로그램을 설치하고 사용하는 방법에 대해서 알아보겠습니다.
1. Live Server 확장 프로그램 설치하기
1. VSCode를 실행한 후 왼쪽 사이드바의 “Extensions” 아이콘을 클릭합니다.
2. 상단의 검색 창에 “Live Server”를 입력하고 검색 결과에서 “Live Server“를 선택합니다.
3. “Install” 버튼을 클릭하여 확장 프로그램을 설치합니다.
![Live Server 확장 프로그램 설치하기](https://bluesharehub.com/wp-content/uploads/2023/04/img_1-15.png)
![Live Server 확장 프로그램 설치하기](https://bluesharehub.com/wp-content/uploads/2023/04/img_1-15.png)
2. Live Server 사용하기
1. 설치가 완료되면 작업 중인 프로젝트의 HTML 파일을 엽니다.
2. 파일을 열고 나면 오른쪽 하단에 “Go Live” 버튼이 표시됩니다. 이 버튼을 클릭하면 Live Server가 실행되고 자동으로 브라우저에서 페이지가 열립니다.
3. Live Server는 코드를 수정하고 저장할 때마다 브라우저를 자동으로 새로 고침해 줍니다. 이 기능을 통해 빠르게 웹 페이지의 변경 사항을 확인할 수 있습니다.
![Live Server 사용하기](https://bluesharehub.com/wp-content/uploads/2023/04/img_2-12.png)
![Live Server 사용하기](https://bluesharehub.com/wp-content/uploads/2023/04/img_2-12.png)
3. Live Server 설정 변경하기 (선택 사항)
필요한 경우 Live Server의 설정을 변경하여 포트 번호, 기본 브라우저, 자동 새로 고침 기능 등을 조절할 수 있습니다.
1. 좌측 하단에 있는 “톱니바퀴(관리)” 아이콘을 클릭 후 “설정” 메뉴를 선택합니다.
2. 상단의 검색 창에 “Live Server“를 입력하고 원하는 설정을 변경합니다. 변경 사항은 자동으로 저장됩니다.
![Live Server 설정 변경하기 (선택 사항)](https://bluesharehub.com/wp-content/uploads/2023/04/img_3-8.png)
![Live Server 설정 변경하기 (선택 사항)](https://bluesharehub.com/wp-content/uploads/2023/04/img_3-8.png)
☞ VSCode의 Live Server 확장 프로그램은 웹 개발 환경을 빠르게 구축할 수 있는 강력한 도구입니다.
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
관련 이전 게시글
VSCode에서 Markdown All in One 확장 프로그램 사용하는 방법
VSCode에서 ChatGPT 확장 프로그램 설치 및 사용하기