React Native 시작하기

- 문서를 읽기 전 끝까지 진행 하시려면 App Store의 Xcode를 미리 받아놓고 시작해주세요.

- source code : https://github.com/koojongin/react-native-practice

 

React Native

React Native?

React 문법 기반(+Native용 코드)로 개발한 소프트웨어를 여러가지 Platform(iOS,Android등)의 Application으로 빌드해주는 Framework입니다.

 

전제 조건

• Javascript 기본 이해

개발 환경 설정

React Native 학습에는 두가지 방법이 존재합니다.

1. Expo CLI
2. React Native CLI

모바일 개발이 처음인 경우 시작하는 가장 쉬운 방법은 Expo CLI를 사용하는 것입니다. 

Expo는 React Native를 기반으로 구축된 도구 세트이며 많은 기능 이 있지만 현재 우리에게 가장 관련성이 높은 기능은 몇 분 안에 React Native 앱을 작성할 수 있다는 것입니다. 최신 버전의 Node.js와 전화 또는 에뮬레이터만 있으면 됩니다. 도구를 설치하기 전에 웹 브라우저에서 React Native를 직접 사용해 보려면 Snack을 사용해 보세요 .

 

모바일 개발에 이미 익숙하다면 React Native CLI를 사용하는 것이 좋습니다. 시작하려면 Xcode 또는 Android Studio가 필요합니다. 이러한 도구 중 하나가 이미 설치되어 있는 경우 몇 분 안에 시작하여 실행할 수 있습니다. 설치되지 않은 경우 설치 및 구성하는 데 약 1시간이 소요될 것으로 예상해야 합니다.

 

저는 React Native CLI를 사용하는 방법으로 진행하였습니다.
(MacOS, iOS)

 

개발 OS와 빌드 Target에 따라 설치 조건이 다르니 이 부분은 아래 링크를 통해 자신과 맞는 방법으로 설치해야합니다.

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

Setting up the development environment · React Native

 

의존성 설치

1. Node, Watchman
   • Node,Watchman 설치 : 공식 문서 상에서는 Homebrew를 이용해서 node, watchman을 설치하는 것을 추천한다고 합니다.

     brew install node
     brew install watchman

   • 이미 설치되있다면 Node는 12 version 이상인지만 확인하시면 됩니다.
   • Watchman 은 파일 시스템의 변경 사항을 관찰하기 위한 Facebook의 도구입니다. 더 나은 성능을 위해 설치하는 것이 좋습니다.(설치하지 않아도 이번 테스트를 위해서는 문제가 없습니다.)
2. React Native CLI
   • React Native에는 명령줄 인터페이스가 내장되어 있습니다. npx react-native 명령을 입력하면 명령이 실행될 때 CLI의 최신 안정화 버전이 다운로드되어 실행됩니다.
   • 이전에 글로벌 react-native-cli패키지를 설치한 경우 예기치 않은 문제가 발생할 수 있으므로 제거하십시오.
3.  Xcode
   • Xcode를 설치하는 가장 쉬운 방법은 Mac App Store를 사용하는 것 입니다. Xcode를 설치하면 iOS 시뮬레이터와 iOS 앱을 빌드하는 데 필요한 모든 도구도 설치됩니다.
   • 시스템에 이미 Xcode를 설치했다면 버전 10 이상인지 확인하십시오.
   • Xcode 명령줄 도구도 설치해야 합니다. Xcode를 연 다음 Xcode 메뉴에서 "Preferences..."를 선택합니다. 위치 패널로 이동하고 명령줄 도구 드롭다운에서 최신 버전을 선택하여 도구를 설치합니다.
   • Xcode에 iOS 시뮬레이터 설치
     시뮬레이터를 설치하려면 Xcode > 기본 설정...을 열고 구성 요소 탭을 선택합니다 . 사용하려는 iOS 버전이 있는 시뮬레이터를 선택합니다. ( Xcode > Preferences... and select the Components tab. )
     

     

4.  CocoaPods
   • CocoaPods 는 Ruby로 구축되었으며 macOS에서 사용할 수 있는 기본 Ruby와 함께 설치할 수 있습니다. Ruby 버전 관리자를 사용할 수 있지만 무엇을 하는지 모르는 경우 macOS에서 사용할 수 있는 표준 Ruby를 사용하는 것이 좋습니다.
   • 기본 Ruby 설치를 사용하려면 sudogem을 설치할 때 사용해야 합니다. (그러나 이것은 gem 설치 기간 동안의 문제일 뿐입니다.)

     sudo gem install cocoapods​

   • 자세한 내용은 CocoaPods 시작하기 가이드 를 참조하십시오 .

 

---

여기부터는 직접 진행한 내용을 기반으로 작성하였기 때문에 더 자세하고 선택적 옵션들은 공식 문서를 참고해주세요.

https://reactnative.dev/

새 애플리케이션 만들기

npx react-native init AwesomeProject

※ 실행후 이전 개발환경설정 과정에서 Cocoapods을 설치하지 않았으면, 설치 질문이 나오는데 원하시는 것으로 선택해서 설치 진행해주시면 됩니다.

 

TypeScript와 같은 사용자 지정 React Native 템플릿으로 다음 --template인수를 사용 하여 프로젝트를 시작할 수도 있습니다.

npx react-native init AwesomeProject --template react-native-template-typescript

실행했더니 설치중 에러 발생함

에러 1

커맨드 실행후 Cocoapods이 없다고해서 설치 진행.

설치했더니 또 문제있어서 수동으로 pod install 진행

에러 2

pod install시도하니 xcodebuild license문제있으니 agree하라고 또 에러 발생해서 라이센스 승인 진행

sudo xcodebuild -license

 

React Native 애플리케이션 실행

1단계: 지하철 시작

먼저 React Native와 함께 제공되는 JavaScript 번들러인 Metro를 시작해야 합니다. Metro는 "항목 파일과 다양한 옵션을 가져와서 모든 코드와 해당 종속성을 포함하는 단일 JavaScript 파일을 반환합니다."— Metro Docs

Metro를 시작하려면 npx react-native startReact Native 프로젝트 폴더 내 에서 실행 하십시오.

~/AwesomeProject$ npx react-native start

위 명령어 실행 시 build가 될phone이나 simulator가 없으면 다음 에러가 발생합니다.

build가 될phone이나 simulator가 없으면 다음 에러가 발생합니다.

저는 simulator를 설치해서 진행하였습니다.(simulator는 위에 개발 환경 설정시 Xcode에 iOS 시뮬레이터 설치를 참고해주세요)

설치되면 npx react-native run-ios 커맨드로 앱 돌아가는 것이 확인되면서 폰으로 native build테스트하는 내용이 마무리 됩니다.