반응형

 

 

VS Code

Visual Studio Code - Live Server

 

VS Code - 확장 플러그인 편 포스팅을 하면서 Live Server 확장 플러그인을 처음 접한다면,

웹퍼블리싱 코드 내용을 실시간으로 확인할 수 있는 신세계를 경험하는 것과 같다고 글을 작성했습니다.

지금도 그 생각은 변함이 없습니다.

 

그렇다면 PC local 에서 웹퍼블리싱한 코드를 FTP 업로드 또는 크롬 개발자 도구를 사용하지 않고,

모바일(핸드폰) 또는 태블릿에서 바로 실시간으로 확인할 수 있는 방법은 없을까요?

이번 포스팅 주제인 Live Server 확장 플러그인을 사용하면 가능합니다.

Live Server를 사용하여 반응형 또는 모바일 웹퍼블리싱을 할 때 PC, 태블릿, 모바일의 작업 현황을 실시간으로

동시 한 번에 확인할 수 있는 신세계를 경험해 보시길 추천드립니다.

 

 

 

 

 

사용 방법

 

VS Code에서 Live Server를 설치하신 이후부터의 사용 방법에 대한 진행순서를 설명할 것입니다.

Live Server 확장 플러그인 설치방법은 VS Code - 확장 플러그인 편 포스팅을 참조 부탁드립니다.

 

 

Ⅰ.  정 버튼 클릭

아래 그림과 같이 톱니바퀴의 설정 버튼을 클릭 후 하위 메뉴인 확장 설정 메뉴를 클릭합니다.

 

 

 

Live Server    Settings: Host: Host

기본 설정은 127.0.0.1 이며, 본인이 코딩하고 있는 PC의 IP(아이피) 주소로 변경해 주면 모바일에서 확인 가능합니다.

 

 

 

.  WIFI(와이파이) IP 주소로 변경하기

  • 윈도우 설정 : 네트워크 및 인터넷  → 속성  → IPv4 주소 확인 후 입력(Live Server - Settings: Host 기본 설정 IP 삭제 후 입력)
  • 윈도우 검색 : 네트워크 상태  → 속성  → IPv4 주소 확인 후 입력(Live Server - Settings: Host 기본 설정 IP 삭제 후 입력)

 

 

 

모바일(핸드폰 또는 태블릿) 브라우저 접속

모바일 브라우저 주소창에 'IP주소:5500/실행하고자 하는 파일명' 을 입력하면 웹퍼블리싱 중인 파일 상태를 실시간으로 확인할 수 있습니다. 

  • index 파일만 있을 경우 : 192.000.00.000:5500/index.html
  • content 폴더 안에 list.html 파일이 있을 경우 : 192.000.00.000:5500/content/list.html

 

 

 

 

 

마치며...

 

VS Code - Live Server 확장 플러그인을 알기 이전에는 모바일 또는 반응형 웹퍼블리싱을 할 때에 크롬 개발자 도구에서

모바일 코딩 상태를 확인하거나 FTP에 업로드하여 번거롭게 확인하는 과정의 절차를 여러분들도 겪었을 것이라고 생각합니다.

그러나 이번 포스팅을 통해 많은 퍼블리셔 또는 개발자분들이 모바일과 반응형웹 코딩을 하면서,

실시간으로 코딩 상태를 확인할 수 있기에, 이전의 번거로운 확인 절차는 사라지고 작업시간을 효율적으로 단축시킬 수 있으리라 생각됩니다.

이전부터 알고 있던 내용이긴 하지만, 잘 모르셨던 분들에게 도움이 되었으면 하는 마음으로 작성하였습니다.

감사합니다.

 

 

반응형

+ Recent posts