📌 Expo
💡 리액트 네이티브
리액트(React) + 네이티브(Native)
자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두 가지 모두 만들어주는 라이브러리
💡 라이브러리
개발할 때 사용하는 도구
💡 Expo
- 원래 안드로이드, iOS 앱을 만들 땐
자바&코틀린과Swift라는 언어를 써야 함
👉 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 됨 - 안드로이드 & iOS 코드를 몰라도 개발 가능!
Expo Go: 개발 중인 앱 테스트를 위한 Expo 클라이언트 앱
💡 Node.js
자바스크립트 개발 환경 구축
서버 쪽 응용 프로그램 개발에 사용할 수 있는 자바스크립트 기반의 소프트웨어 플랫폼.
💡 NPM (Node Package Manager)
필요한 자바스크립트 앱 개발 도구들을 가져와 사용
💡 Yarn
NPM보다 가볍고 빠르게 자바스크립트 패키지를 관리할 수 있게 해주는 자바스크립트 패키지 매니저 툴
💻 설치
Yarn설치
//도구를 가져와 설치하는 npm 의 설치 명령어 install과
//컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어
npm install -g yarn
//설치가 완료된다음
yarn -vExpo설치
npm install -g expo-clinpm: 노드 패키지 매니저 명령을 실행install: 설치-g: 컴퓨터 전역적으로 설치 == 어디서든지 -g 다음에 오는 명령어를 사용할 수 있도록!expo-cli: 설치할 패키지 이름
👉 컴퓨터 어디서든지 Expo를 사용할 수 있도록 패키지를 전역적으로 설치
🙎♀️ Expo 계정 세팅 및 실행
💡 Expo로 개발 중인 앱을 마켓에 배포하기 위해선 컴퓨터에 Expo 계정을 세팅해야 함
1. 가입
🔗 가입 링크
https://expo.io/signup
2. 로컬에 Expo 계정 세팅
cmd에서 실행
expo login --username "Expo 사이트 가입당시 입력한 name"
...
expo 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!3. 실행
VScode사용terminal에 입력
expo init sparta-myhoneytip-영어이름expo: Expo 명령어를 사용하겠다는 뜻init: Expo 앱을 생성하는 Expo 명령어sparta-myhoneytip-영어이름: 앱 이름
⛔ expo init 또는 expo start 시 권한 문제 에러가 발생했다면?
1) VSCode를 실행하고 Ctrl + Shift + P 조합키를 입력
2) "shell"이라고 입력
3) "Treminal: Select Default Shell"을 클릭
4) "Comand Prompt C:\Windows\System32\cmd.exe"를 클릭
5) VScode를 재실행 하면 제일 아래 "PS"로 시작하던 것이 없어졌을 것이고, 이는 CMD로 바뀌었다는 의미!
blank선택 (Expo 앱 유형)cd <폴더명>: change directory의 약자로 입력한 폴더명으로 이동하는 명령어
cd sparta-myhoneytip-영어이름expo start: Expo 앱 실행
ctrl + c: 서버 종료
👉 자동으로 열린 Expo 개발자 도구
- Run on Android device/emulator
: 컴퓨터와 USB로 연결된 안드로이드 휴대폰 또는 우리가 설치한 안드로이드 시뮬레이터로 Expo을 실행시키는 버튼 - Run on iOS simulator
: 설치한 iOS 시뮬레이터로 Expo 앱을 실행시키는 버튼 - Run in web browser
: 작업 중인 Expo 앱을 브라우저에서 확인하는 버튼. 즉, 웹 플랫폼에 대응하게끔 지원 - Send link with email
: 작업 중인 Expo 앱은 Expo 클라이언트 앱이 설치되어 있는 휴대폰 어디서든 실행 가능.
즉, 이때 개발중인 Expo앱 링크를 통해서도 바로 Expo 클라이언트 앱으로 개발중인 앱 확인이 가능! - Public or republish project
: 앱을 해당 계정의 Expo 공식사이트에 업로드
👉 Expo 공식 사이트에 개발한 앱을배포하게 되면, 사이트에서 안드로이드 용APK파일 혹은 iOS 용ipa파일을 빌드하여 다운로드 받을 수 있음!
⛔ Expo 연결이 안 된다면?
1) 컴퓨터가 연결된 와이파이와 앱을 실행시키는 휴대폰에 연결된 와이파이가 동일한지 확인
2) 왼쪽 하단 QR 코드 위에, Tunnel, Lan, Local 모두 눌러보면서 되는 환경을 찾아보기
👉 각 컴퓨터 마다 환경 설정이 다르기 때문
📝 구성
assets
: 앱이 동작되고 서비스되는 데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더node_modules
: 리액트 네이티브 & Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소App.js
: 리액트 네이티브 앱이 시작되는 출발선 및 진입점, 메인 파일
app.json
: 앱이 가지는 기본 정보들을 설정하는 파일
👉 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될 때 보여질 아이콘, 앱이 켜질 때 보여지는 스플래시 스크린 화면, 안드로이드 또는 iOS 각각의 광고 설정 등 ...
📌이 포스팅의 모든 자료의 출처와 저작권은 SpartaCodingClub 강의에 있습니다.📌