데스크탑 local 환경 모바일로 접근하기

 

토이 프로젝트를 하면서 카드가 플립 되는 애니메이션을 적용을 했다. 

 

그런데 이게 웬걸 데스크탑 브라우저에서는 이상 없이 잘 작동이 되는데, 모바일 환경(사파리)에서는 애니메이션에 문제가 발생했다.

 

아무래도 CSS 키워드가 사파리에서는 다른 부분이 있는 듯한데... 이를 찾아내려면 코드를 수정할 때마다 디플로이를 해서 작동 여부를 확인해야 하는 번거로움이 발생했다. 

 

그래서 그냥 로컬 호스트에 모바일로 접근할 수 없을까? 라고 생각하던 와중 잘 설명된 블로그를 발견하여 번역해 옮겨본다. 

 

Dev Tip: How to view localhost web apps on your phone

필자는 웹 어플을 만들 때 항상 모바일 최적화를 한다. 배포 이전에 모바일로 프로젝트를 확인하는 것은 필수적인 절차다. 

 

종종 크롬 개발자도구에서 스타일 적용을 모바일 기기 에뮬레이터로 확인하지만 실제 모바일 브라우저만큼 확실한 건 없다. 이는 실제 유저가 문제를 발생하기 전에 모바일 환경에서의 문제 발견에 도움을 준다. 

 

아래 설명된 방식을 이용하면 매우 쉽게 모바일로 데스크탑 로컬 환경에 접근할 수 있다. 참고로 맥 환경 기준이다.

 

Serve over your wifi via local IP

말이 어렵게 들리겠지만 사실 매우 간단하다. 

 

주의: 데스크탑 컴퓨터와 모바일 기기가 같은 와이파이로 연결되어야 한다.

 

Step 1: Serve to Localhost

우선 데스크탑으로 평소에 하던 대로 로컬 호스트 포트를 열고 해당 주소로 어플을 실행시켜라.

 

몇 번 포트를 이용하는지 꼭 기억하자. 참고로 아래 이미지에서는 8080 포트를 이용했다. 

 

로컬 브라우저에서 어플을 볼 수 있게 되면 2단계로 넘어가자.

 

Step 2: Find your Local IP Address

System Preferences > Network 설정으로 가서 왼쪽 패널의 와이파이를 클릭하면 Status: Connected 아래에 Wifi is connected to~라는 것이 보인다. 여기서 로컬 ip 주소를 확인할 수 있다. 

 

주의: 로컬 아이피 주소는 다른 기기가 네트워크에 연결/비연결 됨에 따라 자동적으로 변경될 수 있다. 따라서 해당 주소가 앞으로도 아이피 주소로 사용된다는 보장이 없다. 따라서 매번 실행 할 때마다 확인해야 한다. 

Step 3: View on your phone

모바일 기기의 브라우저에서 http://<로컬 아이피주소>:<포트넘버>로 이동해보자.

 

예를 들어, localhost:8080에 아이피주소가 123.45.67.890이라면 http://123.45.67.890:8080으로 이동하면 된다. http://는 중요하니 꼭 넣어주자.

 

 

출처: https://prowe214.medium.com/tip-how-to-view-localhost-web-apps-on-your-phone-ad6b2c883a7c#:~:text=On%20your%20mobile%20device's%20browser,don't%20leave%20it%20off.