실제 모바일 기기에서 로컬 환경을 테스트하는 방법이 있을까요?

현재 작업 중이신 프로젝트가 애플리케이션이 아닌 웹이 맞을까요? 그렇다면 모바일 기기에서 PC와 같은 와이파이를 연결한 후, 현재 PC의 IP 및 포트 번호를 통해 접속이 가능합니다. [예시] - PC의 IP 주소: 000.000.0.0 - 포트 번호: 3000 - 모바일 safari 등에서 000.000.0.0:3000 으로 접속 가능 앱 개발을 위해 iOS Simulator를 자주 사용하신다면 여러 기기 환경을 필요에 따라 설정해서 PC에서 확인해보시는 방법도 추천 드립니다.

실제 모바일 기기에서 로컬 환경을 테스트하려면 몇 가지 방법이 있습니다. Vue 프로젝트를 예로 들어 macOS에서 로컬 환경에서 실행 중인 웹 애플리케이션을 모바일 기기(iPhone)에서 테스트하려면 다음 단계를 따르세요. 1. 로컬 네트워크에서 IP 주소 확인하기: 모바일 기기가 로컬 환경에 접근하려면 컴퓨터의 로컬 IP 주소를 알아야 합니다. macOS에서 터미널을 열고 ' ifconfig ' 명령어를 입력해 로컬 IP 주소를 확인할 수 있습니다. 이 명령어를 실행하면 ' en0 ', ' en1 ' 등과 같은 네트워크 인터페이스 목록이 표시됩니다. 일반적으로 Wi-Fi를 사용하는 경우 ' en0 ' 또는 ' en1 '에서 ' inet ' 항목에 표시되는 IP 주소를 찾으세요. 2. Vue 프로젝트 구성 변경하기: ' vue.config.js ' 파일을 생성하거나 수정하여 개발 서버가 외부에서 접근 가능하도록 설정해야 합니다. ' vue.config.js ' 파일에 다음과 같은 설정을 추가하세요. 이 설정은 개발 서버를 모든 IP 주소에서 접근 가능하게 설정합니다. 이제 프로젝트를 실행하세요. 3. 모바일 기기에서 로컬 환경에 접속하기: 이제 모바일 기기에서 웹 브라우저를 열고 로컬 IP 주소와 포트 번호를 입력하여 로컬 환경에 접속할 수 있습니다. 예를 들어 로컬 IP 주소가 192.168.1.100이고 포트 번호가 8080인 경우, 모바일 웹 브라우저에서 http://192.168.1.100:8080으로 접속하세요. 이제 모바일 기기에서 로컬 환경을 테스트할 수 있습니다. 물론 컴퓨터와 모바일 기기가 동일한 네트워크에 연결되어 있어야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#1
$ ifconfig

#2
module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080, // 원하는 포트 번호를 사용하세요.
    disableHostCheck: true,
  },
};

#2
$ npm run serve