[React Native] Expo 설치 및 실행

React Native

˚ JavaScript 하나로 안드로이드 앱과 iOS 앱 모두를 만들어주는 라이브러리

   * 라이브러리: 소프트웨어를 개발할 때 재사용이 가능한 기능을 미리 구현해놓고 필요한 곳에서 호출해 사용할 수 있도록 만들어진 집합

 

˚ 실제로는 한 언어로 개발하는 것이 가능치 않음

 

 

· 옆의 이미지와 같이, 특정한 상황에서는 안드로이드와 iOS 폴더의 코드를 각각 수정해야 함

 

· 안드로이드 앱은 Java & Kotlin을, iOS 앱은 Swift를 사용하기 때문에 언어 하나로 앱을 만들 수 있다는 취지에 어긋남

 

· 안드로이드&iOS 개발 언어를 몰라도 React Native 앱 개발을 수월하게 해주는 도구, Expo가 존재

 

 

 

 

 

Expo

 

 

 

 

 

 

 

 

 

 

 

 

˚ React Native로 앱을 개발할 때 안드로이드&iOS 개발 언어를 몰라도 앱 개발을 가능케 함

     · Expo 공식 문서와 React Native 공식 문서를 활용하면 됨

˚ 개발 중인 앱을 실시간으로 확인할 수 있는 앱, Expo Go 제공

 

 

· 구글 플레이스토어에서는 Expo

· 안드로이드 클라이언트 앱 다운로드

 

 

 

 

 

 

 

 

 

 

 

 

 

· 애플스토어에서는 Expo Go

· iOS 클라이언트 앱 다운로드

 

 

 

 

 

 

 

 

 

Node.js & NPM 설치

1. Node.js와 NPM

    ˚ Node.js로 JavaScript 개발 환경을 구축, NPM으로 필요한 JavaScript 앱 개발 도구들을 가져와 사용함

    ˚ 다운로드 링크

2. Yarn

    ˚ NPM보다 가볍고 빠르게 JavaScript 패키지를 관리할 수 있게 해주는 JavaScript 패키지 매니저 툴

    ˚ windows는 cmd에, mac은 terminal에 명령어 입력

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

//오류가 발생할 경우
//- windows
//	cmd 열 때 우측 클릭해서 '관리자 권한으로 실행'
//- mac
//	명령어 앞에 sudo를 붙이면 됨 (관리자 권한으로 전역적으로 실행하겠다는 뜻)
		sudo npm install -g yarn
//	> 그 후 컴퓨터 비밀번호를 입력하면 됨

    ˚ command not found npm 이라는 오류가 뜬다면, npm이 설치되어 있지 않은 것

       > brew install npm을 입력. 맥주 아이콘이 뜨면 설치되고 있다는 것

 

 

Expo 명령어 도구 설치

    ˚ Expo 명령어 도구를 컴퓨터에 설치

    ˚ 이 Expo 명령어로 앱도 생성하고, 필요한 앱 개발 도구도 설치

npm install -g expo-cli

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

// Expo를 설치 및 사용한다는 것은, Expo가 기본적으로 제공해주는 명령어들
// 1) 프로젝트 생성,
// 2) 프로젝트 실행,
// 3) 프로젝트 빌드 등등의 여러 기능들을 사용 할 수 있다는 것을 뜻함

 

 

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

1. Expo 가입 (가입 링크)

2. 로컬에 Expo 계정 세팅

    ˚ 생성한 Expo 계정을 컴퓨터에 연결해야 함

    ˚ windows는 cmd, mac은 terminal에서 명령어 실행

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

 

 

Expo 앱 생성 및 실행

1. 프로젝트 폴더 생성

2. VSCode에서 해당 폴더 열기

3. VSCode의 터미널을 열어 명령어 입력

expo init 앱 이름(예: sparta-myhoneytip-영어이름)

// expo는 Expo 명령어를 사용하겠다
// init은 Expo 앱을 생성하는 Expo 명령어
// sparta-myhoneytip-영어이름은 앱 이름

// Choose a template에서 blank 선택하고 Enter
// 생성되는 데에 시간이 오래 걸림
// Expo 앱이 완료되었다고 나타나고, 밑의 이미지처럼 프로젝트 앱 폴더도 생성된 것을 확인할 수 있음
// Expo 앱이 완료되었단 뜻은, blank 타입의 기본앱을 만들어 제공해주는 것

4. cd <Expo앱 폴더명>

    ˚ Expo앱을 상위폴더에 만든 채로 그 상위폴더에 위치하고 있기 때문에, Expo앱 폴더 안으로 들어가야 함

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

    ˚ 참조) cd .. : 진입한 폴더에서 다시 뒤로 나오는, 뒤로가기 명령어

    ** 팁: 폴더명을 다 입력할 필요 없이, 앞 몇 글자를 입력하고 Shift + Tab을 누르면 폴더명이 자동완성됨

5. 생성한 Expo앱 실행

    ** Expo 실행 시의 오류 해결방법 (링크)

expo start 입력 후 나타나는 QR코드

`expo start` 명령어를 입력하면 터미널에 Expo 실행이 진행되며
- 안드로이드
핸드폰에 expo라는 어플리케이션을 다운로드 후
터미널에 뜨는 QR코드를 인식(같은 네트워크여야 함)
- iOS
핸드폰 카메라로 터미널에 뜨는 QR코드를 인식(같은 네트워크여야 함)

`expo start` 명령어 == Expo 서버를 켠 것 == 현재 개발하고 있는 앱을 실행

반대로 서버를 끌 땐?
- windows: `Ctrl + c`
- mac: `command + c`

expo start 입력 후 나타나는 QR코드를 폰으로 스캔하면 나타나는 화면

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React Native

• JavaScript 하나로 안드로이드 앱과 iOS 앱 모두를 만들어주는 라이브러리

라이브러리: 소프트웨어를 개발할 때 재사용이 가능한 기능을 미리 구현해놓고 필요한 곳에서 호출해 사용할 수 있도록 만들어진 집합

• 실제로는 한 언어로 개발하는 것이 가능치 않음
• 밑의 이미지와 같이, 특정한 상황에서는 안드로이드와 iOS 폴더의 코드를 각각 수정해야 함
• 안드로이드 앱은 Java & Kotlin을, iOS 앱은 Swift를 사용하기 때문에 언어 하나로 앱을 만들 수 있다는 취지에 어긋남
• 안드로이드 & iOS 개발 언어를 몰라도 React Native 앱 개발을 수월하게 해주는 도구, Expo가 존재