VS Code, Live Server 내 모바일로 확인하기

 

크롬이나 Blisk로 모바일 환경에서 퍼블리싱 작업물이 어떻게 보여지는 확인 할 수 있으나 완벽하지는 않다. 

때문에 서버에 파일을 올린 뒤 확인을 하는데 매번 작업 후 서버에 올리는 과정이 귀찮다.

로컬에서 작업된 파일을 모바일 기기로 바로 확인 후 서버에는 최종적으로 한번만 올리면 좋지 않을까?

해서 검색을 해봤더니 vs code의 live server로 해당 기능을 사용할 수 있었다.

 live server를 꽤 오래 써왔는데 모바일 환경에서 확인할 수 있는걸 이제 알았다니🤣 

 

 

 

 

---

 

 

 

VS Code 세팅 전 필독!

! 중요한 건 노트북이든 데스크탑이든 WIFI로 연결 후 모바일 기기와 같은 WIFI를 써야 한다는 것이다.
(나는 이 환경을 위해 다이소에서 USB 무선 랜카드(5,000)를 구입했다.)

 

 

 

 

1. 랜선(이더넷)은 사용 안 함으로 하고 WIFI를 연결 한 상태이다.

   (처음부터 WIFI 환경이라면 이 부분은 신경 안써도 된다. 나는 랜선연결이었고 WIFI 연결을 위해 스위치한것이다.)

 

 

 

 

2. ctrl + shift + Esc  👉   작업 관리자  👉   성능  👉   WIFI 선택하면 IPv4 주소가 뜬다. 해당 주소를 복사한다.

 

 

 

 

3. vs code 에서 ctrl + B  👉  live server 검색 후 설치

 

 

 

 

4. vs code 에서 ctrl + ,   👉  host 검색 후 위에서 복사한 IPv4 주소를 넣는다.

 

 

 

5. html 파일을 켜고 오른쪽 버튼을 누르면 Open with Live Server 가 뜬다. 클릭하면 새창이 뜬다.

 

 

 

6. 주소를 모바일에서 확인한다.

 

 

 

 

 

---

 

 

WIFI 환경을 만드는게 조금(?) 귀찮지만 css 한줄을 위해 여러번 git에 push 하게 되면 history도 더러워지고 매번 올리는 과정에서 리소스 낭비가 심하다고 느껴졌는데, 로컬에서 작업 완료 후 모바일 확인을 위해 한번의 세팅은 좋은 것 같다.

(WIFI가 느리기 때문에 모바일 확인이 끝나면 WIFI연결을 해제한다)