[React-native CLI] android 핸드폰에 wifi로 연결하기

이제 어느 정도 만들었으니 핸드폰에 잘 작동되는지 확인을 해볼까 합니다.

 

apk나 aab로 만든 뒤 핸드폰에서 확인하는 방법도 있겠지만,

이렇게 되면 수정할 때마다 apk, aab로 만들어서 확인을 해야 되는 현상이 발생하니 다른 방법을 통해 실제 기기에서 확인하는 방법에 대해 알아보도록 합시다!

 

제목에서도 말했지만 안드로이드 스튜디오에서 Pair new device over Wi-Fi를 통해 제 핸드폰에서 프로젝트를 확인해보려 합니다.

 

갤럭시폰에서 개발자모드 키기

---

먼저 갤럭시폰을 준비하시고 아래 블로그를 참고하여 개발자모드 켜야 됩니다.

https://m.blog.naver.com/leemonpai/222976231731

갤럭시 개발자옵션 켜기 개발자모드 usb 디버깅 활성화시키기

 

안드로이드 스튜디오에서 Wi-Fi 설정

---

참고 블로그

https://velog.io/@bang9dev/wireless-debugging

[RN-CheatSheet] Wireless debugging

 

1. 안드로이드 스튜디오에서 새로운 프로젝트 아무거나 하나 만들기

New Project를 클릭해서 설치하시면 됩니다.

 

2. 애뮬레이터 클릭하고 와이파이 연결 클릭해서  Pair new devices over Wi-Fi 나오게 하고 qr연결하기

새로운 프로젝트를 설치하셨으면 오른쪽 부분에 아래와 같이 되어 있습니다.

클릭하면 초록불이 들어오고,

또 클릭하면 Pair new devices over Wi-Fi가 나옵니다.

이제 갤럭시 폰으로 연결하시면 됩니다.

qr코드로 기기 페어링 하시면 됩니다.

처음에 이화면이 나왔는데 당황하지 말고 갤럭시 폰을 덜 설정해서 그런 겁니다.

갤럭시 폰에서 개발자 모드 안에 무선 디버깅을 눌러야 됩니다!!!

 

그런 다음 close하시고 와이파이 버튼을 클릭하고 다시 qr연결하시면 됩니다.

연결에 성공하시면 이와 같은 화면이 나옵니다.

 

명령어으로 갤럭시 폰에 프로젝트 연결하기

---

참고블로그

https://velog.io/@carrotdy/React-native-android-%EC%8B%A4%EC%A0%9C-%EA%B8%B0%EA%B8%B0-%EC%97%B0%EA%B2%B0

[React-Native] android 실제 기기 연결

 

vscode 터미널에 명령어를 입력하시면 됩니다.

adb devices

빌드 성공~

adb reverse tcp:8081 tcp:8081

 

npm run android 하기 전에 기존에 사용하고 있는 애뮬레이터를 꺼주어야 됩니다.

이거 꺼줘야지 갤럭시폰에서 실행할 수 있습니다.

 

npm run android

마지막으로 해주면 실제폰에서 어떻게 보이는지 확인하실 수 있습니다.

허허 이렇게 폰트가 뒤죽박죽 되어있는 현실을 알 수 있습니다.^^;;;