react-native cli Quickstart 시작하기

제이밍·2021년 9월 13일
3

리액트 네이티브 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개의 댓글