1) 앱 개발 준비 - 리액트 네이티브(기술) & Expo(도구) 소개 및 설치 2) 앱 화면 만들기 3) 앱 필수 기초 지식 - 리액트 기초 다지기
천천히 순서대로 같이 하다보면 앱 화면 완성이라고 ?!
[앱 개발 준비] 시작하는 리액트 네이티브 & Expo
리액트 네이티브 앱 개발을 더 편하고 쉽게 도와주는 Expo라는 도구로 앱 개발을 진행하는데,
이에 대해 조금 살펴보고, 개발에 필요한 준비들을 진행이 될 것 이라고 함다'ㅅ'b
리액트 네이티브에서 화면을 그리는 방법
앱 개발, 즉 리액트 네이티브 앱 개발에서 구역(레이아웃)을 잡는 문법 언어를 JSX라고 부릅니다.
JSX문법은 정말 간단하게, 화면의 구역을 잡을 때는 <View> 태그를, 글자를 쓸때는 <Text> 태그를 사용하라는 것처럼, 용도에 맞는 태그를 정해놨습니다. 그래서 우린 필요한 태그를 그때그때 꺼내서 사용하면 됩니다.
태그란 <>과 같이 꺽쇠로 표현하는 프로그래밍 문법을 뜻합니다! ( HTML들어보셨나요? HTML도 태그 문법이에요!)
//잠시 살펴보는 JSX !!!
//이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용합니다.
import { Text, View } from 'react-native';
<View>
<Text>Hello, I am {props.name}!</Text>
</View>
동시에 JSX 문법으로 영역을 잡은 뒤 이쁘게 꾸미는 방법도 배웁니다
리액트 네이티브에서 자주 사용되는 자바스크립트!
리액트 네이티브로 앱을 제작 하다보면, 자주 사용되는 자바스크립트 문법이 다소 한정적.. 조건문도 우리가 알고 있는 `if` 문보다는 좀더 간결하고 직관적인 조건문을 사용
결국 반복과 조건 정도의 주요 문법이 앱의 중요 로직들을 생성합니다. 따라서 자주 사용되는 자바스크립트 몇 가지를 앱 코드 상에서 연습 💯
1) 리액트 네이티브 = 리액트(React) + 네이티브(Native) > 페이스북에서 만든 프론트 기술의 하나!!
리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 입니다 *라이브러리 =개발 할 때 사용하는 도구입니다!
그렇지만 정말 리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로만 앱 개발은 어렵다?! 특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생하는데,, 안드로이드, iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야하고 그러면 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 된당😂
그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드,iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재한다!
우리가 곧 배울 Expo 명령어를 통해 다운 받은 앱에서 개발 중인 앱을 그때그때 눈으로 확인할 수 있다! *굳이 클라이언트 앱이라고 지칭한 이유는, 실제 Expo 에서 이렇게 부르기도하고 개발하고 있는 화면을 사용자 입장에서 휴대폰으로 확인할 수 있기 때문!
우리는 처음부터 끝까지 자바스크립트로 앱을 만드는 과정을 함께하게 됩니다. 똑똑한 개발자들이 미리 만들어놓은 자바스크립트 선물 상자들을 가져와서 적재적소에 사용할건데, >> 이때 필요한게 Node고 NPM
우리가 리액트 네이티브로 앱을 개발한다는 것은... Node.js로 자바스크립트 개발 환경을 구축하고, NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 모습이라 할 수 있다.
Yarn (NPM도구)
앱 개발을 할때 필요한 자바스크립트 도구를 NPM이라는 애로 가져올 수 있는데 더 효율적인 도구를 가지고 오는 Yarn을 설치 하기 위해서 NPM을 설치한다 (yarn은 npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴) >> NPM을 통해서 Yarn을 설치한다
//맥은 terminal, 윈도우는 cmd 검은 창에 다음과 같이 순서대로 입력해보도록 하겠습니다
//도구를 가져와 설치하는 npm 의 설치 명령어 install과
//컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어
npm install -g yarn
//설치가 완료된다음
yarn -v
Expo 명령어 도구 설치
npm install -g expo-cli
//이 명령어 한 줄은 이런 의미가 담겨 있습니다.
**npm** // 노드 패키지 매니저 명령을 실행하겠다
**install** // 설치하겠다
**-g** // 컴퓨터 전역적으로 설치하겠다 == 어디서든지 -g 다음에 오는 명령어를 사용할 수 있게끔!
**expo-cli**// 설치 할 패키지 이름
//따라서 우린 이 명령어 한 줄로, 여러분 컴퓨터 어디서든지 Expo를 사용할 수 있게끔
//패키지를 전역적으로 설치했습니다.
Expo를 설치 및 사용한다는 것은, Expo가 기본적으로 제공해주는 명령어들...
1) 프로젝트 생성, 2) 프로젝트 실행, 3) 프로젝트 빌드 등등의 여러 기능들을 사용 할 수 있다는 것을 뜻합니다.
실제 사용 방법은 다음 시뮬레이터 설치 후 확인해보도록 하겠습니다!
Expo 가입 및 로컬에 Expo 계정 세팅 **Expo로 개발중인 앱을 마켓에 배포하기 위해선 여러분들 컴퓨터에 Expo 계정을 세팅해야 추후에 배포 앱 관리와 배포를 한번에! 진행할 수 있습니다
가입후 로그인을 하게되면, 나중에 앱을 배포할때 나의 대시보드에 배포한 앱의 히스토리까지 관리가 되고, 앱을 개발하고 배포할 때 필요한 파일까지 Expo서비스가 다 만들어서 제공을 해준다고..!!
로컬에 Expo 계정 세팅 Expo 계정을 생성했으면, 여러분들 컴퓨터에 Expo 계정을 연결시켜줘야 합니다. 컴퓨터로 해당 계정으로 로그인을 하고, 윈도우는 cmd & 맥은 terminal에서 다음 명령어를 실행합니다.
expo login --username "Expo 사이트 가입당시 입력한 name"
...
expo 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!
Expo 앱 생성 및 실행하기 *바탕화면에 앞으로 여러분들이 만들기도 하고 연습도 할 작업 공간인 폴더 하나를 만들어주세요.
여기서 이제 Expo 명령어를 치기 위해 에디터 상의
즉 상단의 View > 터미널을 엽니다.
그럼 에디터 하단에 우리가 명령어를 칠 수 있는 공간이 확보됩니다.
거기에 다음 명령어를 입력해주세요
**expo**는 Expo 명령어를 사용하겠다.
**init**은 Expo 앱을 생성하는 Expo 명령어!
**sparta-myhoneytip-영어이름**은 앱 이름!
영어이름엔 여러분들 영어이름을 넣어주세요 가령
sparta-myhoneytip-gun 처럼요!
여러분들 만의 고유한 앱 이름을 위해 이렇게 짓도록 하겠습니다.
**********오류 해결법
[Windows] 윈도우를 사용하는데
expo init 또는 expo start 를 진행하니
expo : 이 시스템에서 스크립트를 실행할 수 없으므로
C:\Users\PC\AppData\Roaming\npm\expo.ps1 파일을 로드할 수 없습니다.
오류가 발생합니다.
(영어 윈도우: expo : File C:\Users\PC\AppData\Roaming\npm\expo.ps1
cannot be loaded because running script is disabled on this system. )
위 같은 오류가 나면 Terminal > new terminal > Configure Terminal Settings
@feature:terminal 만 되어 있을텐데 여기서 default 추가해주고, Command Prompt로 바꿔주기
그러면 아래처럼 짜잔~~!! 실행 오류가 안떠요^ㅁ^
도화지 상태에서 앱을 만들거라 저 상태에서 엔터를 쳐줍니다 :)
도화지 상태라고 해서 앱을 개발할때 필요한 도구는 갖춰져 있으며 화면만 도화지 상태로 그림을 채워넣을 수 있는 상태라고 한다. 폴더가 생겼다! Expo 앱이 완료되었단 뜻은, 위에서 우리가 고른 blank 타입의 앱. 즉, Expo가 제공 해주는 스타터 키트같은 기본앱을 만들어 제공해주는 것입니다.
따라서 우린 앞으로 Expo가 만들어준 기본 앱을 수정하며 앱을 만들어 나감!
//현재 Expo앱을 부모 폴더에서 만들고 부모 폴더에 존재합니다
//내컴퓨터에 C드라이브를 바라보고 있으면 C드라이브 안의 내용물들을 볼 수 없는 것처럼,
//터미널상에서 여러분들의 위치는 방금 만든 Expo앱을 바라보고 있을 뿐입니다.
//즉, 여러분들은 이제 여러분들이 만든 Expo앱 폴더 안으로 들어가야 하는데요!
// 터미널에서 이렇게 명령어를 치면 됩니다.
cd <폴더명> // change directory의 약자로 입력한 폴더명으로 이동하는 명령어입니다.
cd sparta-myhoneytip-[영어이름]
이제 만든 폴더 안으로 들어왔으므로 생성한 Expo앱을 실행해봅시다.
expo start
**자동으로 열린 Expo 개발자 도구 왼편에는 여러 버튼이 존재합니다. 1. Run on Android device/emulator 컴퓨터와 USB로 연결된 안드로이드 휴대폰 또는 우리가 설치한 안드로이드 시뮬레이터로 Expo을 실행시키는 버튼
2. Run on iOS simulator 설치한 iOS 시뮬레이터로 Expo 앱을 실행시키는 버튼
3.Run on web browser 작업중인 Expo 앱을 브라우저에서 확인 하는 버튼. 즉, 웹 플랫폼에 대응 하게끔 지원 4. Send link with email 작업 중인 Expo 앱은 Expo 클라이언트 앱이 설치되어 있는 휴대폰 어디서든 실행할 수 있습니다. 즉 이 때 개발중인 Expo앱 링크를 통해서도 바로 Expo 클라이언트 앱으로 개발중인 앱 확인이 가능합니다.
5 Public or republish project 리액트 네이티브&Expo는 안드로이드, IOS, 웹 세 플랫폼에 대응하는 애플리케이션을 만들 수 있다고 언급한 바 있습니다. 바로 지금 우리는 세 플랫폼 중 웹에서 애플리케이션을 띄워 본겁니다!. 정말 간단하죠?
그런데 expo start명령어 실행 결과를 보면, QR코드가 나타나는 것을 볼 수 있습니다. 여러분들 휴대폰에 Expo 클라이언트 앱이 설치되어 있단 가정하에, 휴대폰 카메라로 저 QR코드를 인식해보시기 바랍니다.
그럼 여러분들 휴대폰에 설치되어 있는 Expo 클라이언트 앱을 열까? 라고 물어보며 켜줘!라고 클릭을 하게되면, 지금 컴퓨터에서 여러분들이 expo start로 실행시킨 Expo 서버 위에서 돌아가고 있는 Expo 앱을 휴대폰에서, 더 정확히는 Expo 클라이언트 앱에서 확인 할 수 있습니다. 또한 `expo start` 명령어를 실행시켰을 때, 자동적으로 열렸던 크롬 브라우저의 expo 개발자 도구 화면에서 우측 상단의 버튼을 누르면 화면이 분할 되면서 Expo 웹 플랫폼 앱과 현재 여러분 휴대폰에서 실행되고 있는 앱 플랫폼에 대한 상태 로그들을 동시에 확인 할 수 있게 됩니다.
유의 사항
1. 간혹 Expo 버전에 따라 위 화면에서 화면 분할이 되지 않아,
개발 중인 앱의 상태 로그를 볼 수 없는 경우도 있습니다.
그럴땐, 당황하지 않고!
vscode 상에서 expo start 명령어를 쳤던 터미널을 보시면 로그들을 확인 할 수도 있습니다!!
2. 연결이 안되시는 분들이 간혹 있습니다!. 그럴땐 두 가지를 체크해보면 좋습니다.
(1) 컴퓨터가 연결된 와이파이와 앱을 실행시키는 휴대폰에 연결된 와이파이가 동일한지!
(2) 왼쪽 하단 QR 코드 위에 , Tunnel, Lan, Local 모두 눌러보면서 되는 환경을 찾아보기!
^(2)의 이유는, 각 컴퓨터 마다 환경 설정이 다르기 때문입니다.
방화벽이 그 이유일 수도 있구요! 네트워크 환경이 다를 수도 있습니다.
그렇기 때문에, 정상적으로 실행되는 환경을 찾아보시길 추천 드립니다!
Expo 프로젝트 기본 폴더 구조 expo init으로 프로젝트를 생성하면 Expo로 부터 기본 골격이 짜여져 있는 코드 다발을 받게되는 셈입니다.
assets 앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더 입니다.
node_modules 여러분들이 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소입니다.
App.js 리액트 네이티브 앱이 시작되는 `출발선` 및 `진입점`입니다. (앱이 시작될 때 가장 먼저 실행되는 자바스크립트 파일) 웹으로 따지면 index.html 또는 main.html처럼 메인 파일이라고 생각하면 편합니다.
여기선 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소이며, 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳입니다.
준비가 끝나면, 본 화면을 보여줍니다.
즉 앞으로 우리가 만들 앱은 모두 App.js로부터 시작됩니다.
app.json 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될때 보여질 아이콘, 앱이 켜질때 보여지는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등
