반응형 디자인을 적용해 폰이나 태블릿 사이즈의 화면을 만들고 확인을 할 때 보통 크롬 개발자 도구의 device toolbar를 사용하곤 한다. 아이폰 SE, 아이폰 XR, 아이폰 12 Pro 등의 화면을 보고 만들어도 배포 후 실제 폰에서 화면을 띄워보면 UI가 다른 경우가 태반이다. 하단 주소창과 툴바 때문에 100vh 적용이 안 되는 건 기본이다. 이런 문제 때문에 이제까지 매번 배포 후에만 배포 링크로 접속해서 실제 모바일 뷰를 확인할 수 있었는데 모바일 브라우저에서도 localhost:3000 에 접속할 수 있는 방법이 있었다!
2024년 5월 13일 업데이트 :
정확히는 모바일 브라우저에서 localhost:3000의 일종의 프리뷰 화면을 볼 수 있는 방법으로 엄밀히 말해서 localhost에 접속하는 것은 아닙니다. 관련하여 보다 자세한 설명은 댓글을 참고해 주세요.
1. 컴퓨터에서 로컬호스트를 연다. (React의 경우 npm start로 localhost:3000 구동)
2. 모바일 기기의 와이파이를 컴퓨터와 같은 와이파이로 설정한다.
3. 모바일 웹 브라우저(iOS 디바이스의 경우 사파리, 안드로이드 디바이스는 크롬)를 열고, 주소창에 <ip_address:port>를 입력한다.
예) 111.22.000.33:3000 입력
참고: Mac에서 IP 주소 확인하는 방법 (Ventura OS 기준)
시스템 설정 > 네트워크 > Wi-Fi > 해당 와이파이의 ... 아이콘 클릭 > 네트워크 설정 클릭
모바일 디바이스 뷰 확인한다고 쓸데없이 배포하던 나날과 안녕하고, 광명 찾으세요!!
'배워서 남 주자' 카테고리의 다른 글
| [styled-components] css 스타일 코드를 분리해서 작성하기 (0) | 2023.05.20 |
|---|---|
| [CSS] 매직 넘버magic number와 상대 단위 em, rem (0) | 2023.05.18 |
| 프로그래머스 Lv.1 | 과일장수 (JavaScript) (1) | 2023.05.12 |
| [styled-components] 공통 UI 컴포넌트 및 theme 기능 (2) | 2023.04.06 |
| vercel 배포 브랜치 설정 (0) | 2023.03.16 |