React Native 개발 환경 구축하기

* 본 게시글은 개인적으로 공부하고 기록하기 위한 용도로 작성되었으며, 본 게시글의 내용은 공식문서 및 게시글 하단의 출처의 내용을 참고하여 작성되었음을 알려드립니다.

* 본 게시글은 macOS, M1 맥, 2023년 1월 기준으로 작성되었으며, 게시글을 보시는 시점 및 다른 환경에서는 일부 내용이 정확하지 않거나 변경되었을 가능성이 있으므로 참고하시기 바랍니다.

 

1. React Native 프로젝트를 생성하는 2가지 방법과 각각의 장단점

React Native 프로젝트를 생성하는 방법에는 크게 2가지가 있다.

- Expo CLI를 사용하는 방법

- React Native CLI를 사용하는 방법

 

모바일 개발이 처음이라면 Expo를 사용하는 것이 가장 쉬운 방법이다. Expo는 React Native를 기반으로 구축된 도구 세트이다. 최신 버전의 Node.js와 스마트폰 기기 또는 에뮬레이터만 있으면 된다는 특징이 있다.

 

모바일 개발에 이미 익숙하다면 React Native CLI를 사용하는 것이 좋다. 이 방법을 위해서는 Android Studio 또는 Xcode가 필요하며, 두 도구 모두 아직 설치되어있지 않은 경우 설치 및 구성에 시간이 오래 걸린다.

 

Expo CLI를 사용하면 다음의 장점이 있다. (이 부분의 내용은 게시글 하단에 있는 출처2을 참고하여 작성하였다.)

- Expo에서는 어느 정도 틀이 만들어져서 제공이 되므로 편리하다는 장점

- 복잡한 초기 설정을 본인이 하지 않아도 초기 설정이 가장 일반적인 형태로 제공되어 편리하다는 장점

- 완성된 프로젝트에 대해 배포 및 관리를 쉽게 진행할 수 있다는 장점

- React-Native를 테스트하기 위해 Android는 에뮬레이터를, iOS는 시뮬레이터를 사용해야 하는데, Expo를 사용할 경우에는 실제 자신이 사용하는 스마트폰으로 즉각적인 테스트를 진행할 수 있다는 장점

- Expo는 React-Native 웹을 지원하기 때문에 Android와 iOS 뿐만 아니라 웹으로도 개발이 가능하다는 장점

 

그렇지만 Expo를 사용하는 방법에는 다음의 단점이 있다. (이 부분의 내용은 게시글 하단에 있는 출처2을 참고하여 작성하였다.)

- Expo가 미리 여러 설정을 걸어두었기 때문에 Expo가 제공하는 API만 사용할 수 있으며, 사용자가 원하는 부분에서 커스터마이징을 할 수 없다는 단점

- 기본으로 제공하는 기능이 많기 때문에 빌드 파일의 크기가 불필요하게 커지는 단점

 

React-Native CLI의 장점은 곧 Expo의 단점이며, React-Native CLI의 단점은 곧 Expo의 장점이 된다.

 

 

 

2. React Native 공식 사이트

React Native 공식 사이트에서 개발환경 구축 등 공식 문서를 확인할 수 있다.

https://reactnative.dev/

 

 

 

3. React Native 개발환경 구축

이 글에서는 Expo CLI가 아닌 React Native CLI를 사용하는 방법 기준으로 설명한다. Expo CLI를 사용하는 방법에 대해서는 게시글 하단에 있는 출처2에서 확인할 수 있다.

 

3-1. Node.js, Watchman, JDK (Java Development Kit) 설치 (macOS 기준)

공식 문서에서는 Node.js와 Watchman을 설치하는 것을 권장한다. 터미널에서 다음의 명령어를 통해 Node.js와 Watchman을 설치할 수 있다. 이미 설치되어 있는 경우, Node.js 버전이 14 이상인지 확인하고 그렇지 않다면 최신으로 업데이트한다. (2023.01.16. 공식문서 기준)

 

