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

리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두 가지 모두 만들어주는 라이브러리이고 라이브러리는 개발할 때 사용하는 도구이다.

정말 리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능하다 했지만 그렇지 않음을 알 수 있다.

특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생한다.

안드로이드, iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야 하는데, 그러면 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 된다.

그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드, iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재한다.

Expo란?

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

리액트 네이티브로 앱을 개발할 때, 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴이다. 또한 앱 개발을 편리하게 해주는 도구들이 많이 존재한다.

Expo에서 제공해주는 공식 문서와 리액트 네이티브 공식 문서만 따라 보면서 앱을 만들면, 마치 미니카 조립하듯 앱이 뚝딱 만들어진다.

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

• IOS 클라이언트 앱 다운: https://apps.apple.com/app/apple-store/id982107779

‎Expo Go

• 안드로이드 클라이언트 앱 다운: https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www 

Expo - Google Play 앱

Expo 명령어를 통해 다운로드한 앱에서 개발 중인 앱을 그때그때 눈으로 확인할 수 있다.

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

Yarn, Expo 설치하기

설치하기에 앞서 yarn은 npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리할 수 있게 해주는 자바스크립트 패키지 매니저 툴이다. 
각자의 장단점이 있지만, 우린 앞으로 패키지 관리자로 yarn을 좀 더 많이 사용하게 된다.

 

• Yarn설치: 맥은 terminal, 윈도우 cmd 창에서 npm install -g yarn 엔터 후 설치가 완료되면 yarn -v 엔터로 버전 확인!
• Expo설치: npm install -g expo-cli 엔터 후 설치가 완료되면 expo --versoon 엔터로 버전 확인!

Expo 가입링크: https://expo.dev/signup

Sign Up — Expo

Expo 로그인

1. 윈도는 cmd 맥은 terminal에서 다음 명령어를 실행한다.
2. cmd 창에서 expo login 입력
3. 이메일 입력
4. 패스워드 입력
5. Success. You are now logged in as name. 메시지 내용 확인하면 끝.

Visual Studio Code

Visual Studio Code를 켜고 연습할 새폴더를 만들고 VSCode에서 폴더를 열어준다.

Ctrl + ~ 눌러주면 VSCode 하단에 cmd창을 이용할 수 있다.

expo init sparta-myhoneytip-hyuk(이름) 입력한 후 엔터!

blank               a minimal app as clean as an empty canvas(비어 있는 스케치북) 선택 엔터!

VSCode 모습

Expo가 알아서 블랭크에 맞는 프로젝트를 준비해준다.

디펜던시 도구들과 여러 가지 필요한 코드들을 폴더와 함께 준비해준다.

VS코드에서 명령어를 칠 수 있는 곳을 열어놨고 sparta-study 폴더 안에 있다는 것도 확인했다.

expo-init이라는 것으로 sparta-myhoneytip-hyuk이라는 프로젝트도 만들었다.

이제 그 폴더 안으로 들어가기 위해서 change-directory라는 리눅스 명령어를 치거나 cd sparta-myhoneytip-hyuk 입력 후 엔터를 치면 아래 스샷처럼 sparta-myhoneytip-hyuk> 이렇게 표현된다. sparta-myhoneytip-hyuk 폴더 안으로 들어갔다는 뜻이 되고 항상 내가 어떤 폴더에 있는지 보는 게 가장 중요하다.

vs 코드 화면

그리고 커맨드 창에서 cd .. 전 단계로 이동한다.(sparta-myhoneytip-hyuk 폴더에서 나와서 sparta-study폴더)

다시 cd sparta-myhoneytip-hyuk 프로젝트로 이동하여 exp start 입력 후 엔터!

exp start 입력 후 모습

명령어를 실행하면 터미널에 Expo 실행이 진행되며 안드로이드인 경우, 핸드폰에 expo go라는 애플리케이션을 다운로드 후~ 해당 QR코드를 인식해주면 된다!(같은 네트워크여야 한다.)

IOS인 경우, 핸드폰 카메라로 해당 QR코드를 인식해주시면 된다!(같은 네트워크여야 한다.)

expo start 명령어는 Expo 서버를 킨 것과 동일하고, Expo 서버를 켠다는 것은 현재 개발하고 있는 앱을 실행시킨다는 뜻과 같다.

반대로 서버를 끌 땐?
윈도 : 컨트롤 + c
맥 : command + c
앱을 실행시키고 나면 expo 앱을 어디서 확인할지는 선택해야 한다.

vscode 폴더 구조

1. assets: 앱이 동작되고 서비스되는 데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더.
2. node_modules: 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소.
3. App.js: 리액트 네이티브 앱이 시작되는 출발선 및 진입점.
   웹으로 따지면 index.html 또는 main.html처럼 메인 파일이라고 생각하면 편하다.
   앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소이며, 준비를 할 때 준비 중입니다~라는 화면도 띄워주는 곳이며, 준비가 끝나면, 본 화면을 보여주고 즉 앞으로 우리가 만들 앱은 모두 App.js로부터 시작된다.
4. app.json: 앱의 이름, 앱의 출시 버전, 앱이 휴대폰에 설치될 때 보여질 아이콘, 앱이 켜질 때 보이는 스플래시 스크린 화면, 안드로이드 또는 IOS 각각의 광고 설정 등 앱이 가지는 기본 정보들을 설정하는 파일이다.