React-Native, expo-CLI 개발 환경 설정

이번에 앱을 개발하기 위해서 React-Native에 개발 환경 설정을 해보려고 한다.

React-Natvie 앱 개발 방법으로 Expo CLI 와 React Navtive CLI  방법이 있다.

Expo CLI

장점

• Expo는 복잡한 환경 설정 없이 빠르게 앱을 시작할 수 있다.
• Expo Go 앱을 통해 디바이스에서 바로 실행 및 테스트 가능
• Expo는 카메라, 위치 서비스, 푸시 알림 등 다양한 API를 기본으로 제공
• 별도의 네이티브 설정 없이 다양한 기능 사용 가능
• iOS와 Android 환경 간 차이를 많이 처리해 주므로 코드를 공유하기 쉬움
• OTA 업데이트 지원, 앱스토어를 거치지 않고 코드 수정 사항을 즉시 배포 가능
• Expo SDK는 버전 관리를 제공하여 안정성과 호환성을 유지

단점

• 네이티브 코드 수정 불가, Expo의 관리형 워크플로우에서는 네이티브 코드
  (예: Java/Kotlin, Swift/Objective-C)를 수정할 수 없음.
• Expo Client에서는 잘 동작하지만 실제 Simulator 및 단말기에서 잘 동작하지 않을 수 있음
• 네이티브 모듈을 사용해야 하는 경우 "Eject(분리)"가 필요함
• 모든 React Native 라이브러리가 Expo에서 지원되지 않음.
  "인앱(In-app) 결제" 의 경우 Expo CLI에서 구현할 수 없다고 함
• Expo는 기본적으로 많은 기능을 포함하고 있어, 앱 크기가 커질 수 있음.

React Native CLI

장점

• 네이티브 코드(Android 및 iOS) 직접 수정 가능.
• 맞춤형 모듈 및 플러그인 추가 가능.
• 네이티브 코드를 직접 다룰 수 있으므로 고성능 요구사항을 충족하기 쉬움.
• Expo의 제한 없이, React Native 생태계의 모든 라이브러리를 사용할 수 있음.
• 고급 기능과 맞춤형 요구사항이 있는 프로젝트에 적합.

단점

• Android Studio, Xcode, Java, Gradle 등 여러 도구를 설치하고 설정해야 함.
• 네이티브 코드와 관련된 이슈 발생 시, 디버깅이 복잡해질 수 있음.
• 네이티브 모듈을 직접 관리해야 하므로 업데이트 및 유지보수가 어려울 수 있음.
• 별도로 CodePush와 같은 도구를 설정해야 OTA 업데이트를 지원 가능
  현재 CodePush 기능이 사라진다는 기사가 있다?;
• https://expo.dev/blog/how-to-replace-app-center-and-codepush

 

시작하기

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

Get Started with React Native · React Native

 

React-navtive 가이드에  Expo-cli로 세팅을 추천하고 있어서 Expo-cli로 빠르게 세팅을 해보려고 함

node 설치 (lts 버전 설치)

https://nodejs.org/en/download/package-manager

Node.js — Download Node.js®

 

 휴대폰을 사용하여  Android 및 iPhone 단말기에 "Expo Go" 앱을 설치한다.

        - 윈도우 개발환경에서는 iPhone 에뮬레이터 를 실행할 수 없기 때문에
           iPhone 단말기를 준비하거나  xcode 설치하여 환경 구축

 

에뮬레이터 (Emulator)

실제 하드웨어와 운영 체제를 가상으로 재현하는 소프트웨어 
하드웨어와 소프트웨어 모두를 모방하여 실제 기기처럼 동작. Android 기기에서 사용되며, Android Emulator가 대표적

 

시뮬레이터 (Simulator)

하드웨어 모방 없이 소프트웨어적인 측면만 모방하는 도구
iOS 기기에서 사용되며, Apple의 Xcode Simulator가 대표적

 

안드로이드 스튜디오 설치 및 세팅

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

안드로이드 스튜디오 환경설정 
안드로이드 스튜디오 설치 후  >  More Actions > SDK Manager

• Android SDK Platform 29
• Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image

SDK 설정은 해당 블로그들을 참고하였다

https://deku.posstree.com/ko/react-native/install-on-windows/
https://gochibul.tistory.com/7

 

환경변수 등록

1. 윈도우 탐색기에 "시스템 환경 변수 편집"을 입력하고 시스템 속성을 실행

2. "고급" - "환경 변수"를 클릭하고 "새로 만들기"를 눌러 환경변수를 추가한다.

• 변수 이름 : ANDROID_HOME
• 변수 값 : (sdk 지정한 경로)

변수값에 경로는 안드로이드 스튜디오 SDK 설정 시 location 값 경로로 설정한다.

또 추가로 사용자 변수 리스트에서 Path를 선택하여 환경 변수 편집 화면으로 이동하여

sers\[사용자 이름]\AppData\Local\Android\Sdk\platform-tools와 같이
SDK가 설치된 폴더 하위에 있는 platform-tools 폴더를 입력하고
확인 버튼을 눌러 환경 변수를 수정해준다.

이후 cmd에서 adb --version 을 입력하면 해당 이미지와 같이 발생하면 끝!

 

이후 터미널에서 expo-cli 를 설치  후 실행 코드를 입력

npm install --global expo-cli

npx create-expo-app@latest

해당 프로젝트 이동 후

npx expo start

이후 핸드폰에서 설치한 Expo Go 어플에서 터미널에 있는
QR 코드나 해당 프로젝트 주소 url을 입력하여
앱 프로젝트를 확인할 수 있다!