개발서버가 안켜질때 체크해봐야 할 내용

한줄결론부터 시작한다.

리액트 네이티브로 빌드한 앱에서 원격 아이피와 현재 개발하고있는 PC 혹은 노트북의 아이피가 같은지 체크하자.

리액트 네이티브는 디버깅, 즉 테스트를 위해 로컬 노드서버를 켜고 해당 서버를 통해 앱과 실시간 통신해서 변경점이 있으면 즉시 반영할 수 있도록 되어있다.

즉, 윈도우라면 파워셀이나 cmd에서 cd 명령어로 리팩트 네이티브 폴더로 이동 후 react-native run-android 를 실행했을때 안드로이드 네이티브처럼 앱을 빌드 후 바로 실행되는것이 아니고, 노드서버를 기동한다. 노드서버가 기동이 되면 디바이스와 연동해 디버깅을 진행하는 것이다.

아무튼 사전설명은 이쯤하고 정말 단순하기 짝이 없는, 하지만 충분히 간과하기 쉬운 원인 그리고 해결법을 공유하고자 글을 쓴다.

(사실은 내가 다시 보기위함임ㅋㅋ)

아주 단순하다. 원격 디버깅을 하는 경우 앱을 시동한 상태에서 디바이스를 흔들면 메뉴창이 뜨는데, 거기에서 

Dev Settings -> Debug server host&port for device 를 선택 후 아이피:포트번호(특별히 설정하지 않았다면 8081)를 입력하면 알아서 원격디버깅이 된다. 여기서 아이피는 윈도우라면 cmd에서 ipconfig를 명령어를 실행했을때 나오는 ipv4와 같은 아이피를 입력해야한다.

그리고 컴퓨터와 동일한 네트워크에 연결하면 된다.

즉, 정리하자면

1. 테스트를 할 디바이스와 개발PC 혹은 노트북을 같은 네트워크(or 와이파이)에 연결시켜둔다.

2. 윈도우환경이라면 cmd에서 ipconfig를 통해 나오는 아이피를 리액트 네이티브 앱에서 입력한다.

3. 입력방법은 디바이스를 흔들면 뜨는 메뉴창에서 Dev Settings -> Debug server host&port for device에 들어가서 입력하면 된다

4. 이때 입력하는 아이피는 0.0.0.0:8081 형태로 입력하면 된다.

문제는 노트북으로 개발을 하는 경우 장소에 따라 와이파이를 옮겨갈 수 있는데 와이파이를 옮기면 당연하게도 ip가 변하기때문에 

현재 내 노트북에 연결되어있는 네트워크의 아이피를 디바이스에서 매번 바꿔줄 필요가 있다.(노트북에 연결된 와이파이, 즉 네트워크가 바뀔때마다)

이 부분을 간과하면 USB로 연결을 하더라도 원격디버깅으로 잡힌 와이파이가 다르기때문에 디바이스와 연결이 되지 않고 노드서버와 디바이스의 연결이 되지 않는것이다. 

이부분을 간과한 채 백날 Stack over flow 나 구글에 react native debugger server not working 같은 키워드로 검색해봐야 헛수고를 하게 된다ㅠㅠ 나도 다행히 빨리 눈치를 채 이 어처구니없는 삽질을 30분밖에..(또는 30분이나) 안했지만, 그 시간조차 아까워 이렇게 공유하고자 글을 쓴다.(물론 미래의 "나"에게ㅋㅋㅋㅋㅋ)

끘