요새 개발자 지망생으로서 느낀게 많아 오늘 내가 해야했던 백엔드 API 수정 이후 TypeScript 언어 기반의 ReactNative에 도전해보고자 한다. 프로젝트 초기 설정에서부터 막히는 걸 해결하면서 이 프레임워크가 어떻게 시작하고 동작하는지 살짝 알게 되었다.
일단 ReactNative를 선택한 이유는 아래와 같다.
1. 내가 이제 해보려는 것이 웹보다는 앱에 더 적합하고
2. 내 노트북상에는 Android Studio와 React 프로젝트 경험이 있어 개발 환경 구축에 필요한 모듈 설치 등등이 이미 모두 되어있는 상황이라 앱과 웹 둘 다 시작에 있어서 접근성이 좋았으며 (하지만 실행부터 막히면서 접근성이 좋았다는게 아님을 알게 되었다...허허)
3. 안드로이드 프론트 역할로 있을 때는 iOS를 배려하지 못한 것 같아 아쉬웠고 내가 백엔드로 iOS 앱을 개발하면서는 내 휴대폰 기기가 AOS라 개발한 앱을 직접 테스트해보지 못했다는 점에 또 아쉬움이 남았어서
4. 모바일 상에서 AOS와 iOS를 모두 지원하는 ReactNative 프레임워크를 선택하게 되었다.
내가 mac, iOS 소유자가 아닌 윈도우, AOS 환경이라 이를 기준으로 프로젝트 초기 설정을 하면서 트러블 슈팅을 기록하고자 한다.
프로젝트 초기 설정 명령어
개발 IDE는 VSCode이었고 cmd에 아래와 같이 입력했다.
아래 명령어는 프로젝트 초기 생성 시 기본언어를 typeScript로 자동으로 만들어준다. javaScript에서 typeScripts로 바꾸는 번거로움을 거치는 것 보다 react-native 공식 문서를 통해 아래 명령어가 더 간편한 것을 확인했다.
npx react-native init 앱이름 --template react-native-template-typescript
그러면 이제 아래와 같이 완료가 되고
cd 명령어를 통해 프로젝트 하위 경로로 이동해서 플젝을 처음 실행해보면
npx react-native run-android
프로젝트 실행 처음부터 실행이 안되는 오류에 직면하게 된다ㅋㅋㅋㅋㅋㅋㅋㅠㅠㅠㅠㅠㅠㅜ
플젝 실행 명령어를 날리면서 어떤 에러가 나고 뭘 시도했고 뭐 때문이었는지 알아냈던 과정을 아래에 담았다.
ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Java\jdk-17.0.8
백엔드 지망자로서 애정하는 개발 언어가 JAVA인데 왜 이런 오류가 생겼을까
윈도우 시스템 변수 및 환경 변수가 잘못된 디렉토리 주소를 가리키고 있어서 생긴 문제였다.
내 로컬 디렉토리에서 실제 JAVA가 설치된 파일의 경로는 C:\Program Files\Java\jdk-17인데 윈도우 제어판 시스템 환경 변수상에서 "JAVA_HOME"에 지정된 JAVA가 설치된 경로는 C:\Program Files\Java\jdk-17.0.8 였다. 뒤에 .0.8 버전을 없앴고 PATH 변수에 %JAVA_HOME%\bin이 이미 윈도우 변수로써 설정이 되어있어서 그대로 두었다.
cmd에 아래와 같이 입력하면 이제 JAVA_HOME이 명백하게 인식이 되고 위 오류를 해결했다.
C:\Users\rla00>echo %JAVA_HOME%
C:\Program Files\Java\jdk-17
그리고 다시 npx react-native run-android로 플젝을 실행하려고 하니 또 에러가 뜬다.
Could not automatically detect an ADB binary
아래와 같은 팝업창이 떴다.
Could not automatically detect an ADB binary.
Some emulator functionality will not work until a custom path to ADB is added.
This can be done in Extended Controls > Settings > General tab > Use detected ADB location.
안드로이드 에뮬레이터가 ADB를 찾을 수 없어서 발생한 문제이다. 이 문제도 윈도우 시스템 환경변수를 설정해주지 않아 발생했던 문제였다.
내 노트북 윈도우 기준으로 Android SDK가 설치된 경로는 C:\Users\rla00\AppData\Local\Android\Sdk 이고 이 경로를 ANDROID_HOME이라는 변수명으로 추가하고 JAVA처럼 PATH 변수에 %ANDROID_HOME%\platform-tools, %ANDROID_HOME%\tools ADB 경로를 추가한다.
이렇게 하면 react-native 실행 시 에뮬레이터가 자동으로 띄워진다.
그리고 나는 개인적으로 노트북에 안드로이드 스튜디오가 있으므로 이를 이용해서도 실행 과정을 알아보고 싶었다.
npx expo start
위 명령어로 프로그램을 실행하면 아래와 같이 어떤 환경에서 프로그램을 테스트 해볼 수 있는지 선택지가 주어진다. 사전에 npm install expo로 모듈 설치가 필요하다.
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Using Expo Go
› Press s │ switch to development build
› Press a │ open Android
› Press w │ open web
› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor
› Press ? │ show all commands
그리고 expo로 실행 시 실행이 안되었던 오류 내역은 아래와 같았다.
Error: could not connect to TCP port 5554
도대체 또 뭐 때문에 안되는거지 하면서 보다가 Pixel_2_API_29는 내가 마지막으로 안드로이드 개발을 할 당시 선택했던 에뮬레이터 기기 종류였다.
› Opening on Android...
› Opening emulator Pixel_2_API_29
Error: could not connect to TCP port 5554: cannot connect to 127.0.0.1:5554:
대상 컴퓨터에서 연결을 거부했으므로 연결하지 못했습니다. (10061)
단순히 vscode에서 프로그램을 실행하는 것이 아니라 expo 명령어를 사용할 때는 안드로이드 스튜디오 창도 같이 켜두고 이 에뮬레이터가 실행이 된 상태여야 했다.
사실 이 밖에도 안드로이드 빌드 단계에서부터 에러가 막 터졌는데 원인은 마지막으로 안드로이드 개발을 한 시기가 작년 2학기 중이었고 그 사이 안드로이드 스튜디오 코알라 버전이 업데이트가 되어 내 로컬의 오래된 버전 ADP이 더 이상 상용화되지 않아 생긴 문제였다. 정말 발빠르게 변화하는 개발 시장.... 안드로이드 스튜디오 공식 홈페이지에서 최신으로 교체하니까 해결 되었다.
윈도우 + AOS 기준 RN 프로젝트 초기 세팅 및 실행 방법 정리
여러 가지 시행착오를 거쳐 나에게 맞는, 오류가 이제 생기지 않는, 앞으로 개발하면서 의도한대로 구현되었는지 확인할 방법을 터득했다. 이를 아래와 같이 정리한다.
나는 개발을 안드로이드로 시작해서 그런지 안드로이드 스튜디오 상에서 에뮬을 실행시키는 게 더 편안했다.
일단 위에서 ANDROID, JAVA 윈도우 시스템 환경 변수가 제대로 세팅이 되어있다는 가정 하에...
타입스크립트 기준으로 RN 프로젝트 새로 생성하고 앱 실행에 필요한 모듈 설치, 라이브러리 설치
npx react-native init 앱이름 --template react-native-template-typescript
npm install typescript @types/react @types/react-native --save-dev
npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript
프로젝트 루트 파일이 생성이 되었으면 반드시 안드로이드 스튜디오에서 AVD를 먼저 실행한 상태에서 아래 명령어 입력하여 실행
npx react-native run-android
정상적으로 RN 초기화면이 안드로이드 스튜디오 애뮬레이터 상에 뜬다~
사실 환경 변수, 안드로이드 스튜디오 버전 업그레이드 이후에도 npx react-native run-android로 프로젝트 초기 실행하려고 하면 아래와 같은 최종!!! 마지막!!!! 에러가 떴었다. 아래 에러는 내가 또 뭐가 문제인지.... 에러가 발생한 폴더의 bin.js 코드를 찾아가서 봤었다. 근데 이 파일은 npx init을 통해 자동으로 만들어지는데 여기서 problem이 있다는게 말이 되지 않는다고 생각해서 문제의 원인을 나에게서 찾으려고 했다.
에러 내용에 플젝 경로가 한글이 포함되어 있어 깨지는 것을 확인했고 프로젝트 경로 상 모든 폴더 명을 영어로 바꿔주니까!!!!! 마지막 에러 관문까지 거쳐 드디어 위 캡쳐본처럼 정상 빌드가 되는 것을 확인했다.
BUILD FAILED in 19s
error Failed to install the app. Command failed with exit code 1:
gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
:ReactNative:Running
'[node, C:\Users\rla00\OneDrive\바탕 ?���?\"플젝 루트 폴더 이름"\"내가 지정한 앱 이름"\node_modules\@react-native-community\cli\build\bin.js, config]' command failed.
FAILURE: Build failed with an exception. * Where: Script 'C:\Users\rla00\OneDrive\���� ȭ��\"플젝 루트 폴더 이름"\"내가 지정한 앱 이름"\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 401
* What went wrong: A problem occurred evaluating script. > Process 'command 'node'' finished with non-zero exit value 1 * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights.
> Get more help at https://help.gradle.org. BUILD FAILED in 19s.
info Run CLI with --verbose flag for more details.
실제 이 게시글에서 언급한 사항이 어느 하나라도 잘 맞아떨어지지 않으면 저렇게 Welcome to Metro 문구 자체가 뜨지 않는다. 가운데 무당벌레(?) 로고를 보고 그동안 실행해보려고 노력했던 것들이 아직 해결 되려면 멀었던 거구나를 알 수 있었다. 저 무당 벌레 뜨면 안심하면 될 듯
실행부터가 다사다난했던 ReactNative....