(나의개발일지) 2-1주차

[앱 개발 준비] 시작하는 리액트 네이티브 & Expo

 

리액트 네이티브 앱 개발을 더 편하고 쉽게 도와주는 Expo라는 도구로 앱 개발을 진행!
이에 대해 조금 살펴보고, 개발에 필요한 준비들을 진행!
도구들이 제공해주는 사용 설명서를 보면서 조립해 나가면 앱이 완성!

 

앱 개발, 즉 리액트 네이티브 앱 개발에서 구역(레이아웃)을 잡는 문법 언어를 JSX.

JSX문법은 정말 간단하게, 화면의 구역을 잡을 때는 <View> 태그를, 글자를 쓸때는 <Text> 태그를 사용

태그란 <>과 같이 꺽쇠로 표현하는 프로그래밍 문법을 뜻합니다! HTML들어보셨나요? HTML도 태그 문법!

 

//잠시 살펴보는 JSX  !!! (예시)

//이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용합니다.
import { Text, View } from 'react-native';

<View>
  <Text>Hello, I am {props.name}!</Text>
</View>

 

리액트 네이티브로 앱을 제작 하다보면, 자주 사용되는 자바스크립트 문법이 다소 한정적!

조건문도 우리가 알고 있는 if 문보다는 좀더 간결하고 직관적인 조건문을 사용.

 

---

1) 리액트 네이티브 = 웹 기술 리액트(React) + 앱 기술 네이티브(Native)

리액트 네이티브는 자바스크립트 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 입니다

라이브러리란? 개발 할 때 사용하는 도구

 

리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능 하다 했지만 그렇지 않음을 알 수 있습니다. 위 이미지에서 볼 수 있듯이 특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생. 안드로이드, iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야하는데, 그러면 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 됩니다😂 그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드,iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재.  => 바로 EXPO

 

---

2) Expo란?

(1) 안드로이드&iOS 코드를 정말 몰라도 개발이 가능!

리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴. 또한 앱 개발을 편리하게 해주는 도구들이 많이 존재. Expo에서 제공해주는 공식 문서와 리액트 네이티브 공식 문서만 따라 보면서 앱을 만들면, 금방 만들 수 있음.

 

Expo는 개발 중인 앱 테스트를 위한 Expo Go 앱을 제공.

Expo go는 핸드폰에서 바로 확인이 가능함

우리가 곧 배울 Expo 명령어를 통해 다운 받은 앱에서 개발 중인 앱을 그때그때 눈으로 확인할 수 있습니다!

*클라이언트 앱이라고 지칭한 이유는, 실제 Expo 에서 이렇게 부르기도하고 개발하고 있는 화면을 사용자 입장에서 휴대폰으로 확인할 수 있기 때문.

 

---

(1) Node와 NPM

Node.js로 자바스크립트 개발 환경을 구축하고,

NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 모습.

 

(2) Yarn (npm으로 설치필요)

//도구를 가져와 설치하는 npm 의 설치 명령어 install과
//컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어
npm install -g yarn
//설치가 완료된다음
yarn -v

 

4) Expo 명령어 도구 설치

yarn은 npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴.

각자의 장단점이 있지만, 우린 앞으로 패키지 관리자로 yarn을 좀 더 많이 사용.

 

맥 사용자분들은 npm 명령으로 도구들을 설치할 때 "permission denied"라는 오류가 발생하면, 당황하지말고 sudo를 붙임. sudo npm install -g expo-cli 

 

윈도우 버전.

npm install -g expo-cli

npm: 노드 패키지 매니저 명령을 실행하겠다 install: 설치하겠다 -g: 컴퓨터 전역적으로 설치하겠다 == 어디서든지 -g 다음에 오는 명령어를 사용할 수 있게끔! expo-cli: 설치 할 패키지 이름

 

---

Expo를 설치 및 사용한다는 것은,

Expo가 기본적으로 제공해주는 명령어들... 1) 프로젝트 생성, 2) 프로젝트 실행, 3) 프로젝트 빌드 등등의 여러 기능들을 사용 할 수 있다는 것 의미

 

5) Expo 가입 및 로컬에 Expo 계정 세팅

Expo로 개발중인 앱을 마켓에 배포하기 위해선 여러분들 컴퓨터에 Expo 계정을 세팅 필요. 그래야 추후에 배포 앱 관리와 배포를 한번에! 진행 가능

 

2) 로컬에 Expo 계정 세팅

Expo 계정을 생성했으면, 여러분들 컴퓨터에 Expo 계정을 연결 필요.

윈도우는 cmd 맥은 terminal에서 다음 명령어를 실행합니다.

expo login
...
expo 아이디(또는 이메일), 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!

expo --help라고 치면 메뉴얼도 나옴

 

---

여기서 이제 Expo 명령어를 치기 위해 에디터 상의 터미널을 엽니다.

그럼 에디터 하단에 우리가 명령어를 칠 수 있는 공간이 확보.

거기에 다음 명령어를 입력. expo는 Expo 명령어를 사용하겠다. init은 Expo 앱을 생성하는 Expo 명령어! sparta-myhoneytip-영어이름은 앱 이름! 영어이름엔 여러분들 영어이름을 넣으면 됨 (예시) sparta-myhoneytip-gun 처럼요! 

 

Expo 앱 유형 = blank

즉, Expo가 제공 해주는 스타터 키트같은 기본앱을 만들어 제공해주는 것

 

여러분들은 현재 Expo앱을 부모 폴더에서 만들고 부모 폴더에 존재합니다

내컴퓨터에 C드라이브를 바라보고 있으면 C드라이브 안의 내용물들을 볼 수 없는 것처럼, 여러분들 터미널상에서 여러분들의 위치는 방금 만든 Expo앱을 바라보고 있을 뿐입니다.

즉, 여러분들은 이제 여러분들이 만든 Expo앱 폴더 안으로 들어가기 위해서  터미널에서 이렇게 명령어를 치면 됨.

cd <폴더명> : change directory의 약자로 입력한 폴더명으로 이동하는 명령어

 

---

 

<aside> 👉 expo start 명령어를 실행하면 터미널에 Expo 실행이 진행되며

안드로이드인 경우, 핸드폰에 expo go 라는 어플리케이션을 다운로드 후! 해당 QR코드를 인식(같은 네트워크여야합니다.)

반대로 서버를 끌땐?

윈도우 : 컨트롤 + c 맥 : command + c

</aside>

 

---

1) assets 앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더
2)node_modules 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소.

3)App.js
리액트 네이티브 앱이 시작되는 출발선 및 진입점입니다. 웹으로 따지면 index.html 또는 main.html처럼 메인 파일이라고 생각하면 편함. 여기선 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소이며, 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳. 준비가 끝나면, 본 화면을 보여줍니다. 즉 앞으로 우리가 만들 앱은 모두 App.js로부터 시작됩니다.

4)app.json

앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될때 보여질 아이콘, 앱이 켜질때 보여지는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등 앱이 가지는 기본 정보들을 설정하는 파일. 후반부에 광고 및 배포 위주

 

---

 

1) Expo 명령어 설치 2) 로컬에 Expo 계정 세팅 3) expo init 명령어로 기본 앱 생성 4) expo start로 Expo 앱 실행 5) 휴대폰에 설치한 Expo 클라이언트 앱으로 Expo 앱 실행