리액트 네이티브 개발환경 준비하기, 프로젝트 생성

리액트 네이티브 개발환경 준비하기

🌈공통

Node.js / JDK / 안드로이드 스튜디오

💻맥 & 윈도우

맥 : 왓치맨 / Xcode , 윈도우 : 파이썬

---

나는 다른 것들은 다 세팅이 되어 있어서 파이썬만 추가로 설치했다.

---

리액트 네이티브 프로젝트 만들기

1. Expo

Expo는 리액트 네이티브를 편하게 사용할 수 있도록 설정되어 있는 툴

완성된 프로젝트를 쉽게 배포, 관리할 수 있는 다양한 기능을 제공함

 

아래 명령어로 expo-cli를 설치

npm install --global expo-cli

 

Expo 프로젝트 생성

 

생성된 프로젝트로 이동해서 프로젝트 실행

 

웹 브라우저에 페이지가 열리며

 

안드로이드 폰에서는 Expo 애플리케이션의 Scan QR Code를 이용하고,

아이폰은 기본 카메라 애플리케이션을 이용해서 QR 코드를 촬영하면 프로젝트 실행 화면이 나온다.

 

2. 리액트 네이티브 CLI

Expo와 반대로 리액트 네이티브 CLI에서는 필요한 기능이 있을 경우 모듈을 직접 만들어 사용할 수 있으나 Expo에 비해 배포가 불편하고 어렵게 느껴질 수 있다.

 

아래 명령어로 리액트 네이티브 CLI 프로젝트 생성

npx react-native init MyFirstCLI

프로젝트 실행

cd MyFirstCLI
npm run ios
npm run android