React Native 개발 환경 구축 절차(Mac)

기본 절차는 아래 사이트를 참조했다.

 

>> 참조: https://dev-yakuza.github.io/ko/react-native/install-on-mac/

맥(Mac)에 react native 개발 환경 구축하기

 

 

 

1. Homebrew 설치

%> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
%> brew --version

 

2. node.js 설치
(node 버전이 15 이상이면 빌드 시 오류 발생할 수 있음! 오류를 수정하거나 14 이하 버전으로 설치 권장)

%> brew install node | brew install node@14 && brew link node@14 --force
%> node --version

 

3. Watchman 설치

%> brew install watchman
%> watchman --version

 

4. React Native 설치

%> npm install -g react-native-cli
%> react-native --version

 

5. Xcode 설치
Install from AppStore

 

 

6. CocoaPods 설치

%> sudo gem install cocoapods
%> pod --version

 

7. Yarn 설치

%> brew install yarn
%> yarn --version

 

8. JDK 설치

%> brew tap AdoptOpenJDK/openjdk
%> brew cask install adoptopenjdk8
%> java -version
%> javac -version

 

9. Android Studio 설치
Install from https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android 스튜디오

정상 설치 여부 확인

%> adb

 

10. Visual Studio Code 설치
Install from https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

관련 플러그인 설치:

- Android
- Android iOS Emulator
- Debugger for Chrome
- Debugger for Java
- ESLint
- Git History
- Gradle Language Support
- Java Extension Pack
- Java Test Runner
- Korean Language Pack for Visual Studio Code
- Language Support for Java(TM)
- Maven for Java
- Prettier - Code formatter
- Project Manager for Java
- React Native Tools
- Visual Studio IntelliCode
- Visual Studio Keymap
- XML Formatter
- Flow Language Support

 

 

11. React Native 프로젝트 빌드

%> rm -f *lock.json *.lock
%> rm -fr node_modules
%> yarn clear
%> cd ios
%> rm -fr Pods
%> pod install
%> cd ..
%> yarn build ios

(yarn 빌드 스크립트인 clear와 build는 수작업으로 생성해서 ./scripts 폴더에 두어야 함)

 

 

 

 

----- 이하 문제 발생 시 참고 내용 -----

 

 

: openssl 관련 오류 시 참조 경로 수정

%> ls -al /usr/local/Cellar/openssl
  - 1.0.2q
%> brew switch openssl 1.0.2q
%> yarn clear

 

: npm 오류 시 수정

%> yarn global add npx

 

: 패키지 버전 조정(최신 버전에서 안되면 동작하는 버전으로 고정해서 사용)

%> yarn add -D @react-native-community/cli@4.3.0
%> yarn add @react-native-community/cli-platform-android@4.3.0
%> yarn add react@16.9.0
%> yarn add @react-native-community/cli@3.0.4
%> yarn add @react-native-community/cli-platform-android@3.0.3
%> yarn add @react-native-community/cli-platform-ios@3.0.0
%> yarn add -D @react-native-community/cli-tools@3.0.0
%> yarn add -D @react-native-community/cli-types@3.0.0

 

: PropTypes.number unexpected reserved type number 오류 수정을 위해

%> yarn add @gregfrench/react-native-wheel-picker
: — android/settings.gradle, android/app/build.gradle 수정
: — js/screens/Board.js, js/elements/WheelPicker.js 수정

%> yarn add @react-native-community/toolbar-android

 

: AsyncStorage 최신 버전 변경
import 패키지를 react-native -> @react-native-community/async-storage로 변경

import { AsyncStorage } from …… -> import AsyncStorage from …

 

사용 예:

@observable
hydrated = false;

when(
  () => store.hydrated,
  () => do.something()
);

 

: iOS에서 정적 이미지(.gif, .png, jpg 등)가 나오지 않을 때

최신 MacOS와 최신 XCode 버전에서 새로 생긴 버그(?)다.

현재 나와 있는 유일한 해결 방법은 패치를 추가 설치하는 것뿐.

>> 참조: github.com/facebook/react-native/issues/29279

Image cannot show image in iOS 14 · Issue #29279 · facebook/react-native

%> yarn add react-native-fix-image
%> npx react-native-fix-image
%> yarn build ios

이후 yarn clear 명령어에 npx react-native-fix-image 명령어를 추가해 넣어 놓으면

빌드/클린 작업 시 자동으로 이미지 표시 문제가 수정 된다.

 

 

: Mobx와 Mobx-Utils를 추가 설치/테스트해 보려면?

%> yarn add mobx@5.15.6
%> yarn add mobx-react@6.3.0
%> yarn add mobx-utils@5.6.1

 

: Mobx decorator를 사용하려면(RN 0.63)?

%> yarn add @babel/plugin-proposal-class-properties
%> yarn add @babel/plugin-proposal-decorators
%> yarn add babel-preset-react-native
%> yarn add @babel/preset-flow

추가적인 es7 데코레이터 설치도 필요하고,

%> yarn add --dev core-decorators

.babelrc 파일에 데코레이터 사용 정의도 해야 한다.

.babelrc
{
  "presets": [
      "mobule:metro-react-native-babel-preset",
      "@babel/preset-flow"
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", {"legacy": true}],
        ["@babel/plugin-proposal-class-properties", {"loose": true}]
    ]
  }

 

 

: iOS에서 QRCode scanner가 동작하지 않고 하얀바탕에 점3개(...)만 표시된다면?

역시 최신 XCode에서 생긴 버그(?)다. 구 라이브러리를 쓰면 오류가 절대 잡히지 않는다.

관련 라이브러리를 모두 최신으로 업데이트해야 한다.

{
  ...
  "react-native-camera": "^3.11.1",
  ...
  "react-native-permissions": "^2.2.2",
  "react-native-qrcode-scanner": "^1.4.1",
  ...
}

 

: 어느날 갑자기 빌드 오류가 생긴다면?

ios 앱 빌드를 할 때 가끔 발생하는 오류인데, 뜬금없이 다른 프로젝트 폴더에 있는 'yoga.modulemap' not found 오류라든가, 또는 멀쩡히 잘 있는 Arm7, Arm64 빌드 정보가 없다든가 하는 오류가 발생할 때가 있다. 그럴 때는 소스나 설정에 뭐가 잘못됐나? 하는 의문을 가지기 이전에 재부팅을 먼저 하는 것이 좋다. 10중 8, 9의 확률로 멀쩡히 정상 빌드가 될 것이다. (ㅉㅉㅉ Mac도 글렀어... ㄷㄷ)