[VS Code Live Server 확장]웹개발 하면서 실시간 확인

프로그래밍/VS Code|2021. 12. 30. 17:45
728x90

수성비전자방입니다. 오늘은 Visual Studio Code로 웹개발을 할 때 실시간으로 확인할 수 있는 방법을 알아보겠습니다. VS Code에는 Live Server라는 확장 프로그램이 있습니다. 이 확장 프로그램을 사용하면 코딩하고 있는 홈페이지를 확인할 수 있는 실시간 서버가 열립니다.

 

예제 내려받기

https://github.com/cuteboysw/test

저는 test2를 사용하긴 했는데 그건 곧 지울 것 같으니 그냥 test 파일을 제공해 드리겠습니다.

어차피 기능은 거의 비슷합니다.

예제 사용하실 분은 위 링크 참고하시기 바랍니다.

 

Visual Studio Code에 Live Server 확장 설치

Visual Studio Code의 확장 탭에서 Live Server를 검색하여 설치합니다.

 

설치가 완료되면 오른쪽 아래에 이런 창이 뜨는데 'Show Details'를 클릭하시면 https://github.com/ritwickdey/vscode-live-server 로 연결됩니다.

 

Live Server 확장 사용법

1. Visual Studio Code에서 개발중인 코드 경로를 실행(폴더 열기)합니다.(파일→폴더 열기 하라는 것입니다. 단축키는 Ctrl+K Ctrl O인 그것..)

2. 오른쪽 아래의 Go Live를 클릭합니다.

 

3. 포트 번호 5500에서 서버가 열렸다는 창이 뜨면서

 

웹브라우저가 자동 실행됩니다.

주소 창에 127.0.0.1:5500/index.html 이라고 되어 있는데 127.0.0.1은 localhost와 거의 동일한 의미입니다. PC의 실제 IP가 아니예요.

 

하이퍼링크, CSS 연결 모두 잘 됩니다.

 

VS Code에서 수정하고 저장하면 즉시 반영되어 웹브라우저로 확인하실 수 있습니다.

 

듀얼 모니터 쓰시는 분들은 한 모니터에는 웹브라우저를, 다른 모니터에는 VS Code 창을 띄워 두시면 편리할 것 같습니다.

 

[서버 닫는 법]

오른쪽 아래 Port:5500을 누르시면 서버가 닫힙니다. 아니면 VS Code 창을 닫으셔도 서버가 닫힙니다.

 

다른 PC/폰에서 접속하기

이 확장 프로그램은 Live Server입니다. Server란 말이죠. Go Live를 눌러 서버를 열면 다른 PC나 모바일 기기에서도 접속할 수 있다는 것입니다. 그 방법을 알아보겠습니다. 편의상 Live Server를 연 PC를 '서버PC'라고 칭하겠습니다.

 

작업 관리자(Ctrl+Shift+ESC)를 실행한 다음 성능 탭을 보시기 바랍니다.

좌측에서 이더넷을 클릭하시면 IP 주소를 확인할 수 있습니다.

편의상 이 IP 주소를 '서버PC의 IP 주소'라고 칭하겠습니다.

 

물결선은 제가 이미지 편집하면서 그린 것입니다.

저는 휴대 전화로 접속해 보았습니다. 주소 창에 서버PC의 IP주소:5500을 입력하여 접속하시면 수정 사항을 휴대 전화에서 실시간으로 확인하실 수 있습니다.

 

주의하실 것은

서버PC가 공유기를 통해 인터넷에 연결된 상태라면

(i)같은 네트워크에서 접속 시 사설IP주소:5500으로 접속하거나

(ii)다른 네트워크에서 접속 시 포트포워딩 후 공인IP주소:외부포트로 접속하셔야 합니다.

 

참고로 사설 IP 주소 범위는 아래와 같습니다.

A: 10.0.0.0~10.255.255.255

B: 172.16.0.0~172.31.255.255

C: 192.168.0.0~192.168.255.255

서버PC의 IP 주소가 이 범위에 해당한다면 그 서버PC가 공유기에 연결된 것입니다.

 

포트포워딩 하실 때에는 내부포트를 5500으로 설정하시기 바랍니다.

(VS Code Live Server 설정에서 포트 번호를 바꾼 경우 바꾼 번호로 설정하시기 바랍니다.)

 

[포트포워딩 방법]

위에 본인의 공유기가 없을 경우 인터넷에 공유기 이름을 검색해 보면 포트포워딩 하는 방법이 나오므로 검색해 보시기 바랍니다.

 

예를 들어 위와 같은 상황이라면, 휴대 전화 웹브라우저의 주소 창에 123.45.67.8:38080을 입력하여 Live Server에 접속하실 수 있습니다.

 

제 글을 읽어 주셔서 감사합니다.

새해 복 많이 받으세요. 다음에 만나요!

 

댓글()
  1. 댓글 프로필 사진딸긔우유 2022.01.01 13:02 신고 댓글주소  수정/삭제  댓글쓰기

    포럼보고 방문했습니다:)
    잘 읽고 갑니당><
    구독하고 가니 제 블로그에도 들려주세요!😄😄ㅍ

누리집 또는 블로그 주소