원래 같았으면 이전 포스트 다음으로 바로 성능 개선에 관한 이야기를 다루려고 했는데, 어떠한 기업에서 RN으로 실시간 과제를 본다고 해서 호다닥 공부해 봐야되기에 다음으로 미루겠습니다 ; (

위에서 짧게 말했듯이 오늘은 처음으로 맛보는 React Native 초기 설정에 관해서 겪었던 이야기를 써내려가려고 한다.

---

React Native

React Native란

React로 어플을 만들 수 있는 프레임워크이다. 안드로이드의 Kotiln, IOS의 Swift 처럼 앱을 만들 수 있는데, 자바스크립트 환경으로 두 기종 모두 구동 가능하게 만들 수 있다는 것이 큰 장점인듯 하다.

react에서 썼던 것 처럼 타입스크립트도 적용할 수 있으며, 스타일드 컴포넌트로 CSS 코드를 작성할 수도 있다.

노마드 코더 왈,
React를 할 줄 안다면? 그것도 useState, useEffect 정도만 잘 쓰면 3%의 추가 지식만 배우면 된다. 라고 하더라

이번 포스트에서 React Native의 구조를 다루기보다는 설치 환경을 조성하면서, 느낀 깊은 빡침🤬을 다루려고 하며, 나와 같은 피해자 분들이 발생하지 않게 조금이나마 힘을 보태려고 한다.

본 편으로 넘어가기 전에 개발환경을 구성하는데에 있어 알아야되는 간단한 설명을 먼저 하려고 한다.

Expo / React Native Cli

React 기반이긴 하지만, 사실상 웹앱보다는 앱에 대한 성향이 확고하기도 하고, 다른 OS들 끼리 호환을 위해 Build 된 프로젝트는 JAVA 기반이다. 아, 물론 우리가 작성하는 코드는 물론 JS 혹은 TS 이다.

위의 사진은 RN 프로젝트를 만들고 처음으로 Github에 올린 Repo의 기술 스택 분포표다.
JAVA.. 라는 주황색 친구가 43.9%를 차지하고 있는 것을 볼 수 있는데, 이것때문에 일반적으로 JS 세팅하는 것보다 초벌을 한번 거쳐줘야된다.

React Native 가 JS 에서 App까지 되가는 과정

위의 사진을 보면 APK, IPA 같은 native app은 각각 Swift & Objective-C , java & C/C++ (Kotlin) 으로 이루어져있다는 것을 알 수 있다.

그런데 우리같이 자바랑 살짝 거리가 먼 프론트엔드 개발자들이 쉽게 앱을 개발할 수 있게 JS 코드와 CSS 코드 등으로 구조를 설계해 놓으면 Bridge 역할을 RN 내에서 기능하여 추후에 빌드 등의 일련의 작업을 거치면 해당 기능들을 각 OS에 최적화 되어있는 코드로 변환을 해준다는 이야기이다.

그런데 우리가 그냥 흔히 쓰던 VSCode 로 작업하면 알아서 해주느냐.. 그것은 아니다.
필요한 내부 패키지 등은 기존에 어플을 만드는데 사용하던 Tool을 이용을 해야 환경을 조성할 수 있다. IOS는 Xcode, 안드로이드는 Android Studio 에서 가능하다.

아무튼.. 다시 이 본문의 주요 내용으로 넘어가서 React Native 를 생성하는 방법에는 크게 2개가 있다.

• Expo
• React Native Cli

일단 이름이 React Native Cli 이니까 이게 찐 아닌가요? 라고 할 수도 있는데 React Native 공식 홈페이지의 설치관련 부분 을 보면 Expo가 맨처음으로 나와있다.

이번 일련의 경험을 겪음으로써 Expo가 맨처음으로 언급된데에는 편의성 의 장점이 크기에 그렇게 해놓은 것 같다는 생각이 든다.

Expo

Expo CLI는 React Native로 어플을 만드려는 개발자들에게 편리함을 최우선으로 제공해준다. 이 툴의 큰 장점이라고 말할 수 있는데, 왜 그러냐..! 우리가 JS 코드를 짤 때 사용하던 VScode나 인텔리제이에서 작업을 준비하는 것과 크게 차이나지 않은 개발 환경을 구축할 수 있기 때문이다.

또한, 안드로이드 같은 경우에는 안드로이드 스튜디오를 통해서만 개발 서버를 열어 작업물이 어떻게 구현되고 있는지 확인을 할 수 있는데, Expo 앱을 자신 폰에 깔아주면 연동되어 실시간으로 확인이 가능하다.

이러한 장점들로 인해 개발환경을 구성하는데 있어 큰 어려움 없이 진행하고 개발할 수 있게 된다.

물론 단점도 있다.

• Java, Kotlin, Object-C, Swift를 추가적으로 작성이 불가능하다. 즉 native 파일 제어가 불가능하다
• Expo에서 제공하는 기능들만 활용 가능하다.

그리고 사람들이 RN client를 많이 쓰는 가장 큰 이유인 개발을 할 때 자유도가 떨어진다 의 단점을 지니고 있다.

그러므로 Expo는 규모가 적으며, 빠른 개발환경을 구축할 때 용이하게 사용된다.

React Native Cli

react 및 react native를 개발한 메타의 공식적인 설치 툴이다. 외부 툴인 Expo와 다르게 공식마크가 박힌 요 녀석은 개발의 자유도가 넓으며, 이미 존재하고 있는 RN Cli로 만든 레퍼런스를 참고하기 용이하다. 그리고 추후에 JAVA 파일에 손을 대야된다면, Expo와 다르게 제어가 가능하다.

그리고 단점은 개발환경 구축인데 왜 그런지 내가 근 2일간 겪은 상황을 나열하며 설명하도록 하겠다.

에러 발생 (React Native Cli 개발환경 구성)

앞서 말했듯이 React Native Cli는 Android Studio에서 설정을 8할 이상 구성해야된다.
자세한 개발환경을 조성하는 것은 아래의 언급을 활용하길 바란다.
정말 어려워서 여러 블로그, 질문글 등을 활용했기에 난잡할 수도 있다.. ㅠ

💡참고해보세요
1. 국밥 : React Native 공식 홈페이지
2. 반찬 (김치) : 안드로이드 스튜디오 및 환경변수 설정
3. 필수 부재료 (다대기 같은 존재) : Java 11 버전 설치
4. 같이 곁들여 먹으면 정말 도움이 되는 블로그

기존 루트에 한글의 폴더가 섞인 프로젝트

상단의 글들을 참고하여 react native cli를 설치 후, sdk (현재 13버젼의 티라미수) 및 환경변수 설정을 모두 마치고, npm run start -> a 키로 안드로이드 환경을 열어주었다.
그러자 빌드 에러를 마주하게 되는데..

BUILD FAILED in 3s

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
:ReactNative:Unexpected empty result of running '[node, C:\Users\버들?��\Documents\Project\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js, config]' command.
:ReactNative:Running '[node, C:\Users\버들?��\Documents\Project\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js, config]' command failed.

처음에 에러 내용을 무언가 Config 파일이 잘못 되어 빌드가 안된 것이라 생각했었다.
하지만 여러 글들을 비교해본 결과, 바로 npx react-native@latest init 프로젝트명 으로 만들어낸 직후라서 원인이 아닌것으로 판명났다.

그리고 알아낸 다른 가능성은 바로 프로젝트 경로에 한글이 들어간 것이다.
내 윈도우 user name은 한글로 되어있으며, 프로젝트들을 내 문서에서 모아두고 있었기에, 이 경로 또한 한글로 된 이름\document\projects로 이루어져 있을 수 밖에 없다.

React Native를 실행할 때는 경로에 한글이 있으면 안된다고 한다. 따라서 경로를 다시 지정하여 프로젝트를 설치 후 실행하였더니, 해당 문제를 해결할 수 있었다.🤓

버전 관련 에러 발생

다시 클라이언트 서버를 실행하니 또 에러가 발생한다.

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\RN\android\app\build.gradle' line: 1 

* What went wrong:
A problem occurred evaluating project ':app'.       
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
      Your current JDK is located in C:\Program Files\Java\jdk1.8.0_211\jre
      You can try some of the following options:    
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

문제의 에러 코드는 이러하다.

처음에 나는 SDK가 잘 인식이 되지 않아 발생한 문제라 생각하고 몇 시간의 삽질을 하게 되었는데..

• SDK 재설치
• 안드로이드 스튜디오 재설치 및 환경설정 재설정
  등등..

위에처럼 Sdk라는 폴더도 따로 생성해주고 여기에 환경 변수도 다 연결해주고 이랬다..

하지만 해결은 되지 않았고, 터미널 로그를 자세히 되살펴보니 이런 구절을 보게되었다.
Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
👉 자바 버전이 낮으니 11로 써주세요~ 의 뜻이겠지.

그래서 상단 인용에서 언급했던 필수 부재료 (다대기 같은 존재) : Java 11 버전 설치 를 참고하여 JAVA 11을 설치하여 기존 JAVA가 모여있는 폴더에 위치시켰다.
기존 JAVA 폴더에서 환경변수 및 Path 설계가 되어있으므로 같은 위치에 두면 환경변수를 크게 건들이지 않아도 되서 그렇게 해놨다.

터미널에서 java -version 으로 자바 버전이 11로 되어있는 것을 확인하고 다시 VSCode에서 서버를 실행하였다.

결과는 실패였다.

여기 블로그를 통해서 jdk 11 설정을 추가로 Gradle에 넣어줘야한다는 것을 알아내고 똑같이 하려고 했으나...

없다 🤯

위와 아래 사진이 무엇이 다를까?
같은 Settings 에서 Gradle projects 에서 JDK를 따로 지정해줄 수 있는 칸이 없다는 것이다.
물론 내 안드로이드 스튜디오는 최. 신 버전임에도 불구하고 말이지.

그런데 또 웃긴 것은 갑자기 된다?

정확한 이유를 모르겠지만, 아마 환경변수가 적용되는데 까지 시간이 조금 걸린게 아닌가... 라는 추측을 해본다.

어쨋든 성공이긴 하지만, 왜 되는지.. app/src/build.gradle 파일에서 import com.android.build.OutputFile 구절에 unable to resolve class com.android.build.OutputFile 이라는 에러가 발생했음에도 왜 잘되는지가 궁금하긴 하다.

할 일이 지금 많기에 추후에 알게되면 추가로 달아놓으려고 한다.

reference:
https://reactnative.dev/docs/environment-setup?guide=quickstart