[React Native] 문제 해결하기(Troubleshooting)

포트가 이미 사용중일 때

Metro 번들러는 포트 8081에서 실행됩니다. 다른 프로세스가 이미 해당 포트를 사용 중인 경우, 해당 프로세스를 종료하거나 번들러가 사용하는 포트를 변경할 수 있습니다.

포트 8081에서 프로세스 종료하기

포트 8081를 사용 중인 프로세스의 ID를 찾으려면 다음 명령어를 실행합니다.

sudo lsof -i :8081

그런 다음, 다음 명령어를 실행하여 프로세스를 종료합니다.

kill -9 <pid>

Windows에서는 Resource monitor를 사용하여 포트 8081를 사용하는 프로세스를 찾고 Task Manager를 사용하여 이를 중지할 수 있습니다.

8081이 아닌 다른 포트 사용하기

번들러가 다른 포트를 사용하도록 설정하려면 프로젝트의 루트에서 다음 명령어를 실행합니다.

npm start -- --port=8088

또한, 애플리케이션이 새로운 포트에서 javascript 번들을 로드하도록 업데이트해야 합니다. Scode에서 실행되는 경우 ios/__App_Name__.scodeproj/project.pbxproj 파일에서 8081을 선택한 포트로 변경해야 합니다.

NPM 잠금 오류

react native CLI를 사용하는 동안 npm WARN locking Error: EACCES와 같은 오류가 발생하면 다음 명령어를 실행합니다.

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

React에 필요한 라이브러리 누락

react native를 프로젝트에 수동으로 추가한 경우, 사용 중인 관련 종속성을 모두 포함했는지 확인해야합니다. 예를 들어, RCTText.xcodeproj, RCTImage.xcodeproj등을 포함해야 합니다. 그런 다음, 이러한 종속성에 의해 빌드된 바이너리를 앱 바이너리에 연결해야 합니다. Xcode 프로젝트 설정의 Linked Frameworks and Binaries 섹션이 있습니다.

CocoaPods를 사용하는 경우, Podfile에 React와 하위 스펙을 추가했는지 확인해야 합니다. 예를 들어, <Text/>,<Image/>,fetch() API를 사용하는 경우 Podfile에 다음과 같이 추가해야합니다.

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

그런 다음, pod install을 실행하고 프로젝트에 React가 설치된 Pods/ 디렉토리가 생성되었는지 확인합니다. CocoaPods는 생성된 .scworkspace 파일을 사용하여 이러한 종속성을 사용할 수 있도록 안내할 것입니다.

CocoaPod로 사용될 때 React Native가 컴파일되지 않음

CocoaPods 플러그인 중 cocoapods-fix-react-native라는 것이 있는데, 의존성 관리자를 사용할 때 소스 코드를 수정하는 잠재적인 문제를 처리합니다.

인수 목록이 너무 길음: 재귀 헤더 확장 실패

프로젝트의 빌드 설정에서 User Search Header Paths 및 Header Search Paths는 코드에서 지정된 #import 헤더 파일을 Xcode가 어디에서 찾을지 지정하는 두 가지 구성입니다. Pods의 경우, CocoaPods는 특정 폴더 배열을 기본값으로 사용하여 찾습니다. 이 특정 구성이 덮어쓰여지지 않았는지, 구성된 폴더 중 어느 하나가 너무 크지 않은지 확인하세요. 큰 폴더 중 하나가 있으면 Xcode가 전체 디렉토리를 재귀적으로 검색하려고 시도하고, 어느 시점에서 위 오류를 발생시킬 수 있습니다.

User Search Header Paths 및 Header Search Paths 빌드 설정을 CocoaPods의 기본값으로 되돌리려면, 빌드 설정 패널에서 해당 항목을 선택하고 삭제 키를 누릅니다. 이렇게 하면 사용자 정의 오버라이드가 제거되고 CocoaPods 기본값으로 돌아갑니다.

사용 가능한 전송 수단 없음

React Native는 WebSockets에 대한 폴리필을 구현합니다. 이러한 폴리필은 `import React from 'react'`를 통해 애플리케이션에 포함된 react-native 모듈의 일부로 초기화됩니다. Firebase와 같이 WebSockets가 필요한 다른 모듈을 로드하는 경우, react-native 이후에 로드/요청해야 합니다

import React from 'react';
import Firebase from 'firebase';

셸 명령 비응답 예외

다음과 같은 `ShellCommandUnresponsiveException` 예외가 발생하면

Execution failed for task ':app:installDebug'.
  com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException

Gradle 버전을 `android/build.gradle`에서 1.2.3으로 다운그레이드해 보세요.

react-native init이 멈춤

시스템에서 `npx react-native init`을 실행할 때 문제가 발생하면, verbose 모드에서 다시 실행해서 원인을 찾으세요

npx react-native init --verbose

프로세스를 디버깅하거나 발생하는 오류에 대해 더 많은 정보를 알아내야 할 때, verbose 옵션을 사용하여 더 많은 로그와 정보를 출력하여 문제를 해결할 수 있습니다.

다음 명령어를 프로젝트의 루트 디렉토리에서 실행하세요

npm run android -- --verbose

react-native 패키지 매니저를 시작할 수 없음 (Linux에서)

Error "code":"ENOSPC","errno":"ENOSPC"

이 문제는 Linux에서 watchman이 모니터링할 수 있는 디렉토리 수에 의해 발생합니다. 이를 해결하려면 터미널 창에서 다음 명령어를 실행하세요

echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Error: spawnSync ./gradlew EACCES

macOS에서 `npm run android` 또는 `yarn android`를 실행할 때 위 오류가 발생하면, `gradlew` 파일을 실행 가능하도록 만들기 위해 다음 명령어를 실행해 보세요:

sudo chmod +x android/gradlew