인프런 커뮤니티 질문&답변

wodnjs306님의 프로필 이미지

작성한 질문수

배달앱 클론코딩 [with React Native]

데브메뉴와 Flipper

플리퍼에서 프로젝트이름이 FoodDeliveryApp이 아닙니다.

작성

·

963

0

 
 
 
 
 
안녕하세요 선생님!
플리퍼 따라하는 중인데 아래 이미지에 빨간 박스친 부분의 이름이 프로젝트명(FoodDeliveryApp)으로 되어있지 않습니다.
터미널서버(?)도 끄지 않았고, 안드로이드 에뮬레이터 켜져있는 상태입니다.
플리퍼에서 새로고침 버튼 누르면 에뮬 새로고침 되고, 메뉴버튼 누르면 에뮬에서 메뉴창 켜집니다.
근데 React DevTools 가면 선생님 화면에서는 컴포넌트가 다 보이고 있는데 제 화면은 아예 텅 비어있는 회색 화면입니다 ㅠㅠ
다음 내용에서 터미널에 'npm i react-native-flipper redux-flipper rn-async-storage-flipper @react-native-async-storage/async-storage npx pod-install' 까지 따라하면 React DevTools에 컴포넌트가 보이려나 싶었지만 그래도 비어있네요 ㅠㅠ
폴더 오픈을 다시 해야하나 싶어서 구글에 'Flipper project open' 이런식으로 찾아봤는데도 딱히 수확이 없습니당... 어떻게 해야 하는건가요!?

답변 4

2

도움이 될지는 모르겠지만 M1 맥 사용 중이고 제가 세팅한 ios idb 경로입니다. 혹시 해결이 안되셨으면 참고하세요^^

/library/frameworks/Python.framework/versions/3.10/bin/idb

저는 파이썬 3.10버전이라 아래와 같이 설치 했습니다.

pip3.10 install fb-idb

그리고 M1 맥일 경우 idb-companion 설치가 안될 수도 있는데 그럴 경우에는 아래와 같이 해주시면 됩니다.

arch -x86_64 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

arch -x86_64 /usr/local/bin/brew tap Facebook/fb

arch -x86_64 /usr/local/bin/brew install idb-companion

( homebrew를 intel 아키텍쳐용으로 별도 설치해서 해당 경로의 브루를 사용해서 idb-companion을 설치 하는 방식입니다.) 

이대로 설치가 되시면 아래와 같이 정상적으로 연결 될 거에요~

<참고: IDB 설치 안내 페이지>

https://github.com/facebook/idb

1

macos에서 idb 설치안되거나 못찾는다고 나오면 다음과 같이 해보세요.

01. 설치했는데 명령을 못 찾는다고 나옴
$ idb
zsh: command not found: idb

02. 제거 후 sudo 권한으로 설치
$ pip3.9 uninstall fb-idb
$ sudo pip3.9 install fb-idb
$ which idb
/usr/local/bin/idb
wodnjs306님의 프로필 이미지
wodnjs306
질문자

pip3.9는 파이썬 전용 패키지관리자(?) 아닌가요?

저것도 그냥 npm, yarn, brew처럼 돌려가면서 쓰는 패키지관리자(?) 중 하나인건가요??

우선 'pip3.9 uninstall fb-idb'를 입력하면 pip3.9가 없다고 뜹니다.

 

pip3.9를 설치해볼까요?

0

wodnjs306님의 프로필 이미지
wodnjs306
질문자

 

이렇게 나옵니다 !

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

왼쪽에 setup doctor에 빨간불 들어와있는데 그것부터 해결하셔야 할 것 같습니다.

wodnjs306님의 프로필 이미지
wodnjs306
질문자

우선 세팅에서 안드로이드 sdk 경로 수정했더니 프로젝트 이름은 이제 잘 뜨게 됐습니다!

그리고 react-devTools-core 라는 모듈이 없다고 되어있어서 설치했더니 사라졌습니다.

이후 콘솔쪽 경고문구가 아래와 같습니다.

 

아래는 React DevTools에서 연결시도 될 때 문구를 찍은 것입니다.

 

콘솔쪽 보니 서버 포트가 8088, 9088, 8089 등 쓰여있는데, React DevTools에서 로딩 문구를 보니 포트 '8097' 이더라구요. info 에 쓰여있는 숫자랑 겹치지가 않아서 연결이 안되는 것으로 보이는데 맞을까요??

 

이 부분은 구글링을 어떻게 해야할 지 모르겠습니다 ㅠㅠ

 

====================

 

그리고 여기 'IDB binary location' 경로도 못찾아서 설정 못하고 있는데 이것도 React DevTools가 빈 화면으로 나오는 이유중 하나일까요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

연결하고 나서 앱을 껐다 켜거나 npm run ios 또는 XCode에서 run 누르면 다시 뜨지 않나요? 일단 Logs 탭 먼저 뜨는지 한 번 봐보세요.

IDB는 실제 기기 연결하지 않을 때는 크게 상관 없습니다.

wodnjs306님의 프로필 이미지
wodnjs306
질문자

혼자 포트 연결 시도하다가 고정 에러가 떠서 다 지우고 다시 설치했습니다 ㅠ

여전히 React DevTools는 비어있고, Logs는 아래와 같이 나옵니다!

 

그리고

npm run android

npm run ios 

쳐서 두 시뮬레이터를 다 키니 이런 문구가 뜨는데, 이후 안드로이드 시뮬을 종료했더니 사라지더라구요... 이건 시뮬레이터를 두개 키면 나타나는 고질적인 문제일까요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

일단 연결 성공인 상태이고요. 메트로 서버에서 d 눌러서 나오는 핸드폰 메뉴에서 현재 debug 모드인지 확인하세요. 플리퍼에서 나오는 모든 에러 해결하기 어렵습니다. 그리고 안드로이드랑 ios 둘다 동시에 안 켜시는 것을 추천드립니다. 메트로서버에서 오류나요.

wodnjs306님의 프로필 이미지
wodnjs306
질문자

넵 d 눌러서 debug 모드로 하면 새로고침 할때마다 크롬에 새창이 켜지던데, 지금 새로고침 할 때 크롬창이 안뜨는 걸 보니 debug 상태는 아닌 것 같습니다. 

React DevTools가 계속 연결 안되면 나중에 선생님 강의에 이 기능으로 레이아웃 체크하는게 많을까봐 걱정은 되지만 일단 이렇게 냅두고 진행해야겠네요 ㅠㅠ

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

크롬창이 안 뜨는거면 플리퍼와 연결이 되었기 때문에 안 뜨는거라고 보시면 됩니다.

wodnjs306님의 프로필 이미지
wodnjs306
질문자

넵 감사합니다!

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

저기 빨간색 박스 부분 누르시면 FoodDeliveryApp이나 안드로이드 에뮬레이터 있으실 겁니다.