#RN6. Trouble Shooting

해피데빙·2022년 7월 24일
0

DND

목록 보기
23/33
post-custom-banner

출처 : https://facebook.github.io/metro/

웬만한 에러 생기면 아래 링크로 가기!
Trouble Shooting

RN development platform
js bundler, asset management 등

장점 : fast startup, quick bundling 등
하나 변경할 때마다 번들링에서 시간이 오래 걸리는 문제를 해결하기 위해 만들어진 것!

  • sub-second reload cycles
  • fast startup
  • quick bundling speeds.
  • Works with thousands of modules in a single application.
  • Supports every React Native project out of the box.

Port already in use

Metro 포트 번호 : 8081
방법1)다른 프로세스가 사용 중이면 그걸 끈다

sudo lsof -i :8081 //8081에서 listening하고 있는 프로세스 찾기

kill -9 <PID> //해당 프로세스 끄기

방법2) 번들러가 사용하는 포트를 바꾼다
1. rn 앱이 시작하는 포트 바꾸기

npx react-native start --port=8088 //8088에서 듣기
  1. js번들을 해당 포트에서 로딩해야 하니까
  • Xcode : 정한 포트에서 일어나는 것들을 모두 'ios/App_Name.xcodeproj/project.pbxproj' 파일에 업데이트해야 한다

NPM locking error

에러 메시지

npm WARN locking Error: EACCES

아래 명령어 사용하기

sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules

Missing libraries for React

RN을 직접 프로젝트에 추가했으면
1. 사용하는 관련 dependency를 모두 추가해줘야 한다
ex. RCTText.xcodeproj, RCTImage.xcodeproj

  1. 이런 dependency에서 만들어진 바이너리(이진법 기계코드)들이 앱의 바이너리와 연결이 되어야 한다.
    : Use the Linked Frameworks and Binaries section in the Xcode project settings.
    이 링크에 나와있는 내용대로 하기
  1. CocoaPods
    1) Podfile의 subspecs 와 함께 React를 추가하기

ex. , , fetch() APIs 사용 중이면 Podfile에 추가해야

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'RCTText',
  'RCTImage',
  'RCTNetwork',
  'RCTWebSocket',
]

2) pod install 하기 -> Pods/ 디렉토리가 생성 + React 설치 되었는지 확인하기
3) 생성된 .xcworkspace 파일을 사용해서 설치된 dependency를 사용할 수 있게 된다

profile
노션 : https://garrulous-gander-3f2.notion.site/c488d337791c4c4cb6d93cb9fcc26f17
post-custom-banner

0개의 댓글