react-native cli Quickstart 시작하기

제이밍·2021년 9월 13일

리액트 네이티브 v6.5

1. Installing dependencies

프로젝트를 세팅하기전 Node, Watchman, the React Native command line interface, Xcode and CocoaPods 같은 dependencies의 설치가 요구된다.

맥을 사용한다면 brew를 이용해 Node, Watchman 을 다운로드 받는다.

brew install node
brew install watchman

2. Install Xcode, Android Studio

실행 환경에 맞게 다운로드 해준다.

3. Cocoapods

xcode 프로젝트를 위해 필요한 라이브러리

  • CocoaPods는 Objective-C, Swift 및 외부 라이브러리 관리를위한 표준 형식을 제공하는 RubyMotion과 같은 Objective-C 런타임에서 실행되는 기타 언어에 대한 애플리케이션 수준 종속성 관리자.

기본 Ruby 설치를 사용하려면 sudogem을 설치할 때 사용해야 한다.

sudo gem install cocoapods

4. React Native Command Line Interface

  • React Native에는 명령줄 인터페이스가 내장되어 있으므로 특정 버전의 CLI를 전역적으로 설치하고 관리하는 대신 npx Node.js와 함께 제공되는 를 사용하여 런타임 시 현재 버전에 액세스하는 것을 추천한다.
  • npx react-native 하면 명령이 실행될 때 CLI의 현재 안정적인 버전이 다운로드되어 실행된다.

5. Creating a new application

npx react-native init AwesomeProject

이것외에도 이미 많은 보일러 플레이트 코드들이 많이 있다.
버전을 다르게 설치하려면

npx react-native init AwesomeProject --version X.XX.X

Typescript를 사용한다면

npx react-native init AwesomeTSProject --template react-native-template-typescript

만약 위 과정에서 오류가 난다면 본인의 컴퓨터에 global로 react-natvie 혹은 react-native-cli의 오래된 버전에 깔려있을지 모른다. 삭제하고 다시 install을 시도해보면 좋을 것!

6. Running your React Native application

Step 1: Start Metro

리액트 네이티브를 시작하기위해서 필요한 Metro
Metro는 JavaScript 번들러로 항목 파일과 다양한 옵션을 사용하고 모든 코드와 해당 종속성을 포함하는 단일 JavaScript 파일을 다시 제공한다.

Metro Bundler를 실행
`npx react-native start` 

Step 2: Start your application

Metro Bundler 가 자체 터미널을 실행시키고 리액트 네이티브 프로젝트에서 새로운 터미널을 열어 다음을 실행한다.

npx react-native run-ios

ios 시뮬레이터에서 새 앱이 실행되는 것이 보이면 초기 세팅 완료!

reference

https://reactnative.dev/docs/environment-setup
https://guides.cocoapods.org/using/getting-started.html
https://facebook.github.io/metro/docs/concepts/

profile
모르는것은 그때그때 기록하기

0개의 댓글