본문으로 건너뛰기

[React Native] 개발 환경 설정(Mac)

  author: Dev.ian
  createdAt: 2022-12-15
  updatedAt: 2022-12-15

1. 사전 설정​

1-1) Android​

① Java 설치​

② Android Studio 설치​

  • Android Studio 실행 → Configure → sdk manager
    • Appearance&Behavior → System Settings → Android SDK

③ Android SDK 시스템 환경 변수 설정​

  • .zshrc 파일 에 아래의 내용을 추가

    • Android SDK Location 의 경로를 확인 하여 설정

        # Android
        export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
        export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
        export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

④ JAVA_HOME 시스템 환경 변수 설정​

  • .zshrc 파일 에 아래의 내용을 추가

      # JAVA
      export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home

1-2) iOS​

  • xCode 설치

1-3) Etc​

① Homebrew 설치​

  $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

② Node 설치​

  • 참고: 여러 버전의 node.js 관리하기

  • nodenv 설치

      $ brew install nodenv

  • nodenv 시스템 환경 변수 설정

    • .zshrc 파일 에 아래의 코드를 추가

        # Nodenv
        export PATH="$HOME/.nodenv/bin:$PATH"
        eval "$(nodenv init -)"

  • 확인

      $ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
      
      Checking for `nodenv' in PATH: /usr/local/bin/nodenv
      Checking for nodenv shims in PATH: OK
      Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 4.9.43)
      Counting installed Node versions: 1 versions
      Auditing installed plugins: OK

  • node 설치

      $ nodenv install 16.15.0

  • 기본 사용 node 버전 지정

        $ nodenv global 16.15.0

2. 공통 프로그램 설치​

2-1) Watchman​

  • installation

      $ brew install watchman

  • version

      $ watchman -v
        2022.05.16.00

2-2) Cocoapods​

  • installation

      $ sudo gem install cocoapods

  • version

      $ pod --version

  • etc: m1 mac

      $ sudo arch -x86_64 gem install ffi
      $ arch -x86_64 pod install

3. React Native 프로젝트 생성​

  • 아래의 명령어를 이용해 React Native 프로젝트를 생성한다.

      npx react-native init ${APP_NAME} --template react-native-template-typescript
      # Typescript 를 사용하여 생성하는 명령어
      $ npx react-native init ${APP_NAME} --template react-native-template-typescript

      ...

      ✔ Downloading template
      ✔ Copying template
      ✔ Processing template
      ✖ Installing CocoaPods dependencies (this may take a few minutes)
      ✖ Installing CocoaPods dependencies (this may take a few minutes)
      error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
      Please try again manually: "cd ./${APP_NAME}/ios && pod install".
      CocoaPods documentation: https://cocoapods.org/

4. Android & iOS App 실행​

Android​

  • 아래의 명령어를 실행하여 앱이 빌드되고 실행이 되는지 확인한다.

      $ npm run android

iOS​

  • 아래의 명령어를 실행하여 앱이 빌드되고 실행이 되는지 확인한다.

      # ios 디렉토리로 이동
      $ cd ios

      # update cocoapods repository
      $ pod repo update  # 또는 pod install --repo-update

      # install cocoapods dependencies (Podfile.lock 파일 생성)
      $ pod install
      $ npm run ios

그 외​

npm 대신 yarn 을 사용할 경우​

  • 프로젝트 별로 npm 을 사용할지 yarn 을 사용할지 결정할 수 있다.

  • 프로젝트의 루트Root 위치에서 아래의 명령어를 실행한다.

    • install yarn

        $ npm install -g yarn

    • Android, iOS 앱의 실행

      • Simulator(AndroidStudio, xCode)가 실행되며 앱이 실행된다.
        # run Android
        $ yarn android

        # run ios
        $ yarn ios