[2주차]스파르타코딩클럽 - 앱개발(설치)

자바스크립트 언어 하나로 앱 개발이 가능하다!

Expo : 리액트를 쉽게 사용해줄 수 있는 도구.

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

(정해진 태그가 있다)

JSX문법은 정말 간단하게, 화면의 구역을 잡을 때는 <View> 태그를, 글자를 쓸때는 <Text> 태그를 사용하라는 것처럼, 용도에 맞는 태그를 정해놨습니다. 그래서 우린 필요한 태그를 그때그때 꺼내서 사용하면 됩니다.

리액트 네이티브로 앱을 제작 하다보면, 자주 사용되는 자바스크립트 문법이 다소 한정적이게 됩니다! 조건문도 우리가 알고 있는 if 문보다는 좀더 간결하고 직관적인 조건문을 사용합니다.

//잠시 살펴보는 JSX  !!!

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

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

1) 리액트 네이티브 = 리액트(React) + 네이티브(Native)

리액트를 기반으로 나온 리액트네이티브.

라이브러리 : 쉽게 개발할 때 사용하는 도구.

리액트 파일 구조

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

레거시 전통기발이 아닌 요즘 시대에 맞는 개발로 처음접하는 사람은 러닝커브가 있을 수 있음.

리액트 네이티브를 쉽게 할 수 있는 Expo라는 도구를 사용해 쉽게 접근한다.

안드로이드와 ios를 몰라도 개발할 수 있게 도와주는 도구.

순수 리액트네이티브로만 개발할 때(블루투스,진동)를 사용할때는 실제 코드를 건들여야할 수도 있다.

리액트 네이티브와 Expo를 같이 써야지 자바스크립트로만 개발이 가능하다.

리액트네이티브는 안드로이드와 ios단을 건드려야하는 상황이 오는 순수한 네이티브 기술이고

Expo는 오로지 자바스크립트만 개발할 수 있게 도와주는 도구.

Expo는 개발 중인 앱 테스트를 위한 Expo 클라이언트 앱을 제공해줍니다.

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

 

Node.js로 자바스크립트 개발 환경을 구축하고, NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 모습이라 보면 됩니다.

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

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

cls - cmd창내역을 깔끔하게 지운다.

Expo 설치

npm install -g expo-cli (cli 커맨드라인)

이 명령어 한 줄은 이런 의미가 담겨 있습니다.

npm: 노드 패키지 매니저 명령을 실행하겠다

install: 설치하겠다

-g: 컴퓨터 전역적으로 설치하겠다 == 어디서든지 -g 다음에 오는 명령어를 사용할 수 있게끔!

expo-cli: 설치 할 패키지 이름

 

따라서 우린 이 명령어 한 줄로, 여러분 컴퓨터 어디서든지 Expo를 사용할 수 있게끔 패키지를 전역적으로 설치했습니다.

expo --version으로 버전 확인하기

Expo를 설치 및 사용한다는 것은, Expo가 기본적으로 제공해주는 명령어들...

1) 프로젝트 생성, 2) 프로젝트 실행, 3) 프로젝트 빌드 등등의 여러 기능들을 사용 할 수 있다는 것을 뜻합니다.

expo의 가장 큰 장점은 배포가 쉬워진다.대시보드로 파일을 업로드 하면 끝이다.

cmd > expo login > 이메일,비밀번호 입력 > 로그인 성공

vs code 실행후 

여기서 이제 Expo 명령어를 치기 위해 에디터 상의 터미널을 엽니다. 그럼 에디터 하단에 우리가 명령어를 칠 수 있는 공간이 확보됩니다. 거기에 다음 명령어를 입력해주세요 expo는 Expo 명령어를 사용하겠다. init은 Expo 앱을 생성하는 Expo 명령어! sparta-myhoneytip-영어이름은 앱 이름!, 후에 템플릿을 고르게 되면 blank를 선택해주세요

그러면 조금 이따 Expo 앱이 완료되었다고 터미널에 나타납니다. 그리고 왼편에 프로젝트 앱 폴더도 생성된 것을 확인 할 수 있습니다. Expo 앱이 완료되었단 뜻은, 위에서 우리가 고른 blank 타입의 앱. 즉, Expo가 제공 해주는 스타터 키트같은 기본앱을 만들어 제공해주는 것입니다.

 

내컴퓨터에 C드라이브를 바라보고 있으면 C드라이브 안의 내용물들을 볼 수 없는 것처럼, 여러분들 터미널상에서 여러분들의 위치는 방금 만든 Expo앱을 바라보고 있을 뿐입니다. 즉, 여러분들은 이제 여러분들이 만든 Expo앱 폴더 안으로 들어가야 하는데요! 터미널에서 이렇게 명령어를 치면 됩니다. cd <폴더명> : change directory의 약자로 입력한 폴더명으로 이동하는 명령어입니다.

cd sparta-myhoneytip-gun

gui : 그래픽 유저 인터페이스

커맨드 창에서 뒤로가기는 뭘까?

cd <폴더명> 은 폴더명으로 진입하는 명령어 였습니다. 그럼 진입한 폴더에서 다시 뒤로 나오는, 뒤로가기 명령어는 뭘까요? 너무 간단하게도 다음과 같습니다. cd .. cd + 띄고 + .. 입니다! ..이 뒤로가기라는 뜻을 담고 있다는 것을 기억한다면 곧 코드 단에서 다시 마주칠때 당황하지 않을 수 있습니다! 자바스크립트 모듈을 다룰 때 다시 보게되거든요

 

1) assets

앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더 입니다.

2)node_modules

여러분들이 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소입니다.

3)App.js

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

4)app.json

실 배포할때 쓰인다. 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될때 보여질 아이콘, 앱이 켜질때 보여지는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등 앱이 가지는 기본 정보들을 설정하는 파일입니다. 후반부에 광고 및 배포외엔 거의 다룰 일이 없으므로, 일단 알아만 둡니다!

 

expo start

expo start 명령어를 실행하면 터미널에 Expo 실행이 진행되며, 자동으로 브라우저가 열리면서 Expo 앱을 열 준비를 합니다. expo start 명령어는 Expo 서버를 킨 것과 동일합니다. Expo 서버를 킨다는 것은 현재 개발하고 있는 앱을 실행시킨다는 뜻과 같습니다.. 반대로 서버를 끌땐? 윈도우 : 컨트롤 + c 맥 : command + 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는 배포도 쉽게 도와주는 친구!

 

QR코드를 휴대폰으로 인식하면 Expo클라이언트앱이 띄워준다.

app.js폴더를 확인하면 글귀가 화면에 나온다.

※연결시 같은 와이파이여야지 연결이 된다.

왼쪽 하단 QR 코드 위에 , Tunnel, Lan, Local 모두 눌러보면서 되는 환경을 찾아보기!