안녕하세요
오늘은 홈페이지/ 웹페이지 개발에서
유용한 기능으로 많이 쓰이고 있는 익스텐션, 라이브 서버(Live Server)를 소개하려고 합니다.
Live Server란 무엇인가
HTML/CSS와 같은 시각적인 웹 페이지를 만들 때,
내가 코드를 변경함에 따라 시시각각으로 페이지가 어떻게 변경되는지 확인하고 싶을 때가 있어요.
LIVE SERVER는 말그대로 새로고침하지 않아도 저장할때마다 실시간 라이브로 반영되어 변경사항을 바로 확인할 수 있습니다.
라이브 서버가 없다면~~
간단한 HELLO WORLD만 띄우는거라도
톰캣같은 웹서버 하나 다운받아다가 연결하고
바뀔때마다 일일이 새로고침 눌러서 확인해줘야하고 번거로운 작업이 좀 있죠 ㅎㅎ
Live Server 설치 다운로드
비주얼스튜디오코드에 들어가서 ctrl+shift+x 단축키를 누르면 익스텐션 모드로 넘어가실 수 있습니다.
아니면 '그림1'의 왼쪽에 빨간 바탕의 아이콘을 눌러서 직접 이동해줘도 돼요.
Live Server 검색 후 install 버튼 클릭!
라이브 서버 설치하면 VSC 재로딩을 해줘야 적용됩니다.
설치했으면 Ctrl+shift+e 를 누르면 익스플로러모드로 이동되는데요 (마찬가지로 빨간색 바탕의 아이콘 클릭해서 이동해도 됌~)
html 파일을 만들어줄 폴더 위치를 지정해줍시다.
Open Folder 버튼 눌러서 열어줘도 되고, Ctrl+o 단축키를 눌러서 폴더 위치를 열어줘도 돼요
우클릭 -> 새 파일 생성으로 main.html 만들어줍시다.
간단하게 Live Server가 작동되는지만 확인할거예요.
html:5 치고 엔터 누르면 html 작성하는데 필요한 기본 태그들이 자동으로 삽입됩니다.
body 태그 사이에 '양햄찌 블로그!'를 넣었어요. 확인하고 싶은 문구 아무거나 작성해줍시다.
우클릭하면 'Open with Live Server'버튼이 있는데 이를 클릭해주거나
단축키 'Alt+L+O'를 눌러서 라이브서버를 실행시켜줍시다. (Liveserver Open의 약자 겠죠?)
짠~~그러면 내가 작성한 코드가 웹페이지에서 어떻게 뜨는지 바로 확인할 수 있어요.
특히 듀얼모니터라면, 하나는 코드 작성하면서 다른 화면 하나로 바로바로 확인할 수 있으니 작업하기 편하겠죠?
라이브 서버를 끄려면
마찬가지로 우클릭해서 'Stop Live Server'를 눌러주거나 단축키 'Alt+L+C'(Liveserver Close 약자일 듯)를 누르는 방법이 있고 (1번 방법)
또는 오른쪽 하단에2번 네모박스 부분을 클릭해주면 Liver Server를 종료시킬 수 있습니다.
중지하고 나면 하단에 Port 어쩌구 되어있던게 'Go Live'버튼으로 변경된 것을 확인할 수 있는데요,
얘를 다시 눌러주면 라이브서버가 실행돼요~
라이브 서버 한글 깨짐
참고로 html의 캐릭터셋(charset)과 파일의 인코딩 방법이 동일한지 체크해줍시다.
다르면 한글이 깨져서 보일 수 있어요.
만약에 다르다면, 저기 화살표 부분을 눌러서 맞춰주거나, charset 부분을 동일하게 변경해주시면 됩니다.
오늘은 간단하게 VSC에서 라이브서버 사용방법에 대해 알아봤어요 ㅎㅎ
공감은 큰 힘이 됩니다 :)
'별걸다하는 IT > 개발환경 세팅&TIPS' 카테고리의 다른 글
| [VSCode 비주얼스튜디오코드] 네트워크 없는 오프라인에서 확장 플러그인 설치하는 법 (2) | 2021.10.22 |
|---|---|
| [vscode 웹환경세팅] 비주얼스튜디오코드에서 spring boot 스프링부트 설정 및 실행하기 (1) | 2021.10.21 |
| [VSCode 라이브서버] 웹페이지 실행 결과 바로 확인 가능한 Live Server 설치 및 사용법, 한글깨짐 (0) | 2021.10.20 |
| 윈도우에 깃(GIT) 다운로드 및 설치하기 git setup (3) | 2021.06.15 |
| [VSCode] 비주얼스튜디오코드 터미널 파워셀에서 CMD나 ubuntu로 변경하는 법, 디폴트 터미널 변경하기 (0) | 2021.06.14 |
| [유닛테스트 gtest] 비주얼스튜디오2019 빈프로젝트 구글테스트 사용법 (0) | 2021.05.24 |
최신 댓글