리액트 네이비트 & EXPO 앱개발 준비

1. 리액트 네이티브(React Native)란?

 자바스크립트를 통해 안드로이드,IOS앱을 만들어 주는 라이브러리다.

또한 안드로이드,IOS앱을 개발하려면 자바&코틀린, Swift 등을 배워야하지만 하나의 언어로 앱을 개발할 수 있도록 도와주는 도구!

 

2. EXPO란?

가장 큰 장점은 개발중인 앱을 모바일 화면으로 테스트하면서 개발이 가능하다는 점이다!

또, 안드로이드,IOS 코드를 직접 건드리지않아도 앱 개발이 가능하도록 도와준다.

 

* EXPO 다운로드 앱 링크

https://apps.apple.com/app/apple-store/id982107779

‎Expo Go

 

이제 앱개발을 위한 도구들을 설치해보자!

 

- Node.js 로 개발 환경을 구축하고

- NPM으로 앱 개발에 필요한 자바스크립트 도구를 가져와서 사용한다.

 

//npm 설치 명령어 (-g 는 컴퓨터 전역에 설치한다는 의미)
npm install -g yarn

 

설치 후 버전확인은 꼭 해보자.(간혹, 제대로 설치가 안되는경우가 있다.)

yarn -v

 

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

    npm보다는 yarn을 더 많이 사용해보자.

 

// expo 명령어 도구 설치

npm install -g expo-cli

 

3. EXPO 세팅

 

https://expo.dev/

Expo

본격적인 EXPO 사용을 위해 모바일 앱 다운로드 및 EXPO 가입을 먼저 진행해보자.

 

* 로컬에 EXPO 계정 연결

 

- terminal에서 아래 명령어 입력

   expo login username (가입 username)

그런다음, 가입 이메일주소/비밀번호 등을 입력하면은 정상적으로 연결된것을 볼 수 있다.

 

4. EXPO 앱 생성 및 실행하기

 

- 빈 폴더를 생성하여 VSCODE로 접속하여 열어주자!

- 에디터 상 터미널을 열어준 후, EXPO앱 생성 명령어 입력 : expo init hongoon-app-myhoneytip

→ expo (EXPO 명령어를 실행하겠다.) , init(EXPO앱을 생성하는 명령어) , 그외에는앱 이름

 

※ blank 타입의 앱을 만들어서 복습해보자.

 

이제 앱 생성이 성공적으로 되었다면 EXPO실행을 하기위해 생성된 폴더로 이동하자.

실제 생성된 EXPO앱 폴더안으로 들어가야 볼수 있다. 

 

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

참고로 뒤로 갈때에는 " cd .. " 입력 하면된다.

 

* expo 실행하기

 - expo start 명령어 입력하면 실행되고 서버를 끌때에는 command + c 를 누르면된다.

 

아래와같이 모바일에도 잘 연동된것을 볼 수 있다!!

이렇게 실시간으로 모바일에서 반영된 모습을 보면서 개발 테스트를 할 수 있다.

EXPO 실행화면(모바일)