환경세팅

설치

brew install node
brew install watchman
brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

Android

1. 안드로이드 스튜디오 설치

안드로이드 스튜디오 를 설치하고 아래 항목들을 체크해준다.

Android SDK
Android SDK Platform
Android Virtual Device

2. Android SDK 설치

안드로이드 스튜디오 SDK Manager에서 Android 10.0 버전을 체크하여 설치해준다.

Inter x86 Atom_64 System Image or Google APIs Inter x86 Atom System Image

“SDK Tools” 탭으로 이동하여 아래 두가지 항목을 체크한 후 Apply 해준다.

“Android SDK Build-Tools” 29.0.2
“Android SDK Command-line Tools (latest)”

3. `ANDROID_HOME` 환경 변수

vi ~/.zshrc

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

아래 명령어를 통해 환경변수가 잘 지정되었는지 확인한다.

source ~/.zshrc
echo $ANDROID_HOME

명령어들

상태 확인

아래 명령어를 통해 환경 세팅이 잘되었는지를 확인할 수 있다.

npx @react-native-community/cli doctor

[실행 결과]

팁들

실행 오류

yrun 명령어를 통해 실행 시 오류나는 상황에 접하면 먼저 Xcode나 Android Studio를 통해 해당 디렉토리를 열어 빌드 후 원인을 찾는 것이 빠르고 친절하다.

No bundle URL present

iOS 디바이스에서 No bundle URL present 에러가 발생할 경우 프로젝트 루트 디렉토리에서 다음 명령을 실행해 iOS 빌드 디렉토리를 삭제하고 세션(8081 포트)을 삭제한다.

rm -rf ios/build/; kill $(lsof -t -i:{PORT}); react-native run-ios

Optional

다음 명령으로 Bash 구성파일 .bashrc에 추가하여 이러한 오류가 발생하지 않도록 한다.

echo "alias rni=\"kill \$(lsof -t -i:8081); rm -rf ios/build/; react-native run-ios\"" >> ~/.bashrc; source ~/.bashrc

Android 실행 오류

General error during semantic analysis: Unsupported class file major version 60

원인

위 오류의 원인은 jdk 버전이 지원되지 않는 버전이라서 발생한다. jdk 여러 버전이 설치 되어있는 경우 버전을 명시해주지 않으면 이런 오류가 발생할 수 있다. (이때의 경우 jdk 16 버전으로 지정되어 있었다.)

해결

설치되어있는 jdk 버전 확인

/usr/libexec/java_home -V

Matching Java Virtual Machines (3):
16.0.2 (x86_64) "Oracle Corporation" - "OpenJDK 16.0.2" /Users/jigeol/Library/Java/JavaVirtualMachines/openjdk-16.0.2/Contents/Home
15.0.4 (x86_64) "Azul Systems, Inc." - "Zulu 15.34.17" /Users/jigeol/Library/Java/JavaVirtualMachines/azul-15.0.4/Contents/Home
1.8.0_292 (x86_64) "AdoptOpenJDK" - "AdoptOpenJDK 8" /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home
/Users/jigeol/Library/Java/JavaVirtualMachines/openjdk-16.0.2/Contents/Home

jdk 버전 변경

export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)

변경된 버전 확인

java -version
openjdk version "1.8.0_292"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_292-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.292-b10, mixed mode)

React Native Absolute imports

// AS-IS
import foo from '../../../../../foo';

// TO-BE
import foo from 'src/foo'

패키지 설치

ya -D babel-plugin-module-resolver

babel.config.ts

plugins: [
[
  'module-resolver',
  {
    root: ['.'],
    extensions: [
      '.ios.ts',
      '.android.ts',
      '.ts',
      '.ios.tsx',
      '.android.tsx',
      '.tsx',
      '.jsx',
      '.js',
      '.json',
    ],
    alias: {
      '@src': './src',
    },
  },
],

tsconfig.json

"baseUrl": "./src",
 "paths": {
   "@src/*": ["./*"]
 },

캐시 비우고 재시작

yst --reset-cache

React Native 앱 이름 변경

app.json 파일 수정

{
  "displayName": "{APP_NAME}"
}

strings.xml 파일 수정

<string name="app_name"> { APP_NAME }</string>

Info.plist 파일 수정

<key>CFBundleDisplayName</key>
<string>{APP_NAME}</string>

ScrollView VS FlatList

앱 개발을 하며 스크롤되는 스크린을 개발해야했는데 React Native ScrollView 문서를 보니 FlatList라는 것도 있다는 사실을 알게 되었습니다.
문서에서 소개하고 있는 내용으로는 ScrollView는 한꺼번에 모든 하위 구성요소를 렌더링 하기 때문에 콘텐츠가 많은 스크린의 경우 부하가 생길 수 있다고 합니다. (렌더링 속도 느려짐, 메모리 사용량 증가)
반면 FlatList는 항목이 나타나야 하는 시점에 로딩을 하고 메모리와 처리 시간을 절약하기 위해 화면에 보이지 않는 요소들은 제거한다고 합니다.

Firebase 설정 중 삽질

GoogleService-Info.plist Not Found

이것 때문에 삽질 이틀 .. Xcode에서 ‘Add Files to {PROJECT}‘로 잘 넣어줬는데도 자꾸 찾을 수 없다며 Crash 됐다. /ios 루트 경로에 넣어줄 뿐만 아니라 Build Phases > Compile Sources 에도 잘 들어가 있는지 확인해야 한다.