Code Logs

22.03.26

Mac OS에서 iOS 애플리케이션 개발을 위한 React Native 개발환경 구성하기
고양이 빵 Cat bread - 세마리의 고양이와 홈베이킹 이야기

React Native - 개발환경 구성하기

Mac OS에서 iOS 애플리케이션 개발을 위한 React Native 개발환경 구성하기

Table of contents

  1. CLI
    1. Expo CLI
  2. React Native CLI
  3. Prerequisites
    1. Node 설치
    2. Watchman 설치
    3. XCode 설치
    4. XCode Command Line Tools
    5. CocoaPods
    6. React Native CLI
  4. Create React Native Application
    1. Application 실행하기

CLI

React Native를 통해 Cross-platform 애플리케이션을 개발한다면 Expo CLI 또는 React Native CLI를 선택적으로 사용 할 수 있다. 두 CLI는 장단점을 가지고 있고 개발환경을 구성함에 있어 장단점의 이해를 통해 상황에 맞는 적절한 spec을 정할 수 있다.

Expo CLI

Pros

  • XCode나 Android Studio에 의존하지 않고 각 플랫폼의 애플리케이션을 빌드 및 배포 할 수 있다

    iOS 환경의 애플리케이션을 개발하기 위해서 반드시 Mac을 이용해야하고 XCode를 사용해야 하지만 Expo CLI를 사용한다면 개발자의 개발환경 (Windows or Mac OS)과 관계 없이 다양한 플랫폼의 애플리케이션을 개발 할 수 있다. Expo CLI는 작성한 React native 소스 코드를 서버로 전송해 서버 피씨에서 빌드를 수행하기 때문이다. (여러 개발자가 Expo를 통한 빌드를 요청할 경우 빌드 대기열에서 기다리게 되고 이 시간이 꽤 오래 걸린다고 한다.)

  • OTA (Over The Air) Update

    애플리케이션의 수정사항이 발생하여 새로운 Release가 필요할 경우 App Store 또는 Google Play Store의 심사를 통과해야 한다. 특히나 App Store의 심사기준은 까다롭거니와 절차를 모두 완료 하는데 까지 꽤 오랜 시간이 소요된다. OTA Update는 이런 애플리케이션 마켓의 심사를 거쳐 새로운 소스를 배포하는 것이 아닌 빌드된 Javascript 파일을 Cloud에 업로드 하고 애플리케이션은 이 Javascript 파일을 다운 받는 것을 통해 새로운 소스코드를 즉시 반영 할 수 있다.

  • 쉽다

    Expo CLI는 개발환경을 구성하기 위해 해야 할 일들을 대폭 줄여준다. 더불어 XCode 또는 Android Studio에서 진행해야 하는 설정 (ex. splash image)들을 간단히 json 형식으로 처리 할 수 있다.

Cons

  • Expo CLI를 통해 빌드된 애플리케이션의 용량이 커지게 된다.

    Expo CLI로 빌드된 애플리케이션은 기본적으로 꽤 많은 API를 내장하고 있기 때문에 iOS의 경우 대략 20mb, 안드로이드의 경우 약 15mb의 크기를 갖게 된다. 애플리케이션 내부에서의 API 사용 여부와 관계 없이 제공되는 모든 API를 포함하여 빌드되기 때문이다.

  • 모든 Native API를 포함하고 있지 않다.

    Expo CLI를 사용한다면 다양한 Native API를 아주 쉽게 사용 할 수 있다. 하지만 모든 API가 포함되어 있는 것은 아니기 때문에 경우에 따라 제공되지 않는 API를 사용해야 한다면 eject 해야한다.

React Native CLI

상용서비스를 목적으로 하는 애플리케이션은 결국 React Native CLI를 사용하게 될 가능성이 크다. 간단하게 애플리케이션을 빌드하고 테스트 하기 위해서 Expo CLI는 더할 나위 없이 좋은 도구이지만 그를 위해 가지고 가야하는 제약 사항들이 꽤나 치명적이다.

본 포스팅에서는 React Native CLI를 이용해 MacOS 환경에서 iOS 애플리케이션 개발을 위한 환경 구성 절차를 정리한다.

Prerequisites

Node 설치

웹프론트엔드 개발에 있어서 Node의 설치는 더이상 선택사항이 아니다. nvm을 통해 적절한 버전의 노드를 설치 및 사용 할 수 있도록 구성하는 것이 좋다.

React Native 개발을 위해서는 v12 이상의 Node를 설치해야한다. - nvm 설치

Watchman 설치

Facebook이 만든 Open source 툴로 파일시스템의 변경사항을 감지한다, brew를 통해 설치 할 수 있다.

$ brew install watchman

XCode 설치

XCode는 App Store를 통해 다운받을 수 있다. v10 이상의 XCode를 설치해야한다.

XCode Command Line Tools

XCode를 실행하고 Preference > Locations > Command Line Tools를 선택하고 가장 최신의 Command Line Tool을 선택한다.

CocoaPods

CocoaPods는 Swift와 Objective-C 디펜던시 매니저다. Ruby로 개발되었고 Mac에서 기본적으로 제공하는 Ruby 버전을 이용해 설치 할 수 있다.

$ sudo gem install cocoapods

Apple Silicon (M1)의 경우 공식문서의 가이드를 따라 ruby gem을 통해 cocoapods을 설치하면 react-native-cli를 사용할 때 Error: Failed to install CocoaPods dependencies for iOS project 에러를 발생시키기도 한다 이런 경우 brew를 통해 cocoapods를 설치하면 문제를 해결 할 수 있다.

React Native CLI

React Native CLI는 다른 CLI tool과는 다르게 전역 디펜던시로 설치하지 않고 npx를 통해 실행시점에 최신 버전을 사용한다.

Create React Native Application

아래의 커맨드를 통해 새로운 React Native 애플리케이션을 생성 할 수 있다.

$ npx react-native init ${APPLICATION_NAME}

만약 typescript를 이용한 React Native 프로젝트를 구성하고자 할 경우 아래의 커맨드를 입력한다.

$ npx react-native init ${APPLICATION_NAME} --template react-native-template-typescript

Typescript 템플릿의 프로젝트를 설치할 경우

만약 위의 커맨드가 정상적으로 실행되지 않을 경우, 전역으로 설치된 구버전의 react-native-cli가 존재하는지 확인하고 만약 존재한다면 삭제한 뒤 다시 시도한다.

Application 실행하기

Metro

Metro는 react-native에서 사용하는 번들러다 아래이 커맨드를 통해 Metro를 실행한다.

$ npm run start

iOS 시뮬레이터에서 실행하기

Metro를 실항 한뒤 새로운 터미널을 열고 아래의 커맨드를 입력한다.

$ npm run ios

이제 프로젝트가 시뮬레이터에 애플리케이션으로 설치되고 시뮬레이터 내부에서 결과를 확인할 수 있다. 이전에 Metro를 실행 시킨 터미널을 통해 시뮬레이터와의 interaction도 가능하다. 만약 USB를 통한 디버깅을 하고 있다면 Metro를 통해 USB에 연결된 디바이스와도 interaction 할 수 있다.

참고

댓글