터미널에서 다음의 명령어를 통해 Node.js와 Watchman을 설치할 수 있다. (그전에 먼저 mac에 homebrew가 설치되어 있어야 한다.)

brew install node
brew install watchman

 

Node.js를 설치하는 방법에는 공식 사이트에서 다운로드하여 설치하는 방법도 있다. Node.js 공식 사이트에 접속하면 첫 화면에 다운로드 버튼이 크게 보이는데, 해당 버튼을 눌러서 Node.js를 다운로드하고 설치할 수 있다. 최신 버전과 LTS 2개의 버튼이 있는데, LTS는 지금까지 나온 버전들 중 가장 안정적인 버전을 말한다.

https://nodejs.org/ko/

 

참고로, Node.js를 설치하면 일반적으로 npm 또한 자동으로 설치된다. npm은 Node.js Package Manager의 줄임말로, node.js의 패키지를 관리할 수 있는 도구이다. Python의 pip나 Ruby의 gem처럼 웹 사이트에서 패키지를 다운로드하여 컴퓨터에 설치해 주는 것이다.

 

Node.js가 잘 설치되었는지 확인하거나 또는 Node.js의 버전을 확인하고 싶다면 터미널에서 다음의 명령어 중 하나를 입력한다.

node -v
node --version

 

npm이 잘 설치되었는지 확인하거나 또는 npm 버전을 확인하고 싶다면 터미널에서 다음의 명령어 중 하나를 입력한다.

npm -v
npm --version

 

또한 JDK도 설치한다. 터미널에서 다음의 명령어를 통해 설치할 수 있다. 이미 설치되어 있는 경우 JDK 11 버전을 추천하며, 더 높은 JDK 버전을 사용할 경우 문제가 있을 수도 있다고 한다. (2023.01.16. 공식문서 기준)

brew tap homebrew/cask-versions
brew install --cask zulu11

 

JDK가 잘 설치되었는지 확인하거나 또는 JDK의 버전을 확인하고 싶다면 터미널에서 다음의 명령어를 입력한다.

javac --version

 

3-2. cocoapods 설치

cocoapods는 iOS 개발 언어인 Swift나 Object-C의 의존성 관리자로 보통 라이브러리 개발을 위해 사용된다. React Native로 개발할 때에도 필요하므로 cocoapods를 설치해야 한다.

터미널에서 다음의 명령어를 통해 cocoapods를 설치할 수 있다.

sudo gem install cocoapods

 

3-3. Android Studio 및 Xcode 설치

macOS에서 진행할 경우에는 iOS까지 빌드가 가능하며, 이를 위해서는 Xcode가 설치되어 있어야 한다. Xcode는 macOS에 기본으로 내장되어 있는 앱스토어에서 설치할 수 있다. 시간이 오래 걸릴 수 있음에 유의한다.

 

또한 Android 개발을 위해서 Android Studio를 설치해야 한다. 설치 후에는 Android Studio를 실행하고 상단바 - Android Studio - Preferences 메뉴를 클릭 -> 새로 뜨는 설정 창 좌측에서 Appearance - System Settings - Android SDK 메뉴를 찾아 들어간다. SDK Tools 탭에서 다음의 4가지가 체크되어 있는지 확인한다. 체크되어 있지 않다면 설치가 되어있지 않은 상태이므로 체크버튼을 누르고 하단의 OK 버튼을 눌러서 설치한다.

- Android SDK Build-Tools
- Android SDK Command-line Tools : 아마 체크되어 있지 않을 것이다.
- Android Emulator
- Android SDK Platform-Tools

 

또한 아까 화면에서 상단의 Android SDK Location 칸에 있는 폴더의 경로를 복사한다.

 

3-4. React Native CLI 설치

터미널에서 다음의 명령어를 통해 React Native CLI를 설치한다.

npm install -g react-native-cli

 

3-5. React Native 프로젝트 생성 및 실행

먼저 터미널에서 프로젝트를 저장하고 싶은 폴더로 이동한다. 디렉토리를 이동하는 cd 명령어, 현재 경로에 존재하는 파일과 폴더를 확인하는 명령어인 ls 명령어, 현재 위치한 경로를 출력하는 pwd 명령어 등을 사용할 수 있다.

 

