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

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 설정에서 포트 번호를 바꾼 경우 바꾼 번호로 설정하시기 바랍니다.)

 

[포트포워딩 방법]

• KT 공유기(Giga Wifi Home) 포트포워딩

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

 

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

 

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

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

 

수성비의 2in1 노트북은 갤럭시 북 Flex2입니다.(Windows 11)

'프로그래밍 > VS Code' 카테고리의 다른 글

[Visual Studio Code]5. C언어 파일 분할 컴파일(GCC)  (2)	2022.05.13
[VS Code Live Server 확장]웹개발 하면서 실시간 확인  (2)	2021.12.30