[React Native] npx로 생성한 프로젝트 Android Emulator에서 열기

Siwon Yoo·2021년 11월 22일

expo에서 벗어나 React Native CLI로 넘어가는 길목에서,,
npx로 첫 리액트 네이티브 프로젝트를 생성하는 과정에서 마주친 에러들이다.
나와 같은 에러를 맞이하고 구글링을 할 누군가를 위해 쓰는 troubleshooting log!

JDK와 안드로이드 스튜디오를 설치하고, 환경변수 설정을 마치고,
npx react-native init AwesomeProject
까지 성공적으로 마친 나는, 터미널에다 대고 호기롭게 외쳤다.
npx react-native run-android ❗❗❗❗❗
실행되거라❗❗❗❗❗
...
그리고 에러들을 맞이하게 되었다...

첫 번째 에러,

Error: error:0308010C:digital envelope routines::unsupported

터미널 하나가 새로 켜지고, metro가 실행되는 창에서 나온 에러이다.

Failed to construct transformer:  Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at stableHash (C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\metro-cache\src\stableHash.js:19:8)
    at Object.getCacheKey (C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\metro-transform-worker\src\index.js:593:7)
    at getTransformCacheKey (C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\metro\src\DeltaBundler\getTransformCacheKey.js:24:19)
    at new Transformer (C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\metro\src\DeltaBundler\Transformer.js:48:9)
    at C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\metro\src\Bundler.js:22:29
    at runNextTicks (node:internal/process/task_queues:61:5)
    at processTimers (node:internal/timers:497:9) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
s
c

검색을 통해 구글의 지식을 엿보니, 이 에러는 나의 node js 버전이 새로 만든 react native프로젝트와 호환되지 않아 발생하는 에러였다. unsupported라는 단어가 내 가슴을 후벼팠다..

아래는 내가 해결한 방법이다.

nvm으로 node 버전 바꾸기

Node Version Manager이라고, 노드 버전을 관리할 수 있는 아주 훌륭한 패키지가 있다.
윈도우용 nvm 설치 로 들어가서, 스크롤을 내리면 나오는 Assets에서, 하이라이트한 파일을 받아 설치할 수 있다.

powershell을 열어서(우클릭해서 관리자 권한으로 실행했다)

nvm install v14.18.1

다운로드하고 싶은 버전의 node를 설치하고

nvm use 14.18.1

사용하도록 바꾸어 주면 된다

node -v

로 바뀐 노드의 버전을 확인할 수 있다.

그리고 새로 바뀐 node 버전으로 새로 프로젝트를 만들어주기 위해 기존 AwesomeProject 디렉토리를 통째로 지우고, 다시 npx react-native init AwesomeProject를 해 주었다. 그리고 npx react-native start를 하니...!

성공! 아무런 에러도 발생하지 않는다

두 번째 에러,

Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 870 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
'adb':(��) ���� �Ǵ� �ܺ� ���, ������ �� �ִ� �wα׷�, �Ǵ�
��ġ ������ �ƴմϴ�.
info Launching emulator...
error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
info Installing the app...

ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

    at makeError (C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\execa\index.js:174:9)
    at C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\execa\index.js:278:16
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async runOnAllDevices (C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
    at async Command.handleAction (C:\Users\Siwon\Desktop\RNex\AwesomeProject\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:192:9)
info Run CLI with --verbose flag for more details.

이 에러는..

npx react-native start
를 해주지 않고 바로
npx react-native run-android
를 해서 발생한 에러였다.
모든 일에는 순서가 있는 것이거늘..

캡쳐의 오른쪽 부분처럼 터미널을 하나 더 열어서

npx react-native start을 하고 두 번째 터미널에서
npx react-native run-android를 해주면 문제 없이 실행된다.

사실..
Reason: No emulators found as an output of emulator -list-avds.
라는 문구 때문에 내 에뮬레이터에 문제가 있나.. 해서 안드로이드 스튜디오를 열고

빨간색 동그라미를 친 Android Virtual Device Manager을 열고 에뮬레이터 버전을 설치하고, 다운로드하는 과정을 거쳐서 내 virtual device를 활성화해 줬는데,

이 과정도 에러 해결에 영향을 미쳤을 것으로 짐작한다.
Device를 찾을 수 없다는 에러를 맞이하는 분이 있다면, Virtual Device Manager을 열어서 가상 기기가 있는지 확인해 보는 것도 좋을 듯 싶다.