본문 바로가기

별걸다하는 IT/개발환경 세팅&TIPS

[VSCode 라이브서버] 웹페이지 실행 결과 바로 확인 가능한 Live Server 설치 및 사용법, 한글깨짐

반응형

안녕하세요

오늘은 홈페이지/ 웹페이지 개발에서

유용한 기능으로 많이 쓰이고 있는 익스텐션, 라이브 서버(Live Server)를 소개하려고 합니다.

 

Live Server란 무엇인가

HTML/CSS와 같은 시각적인 웹 페이지를 만들 때, 

내가 코드를 변경함에 따라 시시각각으로 페이지가 어떻게 변경되는지 확인하고 싶을 때가 있어요.

LIVE SERVER는 말그대로 새로고침하지 않아도 저장할때마다 실시간 라이브로 반영되어 변경사항을 바로 확인할 수 있습니다. 

 

라이브 서버가 없다면~~

간단한 HELLO WORLD만 띄우는거라도

톰캣같은 웹서버 하나 다운받아다가 연결하고

바뀔때마다 일일이 새로고침 눌러서 확인해줘야하고 번거로운 작업이 좀 있죠 ㅎㅎ

 

Live Server 설치 다운로드

그림1

비주얼스튜디오코드에 들어가서 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에서 라이브서버 사용방법에 대해 알아봤어요 ㅎㅎ

공감은 큰 힘이 됩니다 :)

반응형