iOS React Native 환경 구축하기

 

이번에 알아볼 내용은 React Native 개발환경을 macOS에서 구축하기 위한 방법이다. 

React Native는 페이스북에서 개발한 오픈소스 모바일 애플리케이션 프레임워크로 기존의 Web에서 사용하는 React를 Native 모바일 애플리케이션을 개발하는데 사용할 수 있다. 하지만 완전히 호환되지는 않는다.

https://reactnative.dev/

React Native · A framework for building native apps using React

그럼 이제 본격적으로 React Native 개발환경을 macOS환경에서 구축하는 법을 알아 보겠다.

1. homebrew 설치

https://brew.sh/

React Native 공식 홈페이지에 따르면 homeBrew를 이용하여 구축하는 방법을 소개 하고 있다. homebrew는 macOS나 리눅스에서 사용할 수 있는 패키지관리자로 리눅스에서 yum, apt와 같은 것이라 보면되겠다. macOS에서도 여러가지 프로그램을 설치하거나 환경을 구축할 때 디펜던시 등을 고려하여 설치해야하는데 이를 편리하게 해주는 프로그램이다.

homebrew의 설치 방법은 매우 간단하다.  homebrew홈페이지( https://brew.sh/)에서 소개하고 있는 설치 명령어를 실행하면 알아서 잘 설치가 된다. 

다음은 homebrew설치 명령어 이다. 

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

설치가 완료되고  brew -v 명령어를 통해 버전을 확인 할 수 있다.

 

2. node & watchman 설치하기

React Native 공식홈페이지에서 iOS개발환경을 세팅하는 방법이 소개되어있다. 

https://reactnative.dev/docs/environment-setup

React Native · A framework for building native apps using React

 

아래 명령어를 통해 node와 watchman을 설치 해준다.

brew install node
brew install watchman

 이미 node가 설치 되어있다면 10버전 이상이면 따로 설치할 필요는 없다고 한다. watchman은 페이스북에서 개발된 파일시스템 모니터링 툴이다.

3. Xcode CLI Tool 설정 & 시뮬레이터 다운로드 & Cocoapods 설치

iOS앱을 빌드하려면 기본적으로 xcode가 설치 되어 있어야한다. 앱스토어에 들어가 xcode를 설치한다. 또한 앱을 테스팅하기위한 ios시뮬레이터도 같이 설치해준다.

Xcode가 설치 되어 있다면 CLI TOOL을 세팅해줘야 한다. 

Xcode를 실행하고 [Preferences] - [Location]에서 Command Line Tools를 다음과 같이 설정해준다.

 [Preferences] - [Components]에서 시뮬레이터를 설치해준다.

다음 Cocopods를 설치해야하는데 cocopods는 ios, macos 프로젝트의 의존선 관리자로 설치 하는 것이 좋다. 다음 명령어로 cocoapods를 설치 할 수 있다.

sudo gem install cocoapods

4. React Native CLI 사용하기

React Native 프로젝트를 생성하고 관리하기위해 cli명령어를 제공한다. 다음 명령어를 통해 글로벌로 설치 가능하다.

npm install -g react-native-cli

하지만 React Native 홈페이지에서는 전역적으로 설치된 react-native-cli가 여러 다른 문제를 이르킬수 있으므로 권장하지 않으며 npx react-native <command> 명령어를 사용하도록 권장하고 있다. 기존에 react-native-cli가 설치 되어 있다면 지우라고 권장한다.

npx react-native <command>

 

5. React Native 프로젝트 생성하기

이제 개발환경이 구축 되었다면 프로젝트를 생성해보자. 프로젝트는 적당한 위치에서 다음 명령어를 통해 생성 할 수 있다. 

npx react-native init myReact

프로젝트가 정상적으로 생성되면 다음과 같은 화면이 나온다. 프로젝트 생성시간은 꽤 오래걸리므로 기다리자. 

6. 앱 실행하기 

앱을 빌드하여 실행해 볼 수 있는 방법에는 두가지가 존재한다. 

생성된 프로젝트 경로에서 run-ios 명령어를 사용하거나 xcode workspace파일을 xcode로 열어 직접 실행하는 방법이다.

이렇게 앱을 시뮬레이터에서 실행해본 모습이다.

이상으로 MacOS에서 React Native 개발환경을 구축하는 방법에 대해 알아보았다.

 

참고

* https://reactnative.dev/docs/environment-setup