[Windows] React Native 개발환경 설정

React Native 개발 방법에는 React Native CLI와 Expo CLI 2가지가 있다.

React Native CLI 개발 방법으로 한다면 실제 앱을 만드는데 필요한 모든 소프트웨어가 필요하다. (안드로이드 스튜디오, Java, 안드로이드 SDK, 시뮬레이터, 개발도구들) 나는 팀프로젝트로 Android Studio와 코틀린을 활용한 모바일 앱을 개발한 적이 있어 설치가 되어 있지만, Windows 노트북이기 때문에 해당 방법을 사용할 경우 iOS 기기에서 테스트가 불가능하다.

따라서 Windows에서 만든 React Native 앱을 내 아이폰으로 테스트하기 위해 Expo CLI를 사용하고자 한다.

💛 Expo CLI를 사용하는 이유

• 앱 구조를 보면 Expo는 코드부분을 제외한 모든 인프라시설이 갖추어져 있음
  

• 따라서 위의 모든 소프트웨어와 시뮬레이터를 설치하지 않고도 작성한 코드의 결과를 모바일 앱 에서 즉시 확인 가능
• 개발자가 작성한 코드는 Expo 클라우드에서 빌드되고 자동으로 최신화되므로 compile이 필요 없음

💛 개발환경 세팅

1. 전제조건

• node.js와 npm이 기본적으로 설치되어 있어야 함

2. expo cli 설치

npm install expo-cli

3. 새 프로젝트 만들기

npx create-expo-app {프로젝트 명}

→ 처음에 다른 블로그에서 본대로 "npx expo init" 명령어를 실행했으나 "expo init is not supported in the local CLI, please use npx create-expo-app instead" 라는 오류 메시지를 발견하여 해당 명령어로 바꾸어 실행하였음

4. 프로젝트 실행

• 로컬 개발 서버가 시작되고, 프로젝트 QR 코드와 함께 개발자 콘솔이 표시됨

cd {프로젝트 명}
npm start

5. 프로젝트 보기

• iOS 기기의 경우 App Store에 접속하여 Expo Go 앱 설치
• 카메라에서 콘솔창에 띄워진 QR코드 실행하면 Expo Go에서 실시간으로 작업하고 있는 프로젝트 UI를 확인 가능
  
  
  

💛 프로젝트 구조

처음 생성한 프로젝트 구조는 다음과 같다.

• assets : 앱에 필요한 이미지 및 아이콘 파일들을 담는 폴더
• node_modules : eact Native 및 Expo로 앱에 필요한 라이브러리를 담는 폴더
• App.js : 앱의 시작점
• app.json : 앱의 이름, 버전, 아이콘 등 기본적인 정보들을 설정하는 파일