앱개발 준비 - 리액트 네이티브&Expo 설치 및 세팅하기

이 글은 제가 앱개발을 하며 알게 된 내용, 느낀 점 등을 기록하고자 쓰는 글입니다. '스파르타코딩클럽'의 '앱개발 종합반' 강의를 듣고 배우고 있습니다. 내용에 대한 반박과 피드백은 늘 감사히 받겠습니다.

<목차>
1. 대략적인 앱개발 소개 : 리액트, Expo, jsx
2. 리액트 네이티브 & Expo 소개 및 설명
3. 리액트 네이티브 & Expo 설치 및 세팅
4. Expo 실행하기
5. Expo 프로젝트 기본 폴더 구조

1. 대략적인 앱개발 소개 : 리액트, Expo, jsx

이번 앱개발에서는 리액트 네이티브 앱 개발을 더 편하고 쉽게 도와주는 Expo라는 도구를 사용하여 진행합니다.

문법 언어는 JSX를 사용할 건데요, 앱개발 즉 리액트 네이티브 앱 개발에서 구역(레이아웃)을 잡는 문법 언어입니다.
JSX문법은 정말 간단하게, 화면의 구역을 잡을 때는 <View> 태그를, 글자를 쓸때는 <Text> 태그를 사용하라는 것처럼, 용도에 맞는 태그를 정해놨습니다. 그래서 우린 필요한 태그를 그때그때 꺼내서 사용하면 됩니다.
(태그란 <>과 같이 꺽쇠로 표현하는 프로그래밍 문법을 뜻합니다! 태그 문법의 또다른 언어에는 HTML이 있습니다.)

2. 리액트 네이티브 & Expo 소개 및 설명

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

(라이브러리란? 쉽게 말해 개발 할 때 사용하는 도구입니다.)

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

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

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

ios 클라이언트 앱 다운 링크
안드로이드 클라이언트 앱 다운 링크

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

3. 리액트 네이티브 & Expo 설치 및 세팅

Node.js & npm & yarn 설치하기

처음부터 끝까지 자바스크립트로 앱을 만드는건 맞지만, 자바스크립트로 바닥부터 만들어가는 것은 아닙니다. 똑똑한 개발자들이 미리 만들어놓은 자바스크립트 선물 상자들을 가져와서 적재적소에 사용해 나아갑니다. 이때 필요한게 Node고 NPM 입니다.

우리가 리액트 네이티브로 앱을 개발한다는 것은...

Node.js로 자바스크립트 개발 환경을 구축한다.
NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용한다.

Windows(윈도우)에서 node.js와 npm 설치하기 다운로드
Mac(맥)에서 node.js와 npm 설치하기 다운로드

그리고 yarn이라는 것도 쓰입니다.

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

정확히 알면 물론 좋겠지만...대충 node.js가 개발 환경을 구축하고, npm을 이용해서 개발도구를 가져오며, yarn을 이용해서 더 가볍고 빠르게 자바스크립트 패키지를 다룬다고 생각하면 됩니다. 코딩을 더 쉽게 해주는 도구들이라고 생각하면 좋을 것 같습니다.

맥은 terminal, 윈도우는 cmd 검은 창에 다음과 같이 순서대로 입력해 yarn을 설치하겠습니다.

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

Expo 명령어 도구 설치하기

자 그럼 이제 이제 본격적으로 Expo 명령어 도구를 여러분 컴퓨터에 설치할 차례입니다. 이 Expo 명령어로 우린 앱도 생성하고, 필요한 앱 개발 도구도 설치합니다.

npm install -g expo-cli

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

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

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

맥 사용자분들은 npm 명령으로 도구들을 설치할 때 "permission denied"라는 오류가 발생하면, 당황하지말고 sudo를 앞에 붙여주세요.

sudo npm install -g expo-cli

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

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

Expo 가입 & 로컬에 Expo 계정 세팅하기

Expo로 개발중인 앱을 마켓에 배포하기 위해선 컴퓨터에 Expo 계정을 세팅해야 합니다. 그래야 추후에 배포 앱 관리와 배포를 한번에! 진행할 수 있습니다.

저는 앱을 만든 후 출시까지 목표로 하고 있기 때문에 계정을 세팅해주겠습니다.

가입링크에 들어가서 가입을 진행합니다. 가입 후 로그인을 하게 되면, 아래 화면과 같이 앞으로 앱을 개발하고 배포할 때, 다음과 같이 대시보드에 업로드된 앱들을 확인할 수 있습니다. (전 아직 업로드하고 출시한 앱이 없어 비어있네요.😂)