프로젝트를 저장할 폴더로 이동한 후 프로젝트를 생성하기 위해서는 터미널에 다음의 명령어를 입력한다. 프로젝트명이라고 한글로 쓰여 있는 부분에는 실제 프로젝트의 이름을 입력한다.

react-native init 프로젝트명

 

만약 위의 명령어를 실행했는데 프로젝트 생성에서 [ cli.init is not a function ] 라는 오류메시지가 표시되고 폴더 안에 파일들이 제대로 만들어지지 않았다면 위의 명령어 대신 다음의 명령어를 입력하여 프로젝트를 생성하도록 한다.

react-native init 프로젝트명 --version 0.68.2

 

프로젝트가 생성되면 터미널에서 cd 명령어를 통해 해당 프로젝트의 경로로 이동한다.

cd 프로젝트명

 

이후 프로젝트를 실행하고 싶다면 터미널에 다음의 명령어를 입력한다.

react-native run-android
react-native run-ios

 

3-5-1. React Native 프로젝트 생성에서 오류 발생 시 해결방법

React Native 프로젝트 생성 시 [ Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template. ] 오류가 발생한다면, 오류를 해결하기 위해 다음의 명령어를 차례로 입력한다. (처음 설정할 때 오류가 나는 것 같다.) (이 부분의 내용은 게시글 하단에 있는 출처6을 참고하여 작성하였다.)

sudo xcode-select --switch /Applications/Xcode.app
pod install

 

두번째 줄 [ pod install ]을 실행했는데 [ Don't forget to include the Crash Report log file under DiagnosticReports directory in bug reports. ] 오류가 발생한다면, [ pod install ] 대신 다음의 명령어를 차례로 입력한다. (이 부분의 내용은 게시글 하단에 있는 출처7을 참고하여 작성하였다.)

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

 

해당 오류가 발생하는 이유는 1) Ruby FFI 라이브러리 업데이트 후 재설치시 M1은 arm 기반이라 arch 명령을 수행해보면 arm64라고 나오므로, ffi를 설치할 때 아키텍처를 x86_64로 지정하여 설치해야 하기 때문이며, 그다음에 2) pod install 명령을 사용하면 아키텍처 관련된 호환성 문제(아키텍처를 arm64로 인식)가 계속 발생하기 때문에 여기서도 아키텍처를 x86_64로 지정해서 실행해야 되기 때문이라고 한다. (이 부분의 내용은 게시글 하단에 있는 출처7을 참고하여 작성하였다.)

 

pod 설치 이후 [ Please close any current Xcode sessions and use (프로젝트명).xcworkspace for this project from now on. ] 라는 메시지가 표시된다. 이는 현재 Xcode 세션을 종료하고 이제부터 (프로젝트명).xcworkspace를 사용하라는 의미이다.

 

 

 

* 본 게시글은 개인적으로 공부하고 기록하기 위한 용도로 작성되었으며, 본 게시글의 내용을 작성하기 위해 참고한 출처의 링크는 아래와 같습니다.

 

React Native 공식 사이트

https://reactnative.dev/

출처1 : React Native 프로젝트 시작하기

https://devbksheen.tistory.com/entry/React-Native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

출처2 : React Native 프로젝트 시작하기

https://velog.io/@holidenty/React-Native-React-Native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

출처3 : React Native 시작하기

https://jiku90.tistory.com/20

출처4 : 리액트 네이티브 시작하기

https://ramveloper.tistory.com/20

출처5 : M1 Mac에서 React-Native 환경 구축

https://choboit.tistory.com/83

출처6 : React native 프로젝트 만들기(expo x)

https://hoony-gunputer.tistory.com/entry/React-native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0expo-x

출처7 : ios Swift CocoaPods 에러 - You may have encountered a bug in the Ruby interpreter or extension libraries.

https://velog.io/@doka/Dont-forget-to-include-the-Crash-Report-log-file-underDiagnosticReports-directory-in-bug-reports