[React Native] Mac에서 React Native 개발 환경 세팅

오늘은 Mac으로 React Native 개발 환경 세팅하는 방법에 대해 포스팅해보려고 합니다. 😄

먼저 React Native에 대해 간략히 알아보고, 초기 세팅하는 방법에 대해 소개해 드리겠습니다.

React Native란?

React Native는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다.
하나의 프로그래밍 언어로 iOS와 Android 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼 입니다.

이러한 React Native의 장단점을 간략히 알아보겠습니다. 😀

React Native 장점

하나의 코드로 iOS, android 앱을 동시에 개발하기가 쉽습니다.

emulator 및 simulator의 개발 툴이 없어도 Expo 환경에서 개발하고 배포가 가능합니다.

Play Store나 App Store에 배포된 앱을 코드 푸시를 통해 심사 없이 업데이트가 가능합니다.

코드가 변경되면 자동으로 새로고침 되는 live-reload와 코드가 변경되면 변경된 딱 그 부분만 렌더링 되는 hot-reload를 지원합니다.

React Native 단점

네이티브에 비해 복잡한 UI를 구현하기 힘듭니다.

네이티브 개발 방식보다 성능이 떨어질 수 있습니다.

네이티브 개발에 비해 다양한 API를 사용하지 못합니다.

iOS, android의 네이티브 부분을 개별적으로 개발해야 하는 문제가 발생할 수 있습니다.

1. Homebrew 설치

Homebrew는 Mac에서 필요한 패키지를 설치하고 관리하는 Mac용 패키지 관리자입니다.

Homebrew를 사용하면 Mac에서 간단하게 필요한 패키지를 설치할 수 있습니다.
(Node.js, Watchman, JDK 패키지 모두 homebrew를 사용하여 설치할 예정입니다.)

1. Homebrew 설치

터미널에 아래 명령어를 입력하여 Homebrew를 설치합니다.

M1 칩이 아닌 경우

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

M1 칩의 경우

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/nrubin29/bea5aa83e8dfa91370fe83b62dad6dfa/raw/48f48f7fef21abb308e129a80b3214c2538fc611/homebrew_m1.sh)"

2. Homebrew 버전 확인

Homebrew가 잘 설치되었다면, 아래의 명령어를 통해 Homebrew의 버전을 확인할 수 있습니다.

brew --version

2. Nodejs 설치

React Native는 Javascript의 언어로 된 프레임워크이므로, Javascript의 런타임인 Nodejs가 필요합니다.

1. Nodejs 설치

터미널에 아래 명령어를 입력하여 Nodejs를 설치합니다.

brew install node

2. Nodejs 버전 확인

Nodejs가 잘 설치되었다면, 아래의 명령어를 통해 Nodejs의 버전을 확인할 수 있습니다.

node --version

3. npm(node package manager) 버전 확인

Nodejs를 설치하면, 기본적으로 Nodejs 패키지 매니저인 npm도 같이 설치됩니다. npm을 통해 Nodejs 환경에서 실행되는 모듈들을 다운로드할 수 있습니다.

npm이 잘 설치되었다면, 아래의 명령어를 통해 npm의 버전을 확인할 수 있습니다.

npm --version

3. Watchman 설치

React Native에서는 디버그 모드에서 소스코드의 추가, 변경이 발생하면 hot-reload를 하기 위해 Watchman을 사용하고 있습니다.

Watchman은 특정 폴더나 파일을 감시하다가 변화가 생기면, 특정 동작을 실행하도록 설정하는 역할을 합니다.

1. Watchman 설치

터미널에 아래 명령어를 입력하여 Watchman을 설치합니다.

brew install watchman

2. Watchman 버전 확인

Watchman이 잘 설치되었다면, 아래의 명령어를 통해 Watchman의 버전을 확인할 수 있습니다.

watchman --version

• M1 기준 watchman의 버전으로는 최근에 업그레이드된 날짜가 뜨지만, M1이 아닌 경우는 버전이 뜹니다. (ex. 4.9.0)

4. React Native CLI 설치

React Native의 개발 방법으로 Expo CLI, React Native CLI가 있습니다.

Expo CLI는 간단하고 편리하게 이용이 가능하지만 Expo에서 제공하는 기능만 사용 가능하여 개발에 제한적이기 때문에, 저는 React Native CLI를 사용하겠습니다.

React Native CLI를 npm을 통해 설치해 보겠습니다.

1. React Native CLI 설치

터미널에 아래 명령어를 입력하여 React Native CLI를 설치합니다.

npm install -g react-native-cli

2. React Native CLI 버전 확인

React Native CLI가 잘 설치되었다면, 아래의 명령어를 통해 React Native CLI의 버전을 확인할 수 있습니다.

npx react-native —version

5. Xcode 설치

React Native로 iOS 앱을 개발하기 위해서는 iOS 개발 툴인 Xcode가 필요합니다.

Xcode는 iOS를 위한 앱을 만들 수 있는 공식 통합 개발 환경(IDE)입니다.

1. Xcode 설치

아래의 링크를 통해 앱 스토어에서 Xcode를 다운로드합니다.

https://apps.apple.com/us/app/xcode/id497799835?mt=12

2. Commond Line Tools 설정