Expo 계정을 생성했으면, 컴퓨터에 Expo 계정을 연결시켜줘야 합니다.

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

expo login --username "Expo 사이트 가입당시 입력한 name"

...

expo 패스워드 입력란이 나오고, 차례대로 입력하면 로그인 성공

4. Expo 실행하기

앞으로 만들고 연습도 할 작업 공간인 폴더 하나를 만들어주세요. 저는 스파르타코딩클럽에서 배우고 있기 때문에 폴더 이름을 sparta-study로 해주었습니다 ㅎㅎ

만든 다음 VSCode에서 해당 폴더를 열어주세요. 아마 빈 파일을 바라보게 될 겁니다. (당연히 빈 폴더니까)

여기서 이제 Expo 명령어를 치기 위해 에디터 상의 terminal을 열고 다음 명령어를 입력해주세요.

expo init {앱 이름}

/*
저는 expo init sparta-eeeun 이라고 입력해주었습니다.

expo는 Expo 명령어를 사용하겠다.
init은 Expo 앱을 생성하는 Expo 명령어!
sparta-eeeun은 앱 이름!
*/

그럼 터미널에서 어떤 유형의 Expo 앱을 만들어줄까? 라고 물어보는데, blank를 선택해주세요.

그러면 조금 이따 Expo 앱이 완료되었다고 터미널에 나타납니다. 그리고 VSCode 왼편에 프로젝트 앱 폴더도 생성된 것을 확인 할 수 있습니다.

cd <폴더명>

//cd sparta-eeeun

다음 명령어로 앱 폴더로 들어가면 됩니다. 폴더 안으로 들어왔으므로 생성한 Expo앱을 실행해보겠습니다.

expo start

expo start 명령어를 실행하면 터미널에 Expo 실행이 진행되며, 자동으로 브라우저가 열리면서 Expo 앱을 열 준비를 합니다.

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

반대로 서버를 끌땐?

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

expo start 명령어로 인해 자동으로 열린 브라우저입니다. Expo 개발자 도구 왼편에는 여러 버튼이 존재합니다.

• Run on Android device/emulator

  컴퓨터와 USB로 연결된 안드로이드 휴대폰 또는 우리가 설치한 안드로이드 시뮬레이터로 Expo을 실행시키는 버튼입니다.

• Run on iOS simulator

  설치한 iOS 시뮬레이터로 Expo 앱을 실행시키는 버튼입니다.

• Run in web browser

  작업중인 Expo 앱을 브라우저에서 확인 하는 버튼. 즉, 웹 플랫폼에 대응 하게끔 지원합니다.

  왼쪽 버튼 중에서 Run in web browser를 눌러보면 바로 볼 수 있음
  

• Send link with email

  작업 중인 Expo 앱은 Expo 클라이언트 앱이 설치되어 있는 휴대폰 어디서든 실행할 수 있습니다. 즉 이 때 개발중인 Expo앱 링크를 통해서도 바로 Expo 클라이언트 앱으로 개발중인 앱 확인이 가능합니다.

• Public or republish project

  앱을 사용자 계정의 Expo 공식사이트에 업로드합니다. Expo 공식 사이트에 개발한 앱을 배포하게되면, 사이트에서 안드로이드 용 APK파일 혹은 IOS용 ipa 파일을 빌드하여 다운로드 받을 수 있습니다. 이걸 가지고 직접 안드로이드 마켓 혹은 애플 스토어에 앱을 출시할 수 있습니다.
  

그리고 그 아래에 보면 QR코드가 있습니다. Expo 클라이언트 앱이 설치된 휴대폰 카메라로 QR 코드를 인식하면 Expo 클라이언트 앱이 자동으로 앱을 열어줍니다.

5. Expo 프로젝트 기본 폴더 구조

• 1) assets

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

• 2)node_modules

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

• 3)App.js

  리액트 네이티브 앱이 시작되는 출발선 및 진입점입니다.
  웹으로 따지면 index.html 또는 main.html처럼 메인 파일이라고 생각하면 편합니다.

  여기선 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소이며, 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳입니다.

  준비가 끝나면, 본 화면을 보여줍니다.

  즉 앞으로 우리가 만들 앱은 모두 App.js로부터 시작됩니다.

  

  쉽게 말하자면 앱이 시작될 때 가장 먼저 실행되는 자바스크립트 파일! 정도로 알아두면 됩니다.
  

• 4) app.json

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

  후반부에 광고 및 배포외엔 거의 다룰 일이 없으므로, 일단 알아만 둡니다!

👉 참고한 내용

스파르타코딩클럽 '앱개발 종합반' 2주차 강의 & 강의자료