최근 5년 전에 React Native (버전 0.59.9)로 개발된 구형 프로젝트를 재개하기 위해 다양한 문제에 직면하고 그 해결 과정을 통해 결국 성공적으로 실행시킬 수 있었습니다.

이번 글에서는 마주친 도전과 그에 따른 해결 방법을 상세히 설명하여, 유사한 상황에 처한 개발자들에게 유용한 정보를 제공하고자 합니다.

이 프로젝트의 기초 환경 버전 정보는 다음과 같습니다:

react: 16.8.3

react-native: 0.59.9

Gradle 패키지 다운로드

처음에는 이전까지 잘 동작하던 환경에서 아무런 변경 없이 바로 실행이 될 거라 생각하고 아래 명령어를 실행했습니다:

react-native run-android

그러나 현실은 Gradle 패키지가 느리고 자주 중단되었으며, 이를 해결하기 위해 외부망 사용을 통해 문제를 해결했습니다.

그 외망 사용 방법이더라도 다운로드 속도가 느린 만큼, 그렇지 않은 상황에서도 어떻게 대처할 수 있을지 궁리했습니다. 이에 국내에서 가장 편리한 Android Studio Gradle 패키지 다운로드 방법을 공유합니다.

NPM 인증서 만료 및 미러源 전환

다음 단계에서 바로 실행이 될 것으로 기대했지만, 예상치 못한 문제에 직면했습니다.

다시 react-native run-android 명령어를 실행하니 아래와 같은 에러가 발생했습니다:

[npm] ERR: request to  https://registry.npm.taobao.org failed , reason: certificate has expired

이 문제의 원인을 조사한 결과, npm.taobao.org 및 registry.npm.taobao.org 도메인이 2022년 5월 31일부터 서비스를 중단했으며, npm.taobao.org 인증서가 2024년 1월 22일에만료되었기 때문입니다.

이에 대비해 새로운 미러源으로 https://registry.npmmirror.com을 사용하기로 결정했습니다.

npm 및 yarn의 미러源을 변경하는 방법은 아래와 같습니다:

# npm 미러源 설정
npm config set registry https://registry.npmmirror.com
# yarn 미러源 설정
yarn config set registry https://registry.npmmirror.com

설정 후 아래 명령어로 미러源가 변경되었는지 확인합니다:

# npm 현재 미러源 확인
npm config get registry
# yarn 현재 미러源 확인
yarn config get registry

명령어 실행 후 여전히 원래의 에러가 발생하자, 이는 인증서 문제 때문은 아니고 대신 프록시 설정 문제일 수 있다고 판단했습니다.

프록시 설정을 확인하고 제거하는 방법은 아래와 같습니다:

# npm 프록시 제거
npm config delete proxy
npm config delete https-proxy
# yarn 프록시 제거
yarn config delete proxy
yarn config delete https-proxy

프록시 설정을 삭제 후에도 여전히 에러가 발생하자, SSL 인증서 검증을 건너뛰기로 결정했습니다:

# npm에서 SSL 인증서 검증 무시
npm set strict-ssl false
# yarn에서 SSL 인증서 검증 무시
yarn config set "strict-ssl" false -g

이제 react-native run-android 명령어를 실행하니 인증서 관련 에러는 사라졌습니다.

정규 표현식 오류

다음 단계에서 새로운 에러가 발생했습니다:

error Invalid regular expression: 
/(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\].*|website\\node_modules\\.
*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/:
 Unterminated character class. Run CLI with --verbose flag for more details.

이 문제를 해결하기 위해 다음 파일을 수정했습니다:

\node_modules\metro-config\src\defaults\blacklist.js

수정 내용은 아래와 같습니다:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

이후 react-native run-android 명령어를 실행하니 새로운 에러가 발생했습니다.

프로그램包 결여 문제

다음 에러가 발생했습니다:

> Task :react-native-camera:compileGeneralDebugJavaWithJavac
E:\project\exphone\exphoneapp2\node_modules\react-native-camera\android\src\main\java\com\google\android\cameraview\Camera1.java:31: error: package com.facebook.react.bridge does not exist
import com.facebook.react.bridge.ReadableMap;

이 문제를 해결하기 위해 Android의 build.gradle 파일에 아래 내용을 추가했습니다:

def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())

allprojects {
    configurations.all {
        resolutionStrategy {
            // Remove this override in 0.65+, as a proper fix is included in react-native itself.
            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
        }
    }
}

이후 react-native run-android 명령어를 실행하니 성공적으로 빌드가 완료되었습니다.

장치 연결 문제

다음 에러가 발생했습니다:

> Task :app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

이 문제를 해결하기 위해 BlueStacks 앱플레이어를 사용하고 adb를 통해 연결했습니다:

# adb를 통해 장치 연결
PS E:\project\exphone\exphoneapp2> adb connect 127.0.0.1:5555
connected to 127.0.0.1:5555
PS E:\project\exphone\exphoneapp2> adb devices               
List of devices attached
127.0.0.1:5555  device

연결 후 react-native run-android 명령어를 실행하니 앱이 성공적으로 설치되었습니다.

실행 시 TypeError 오류

앱 실행 중 아래와 같은 에러가 발생했습니다:

/node_modules/npm/node_modules/graceful-fs/polyfills.js:287
      if (cb) cb.apply(this, arguments)

TypeError: cb.apply is not a function
    at /node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18
    at FSReqCallback.oncomplete (node:fs:199:5)

이 문제를 해결하기 위해 package.json에 아래 내용을 추가했습니다:

  "resolutions": {
    "**/graceful-fs": "^4.2.4"
  }

이후 react-native run-android 명령어를 실행하니 앱이 성공적으로 실행되었습니다.

결론

이번 프로젝트 재개 과정은まさに九九八十一難を乗り越えた 드라마틱한 여정이었습니다.

다음은 과정에서 사용한 주요 명령어를 모아둔 것입니다.

미러源 변경

# npm 미러源 설정
npm config set registry https://registry.npmmirror.com
# yarn 미러源 설정
yarn config set registry https://registry.npmmirror.com

# 현재 미러源 확인
npm config get registry
yarn config get registry

캐시 관리

# npm 캐시 목록 보기
npm cache list

# 캐시 디렉토리 경로 보기
yarn cache dir

# 캐시 삭제
npm cache clean --force
yarn cache clean

프록시 설정

# 현재 프록시 설정 보기
npm config list
yarn config list

# npm 프록시 제거
npm config delete proxy
npm config delete https-proxy

# yarn 프록시 제거
yarn config delete proxy
yarn config delete https-proxy

# npm 프록시 설정
npm config set proxy http://127.0.0.1:8080
npm config set https-proxy http://127.0.0.1:8080

# yarn 프록시 설정
yarn config set proxy http://127.0.0.1:8080
yarn config set https-proxy http://127.0.0.1:8080

SSL 인증서 검증 건너뛰기

# npm SSL 인증서 검증 무시
npm set strict-ssl false
# yarn SSL 인증서 검증 무시
yarn config set "strict-ssl" false -g

장치 관리

# 연결된 장치 목록 보기
adb devices

# 특정 장치에 연결
adb connect 127.0.0.1:5555