모바일 개발에 LocalHost 사용

이 짧은 튜토리얼은 Mac 사용자를 위한 것입니다.

Chrome DevTools를 사용하여 다양한 크기의 기기에서 웹 애플리케이션의 모양과 느낌을 테스트할 수 있다는 사실을 알고 계실 수도 있지만 인터넷에 연결할 수 있는 모든 기기에서 run localhost를 사용할 수도 있다는 사실을 알고 계셨나요? 로컬 컴퓨터에서 localhost:3000(또는 포트)을 실행하면 휴대폰과 태블릿에서 실시간으로 프로그램을 실행하여 모바일에서 개발 및 테스트할 수 있습니다.

이것이 왜 중요합니까?

Chrome DevTools Device Toolbar는 많은 시간을 절약해주는 훌륭한 도구이지만 완벽하지는 않습니다. 예를 들어 내 개인 웹 사이트를 배포한 후 iPhone 브라우저에서 본 내 사이트 버전이 미디어 쿼리 후 미디어 쿼리를 조정하면서 몇 시간을 보냈던 로컬 DevTools 버전과 상당히 다르게 보이는 것을 보고 놀랐습니다. 나중에 모니터의 와이드 화면에서 내 사이트를 불러왔을 때 프로그래밍을 하던 13인치 노트북보다 더 넓은 화면을 실제로 고려한 적이 없다는 사실을 발견했습니다.

전 세계가 볼 수 있도록 배포하기 전에 이러한 유형의 결함 및 UI/UX 버그를 방지하려면(이상적이지 않습니까?) 다양한 크기의 물리적 장치에서 앱을 테스트하는 것이 필수적입니다. 모바일 장치에서 localhost를 실행할 때 한 가지 멋진 점은 컴퓨터의 localhost와 마찬가지로 코딩하면서 앱의 변경 사항을 실시간으로 볼 수 있다는 것입니다.

사용 방법(Mac 사용자용):

(1) Mac의 localhost에서 프로그램을 실행합니다.
프로그램이 localhost에서 실행 중인지 확인하십시오. 실행 중인 localhost 포트(예: localhost:3000)로 이동하면 개발 중인 앱의 현재 버전이 표시되어야 합니다.

사용 중인 포트를 기록해 둡니다. 일반적인 포트 번호는 3000, 3001, 8000 또는 8080입니다. "localhost:"뒤에 있는 URL 표시줄에서 포트 번호를 찾을 수 있습니다. 이 경우 내 localhost 포트는 포트 3000입니다.

(2) Mac의 IP 주소 찾기
여기에서 localhost를 실행하는 Mac의 IP 주소를 찾고자 합니다. IP 주소를 찾으려면 먼저 Mac의 왼쪽 상단 모서리에 있는 사과 로고를 클릭하여 드롭다운 메뉴를 엽니다.



메뉴에서 시스템 환경설정을 선택하여 시스템 환경설정을 엽니다.

그런 다음 시스템 환경설정의 옵션 목록에서 네트워크를 선택합니다. 네트워크 앱이 열릴 것입니다.



IP 주소는 상태 아래 오른쪽 중간 상자에 있습니다. 네트워크 상태 아래에서 연결된 Wi-Fi 네트워크와 IP 주소를 알려주는 문장을 찾습니다. 제 경우 IP 주소는 123.45.6.08 입니다. 마지막 단계에 필요하므로 IP 주소를 기록해 둡니다.



(3) 모바일 장치를 Mac과 동일한 Wi-Fi 네트워크에 연결합니다.

아직 그렇지 않은 경우.

(4) 모바일 장치에서 localhost 열기
휴대전화의 URL 표시줄에서 다음으로 이동합니다.

http://{your-IP-address}:{your-port-number}

제 경우에는 URL 표시줄에 다음과 같이 입력했습니다.

http://123.45.6.08:3000

이제 모바일 장치에서 로컬로 앱을 볼 수 있습니다. 이제 멋진 것을 만드십시오!

계속해서 저와 연결하십시오.