리액트 네이티브
- 리액트 + 네이티브
- JavaScript 언어 하나로 안드로이드와 iOS앱 모두 만들 수 있는 라이브러리
Expo
- 리액트 네이티브로 앱을 개발할 때 안드로이드, iOS 코드를 건드려야 하는 대부분의 상황에서 안 건드려도 되게끔 도와주는 툴
- 프로젝트 생성, 실행, 빌드 등의 여러 기능 제공
리액트 네이티브 & Expo 설치
Node & NPM 설치
- Node.js로 자바스크립트 개발 환경 구축
- NPM으로 필요한 자바스크립트 앱 개발 도구 가져와 사용
Yarn 설치
- npm보다 가볍고 빠르게 자바스크립트 패키지를 관리할 수 있게 해주는 자바스크립트 패키지 매니저 툴
- cmd에서 설치 :
//도구를 가져와 설치하는 npm 의 설치 명령어 install과
npm install -g yarn
//설치가 완료된다음
yarn -v(참고 : 윈도우에서 cmd창을 비우려면 cls 입력)
Expo 명령어 도구 설치
npm install -g expo-cli
- Expo 도구를 터미널에서 사용할 때 Expo 명령으로 사용하기 위해 expo command line interface 설치
- npm : 노드 패키지 매니저 명령을 실행하겠다
- install : 설치
- -g : 컴퓨터 전역적으로 설치 == 어디서든 -g 다음에 오는 명령어를 사용 가능하게끔
- expo-cli : 설치할 패키지 이름
Expo 가입 및 로컬에 Expo 계정 세팅
- Expo로 개발 중인 앱을 마켓에 배포하기 위해 컴퓨터에 Expo 계정 세팅 필요
- Expo 가입 링크 여기서 계정 생성
- 컴퓨터에 Expo 계정 연결 :
// cmd에서 Expo 계정으로 로그인
expo login
...
expo 이메일(또는 아이디), 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!Expo 실행
-
VScode에서 sparta-study 폴더 열기
-
Expo 명령어 작성 위한 에디터 상의 터미널 열기(Ctrl + ~) :
expo init sparta-myhoneytip-영어이름- expo : Expo 명령어를 사용하겠다.
- init : Expo 앱을 생성하는 Expo 명령어
- sparta-myhoneytip-영어이름 : 앱 이름
-
어떤 유형의 Expo 앱을 만들어줄지 물어보면 blank 선택 후 엔터
-
만든 Expo앱 폴더 안으로 들어가기
cd 폴더명 -
Expo 실행
expo start
- Expo 서버를 켜는 명령어
- 명령어 실행 시 나오는 qr코드를 휴대폰 expo go 어플에서 인식
- Expo 서버를 끌 때는 Ctrl + c
Expo 프로젝트 기본 폴더 구조
- assets : 기본 이미지 및 아이콘 파일 폴더
- node_modules : 라이브러리 폴더
- App.js : 리액트 네이티브 앱이 시작되는 출발점, 메인 파일
앱이 시작될 때 가장 먼저 실행되는 자바스크립트 파일
웹으로 따지면 index.html - app.json : 앱 기본 정보 설정하는 파일(앱 이름, 아이콘, 앱 켜질 때 보려지는 스플래시 스크린 화면, 광고 설정 등)
지금까지 한 것
1) Expo 명령어 설치
2) 로컬에 Expo 계정 세팅
3) expo init 명령어로 기본 앱 생성
4) expo start로 Expo 앱 실행
5) 휴대폰에 설치한 Expo 클라이언트 앱으로 Expo 앱 실행
