스마트폰으로 localhost의 BrowserSync 확인

아이폰 등 스마트폰 실기로 미리보기를 확인하고 싶을 때
개발 중에 스스로 확인하기만 하면 되는 상황에서 사용할 수 있는 방법을 미리 적어두세요.
서버에 하나씩 전송하는 것은 매우 번거롭다.
BrowserSync를 사용하면 서버 UP의 번거로움을 없애고 확인할 수 있습니다.
로컬만 확인하는 게 아니라 실기로 확인하기도 편리하다.

환경 준비


다음 두 가지 방법으로 URL을 확인할 수 있습니다.

방법 1: 개발 PC와 실제 컴퓨터를 같은 와이파이에 연결하고 IP 주소에 접근


Mac의 경우
IP 주소를 확인합니다.

【방법2】Terminal로 Access URLs 확인

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.11.11:3000 ←確認URL
 --------------------------------------
          UI: http://localhost:3001 ←BrowserSync設定
 UI External: http://localhost:3001
 --------------------------------------

총결산


지금까지
코드 쓰기 → FTP 소프트웨어로 업데이트된 파일 모두 수동 서버 UP → 재부팅 → 확인
BrowserSync
코드 쓰기→FTP 소프트웨어로 업데이트된 파일 모두 수동 업로드→실시간 재로드→확인
그렇지!!
가장 번거로운 수동 작업은 서버 UP의 절차를 없애고 시간을 대폭 절약할 수 있다.편리

좋은 웹페이지 즐겨찾기