Xcode 설치가 완료되면, Command Line Tools를 설정해야 합니다.

Xcode를 실행하여 상단 메뉴의 Preference를 눌러줍니다. Preference > Locations로 이동하여 가장 최신의 Commond Line Tool을 선택해 줍니다.

6. Cocoapods 설치

React Native로 iOS 앱을 개발하기 위해서는 Cocoapods가 필요합니다.

Cocoapods는 React Native로 iOS 앱을 개발하려면 꼭 필요한 의존성 관리자입니다.

1. Cocoapods 설치

터미널에 아래 명령어를 입력하여 Cocoapods를 설치합니다.

sudo gem install cocoapods

2. Cocoapods 버전 확인

Cocoapods가 잘 설치되었다면, 아래의 명령어를 통해 Cocoapods의 버전을 확인할 수 있습니다.

pod --version

7. JDK 설치

React Native로 Android 앱을 개발하기 위해서는 JDK(Java Development Kit)가 필요합니다.

JDK는 자바 애플리케이션을 구축하기 위한 핵심 플랫폼 구성요소입니다.

1. JDK 설치

터미널에 아래 명령어를 입력하여 JDK를 설치합니다.

To download the latest version (16):
$ brew install --cask temurin

To install other versions:
$ brew tap homebrew/cask-versions
$ brew install --cask temurin8

brew install --cask adoptopenjdk8

2. Java 버전 확인

JDK를 통해 Java가 잘 설치되었다면, 아래의 명령어를 통해 Java의 버전을 확인할 수 있습니다.

java -version

8. Android Studio 설치

React Native로 Android 앱을 개발하기 위해서는 Android 개발 툴인 Android Studio가 필요합니다.

Android Studio는 Android를 위한 앱을 만들 수 있는 공식 통합 개발 환경(IDE)입니다.

1. Android Studio 설치

아래의 링크를 통해 Android Studio를 다운로드합니다.
https://developer.android.com/studio

2. SDK 설정

Android Studio 설치가 완료되면, SDK를 설정할 필요가 있습니다.

Android Studio를 실행하여 상단 메뉴의 Preference > Android SDK 메뉴로 이동 후, 우측 하단의 Show Package Details를 선택합니다. 자신에게 필요한 API Level에 맞는 SDK Platform을 선택하여, 아래의 내용을 찾아 OK 버튼을 누릅니다.
(* 저는 API Level 30의 Android 11.0(R)를 선택하였습니다.)

• Android SDK Platform 30
• Intel x86 Atom System Image
• Google APIs Intel x86 Atom System Image
• Google APIs Intel x86 Atom_64 System Image

3. VDM 설정

Android Studio 설치가 완료되면, VDM(Virtual Device Manager)을 설정할 필요가 있습니다.

Android Studio를 실행하여 하단의 More Actions > Virtual Device Manager를 선택하여, Create device를 클릭합니다.

Google Play Store의 표시가 있는 device를 선택 후에, 아까 선택한 API Level에 맞는 System Image를 선택합니다.
(* 저는 가장 최신의 device를 선택하였습니다.)

선택한 AVD가 뜨며 Finish를 누르면 device가 생성된 걸 확인할 수 있습니다.

4. Android Studio 환경 변수 설정

Android Studio를 환경 변수에 등록해 주어야 합니다.

Android SDK 메뉴 상단에 있는 Android SDK Location의 위치를 복사합니다.

터미널에 아래 명령어를 입력하여 파일을 엽니다.

open ~/.zshrc

or

open ~/.bash_profile

파일을 열어 아래의 내용으로 수정합니다.

export ANDROID_HOME=복사한 자신의 안드로이드 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

5. adb

안드로이드 SDK가 잘 설정되었다면, 아래의 명령어를 통해 Android의 버전을 확인할 수 있습니다.

9. React Native 프로젝트 생성 및 확인

드디어 설정이 다 끝났습니다!!! 🎉

이제 마지막으로 프로젝트를 만들어 simulator 및 emulator에서 잘 작동하는지 확인해볼 일만 남았습니다!!! 😝 마저 서둘러해 봅시다.

1. React Native 프로젝트 생성

터미널에 아래 명령어를 입력하여 React Native 프로젝트를 생성합니다.
(* AppName엔 자유롭게 생성할 프로젝트의 이름을 적습니다.)

npx react-native init AppName

2. iOS에서 확인

생성한 프로젝트를 IDE로 열어, 터미널에 아래 명령어를 입력하여 simulator에서 잘 작동하는지 확인합니다.
(* 저는 IDE로 Webstorm을 사용하였습니다.)

react-native run-ios

3. Android에서 확인

생성한 프로젝트를 IDE로 열어, 터미널에 아래 명령어를 입력하여 emulator에서 잘 작동하는지 확인합니다.
(* 저는 IDE로 Webstorm을 사용하였습니다.)

react-native run-android

이렇게 React Native 개발 환경 세팅을 완료하였습니다. 🤩🤩🤩
다음은 React Native의 기초인 'react-native' 라이브러리의 컴포넌트에 대해 알아보겠습니다. 🌞

참고
https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/
https://github.com/AdoptOpenJDK/homebrew-openjdk/blob/master/README.md