react-native app expo cli && xcode simulator 실행하기

react-native 를 경험 해보고 싶어서 초기설정 및 xcode simulator에 대해 찾아봤다.

React-Native 개발 방식은 2가지가 있다고 한다.

첫번째로는 React Native CLI
두번째로는 Expo CLI 방식이다.

아래의 장단점을 따져봤을 때 개인적으로 Expo의 이점이 더 괜찮아보이고 처음 접해보기에 적절해보여서 ExpoCLi방식을 택했다.

React Native CLI의 장점은

직접 네이티브로 어플리케이션을 개발 가능하고 다양한 라이브러리 사용 가능하지만,단점으로는 기본적으로 Android, IOS에 대한 네이티브 지식이 필수적 (높은 러닝커브)
기본적인 설정이 되어 있지 않아 초기 설정이 까다롭고
빌드시 플랫폼마다 Android Studio, Xcode을 이용한 별도의 과정과 장비가 필요하다고한다. (맥북, 아이폰)

Expo CLI의 장점은

초기 구성이 쉬어서 빠르고 간편하게 설치가 가능하고
React Natvie를 위한 기본 설정을 미리 구성해준다.
직접 개발하기 어려운 기능들 기본 탑재 (앱푸시, 애플로그인 등)
네이티브 파일들을 개발자에게 숨겨두고 Expo가 자동으로 관리
Android / Xcode를 설치하지 않아도 QR코드를 통해서 해당 프로젝트를 실행
Apple / Google Store에 배포와 업데이트를 하기에 간편하다.
배포마다 검사를 받지 않는다.
개발자가 작성한 코드는 Expo 클라우드에서 빌드되고 자동으로 최신화되므로 compile이 필요 없다고 한다.

expoCLi방식을 사용하려면
node.js와 npm이 기본적으로 설치되어 있어야 한다.

expo cli 설치하기

$ npm install expo-cli

새 프로젝트 만들기

$ npx create-expo-app 프로젝트 명

프로젝트 실행하기

$ npm start

휴대폰으로 프로젝트 화면 확인하기

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

로컬환경에서 프로젝트 화면 확인하기

• App Store에 접속하여 xcode 설치하기
• 설치 완료 이후 Xcode 를 실행하고 상단 탭에서 Xcode -> Settings 순서로 들어간다.
• Platforms 탭에 들어가면 설치된 시뮬레이터의 목록이 나오는데 IOS 모바일 버전 설치가 안되어있다면 GET 버튼 클릭 후 설치 진행 한다.
• 설치 완료 이후 프로젝트에서 npm start 후에 i를 누르면 xcode로 simulator가 실행된다.
  다음으로는 "휴대폰으로 프로젝트 화면 확인하기" 방법과 동일하다.

결과

웹 기반으로 코딩을 하다가 react-native를 경험 해보니 
뭔가 React + styled-component로 코딩 하는 느낌이 들었다.
React와 비슷한것 같다가도 다른게 많은것 같기도 하고,
앱 개발에도 관심이 많았었는데 차차 알아봐야겠다.

Reference Link

React Native 개발환경 설정

xcode simulator