React-Native로 안드로이드 앱 만들기

안녕하세요 오늘은 "리액트 네이티브로 앱 만들기" 입니다 ㅎㅎ

깔아야할게 좀 많습니다만.. 잘 따라오시면 앱을 만드실 수 있을거에요!!

---

> 환경설정

1) Nodejs 설치

아래 링크로 들어가 18 버전으로 설치해주세요!

계속 다음 눌러서 설치해주세요~

https://nodejs.org/en/download/prebuilt-installer

Node.js — Download Node.js®

 

2) VSCODE 설치

아래 링크로 들어가 visual studio code 로 설치해주세요!

얘도 계속 다음 눌러주세요~

https://code.visualstudio.com/

 

3) GIT 설치

Download for Windows 눌러서 들어가고 64-bit Fit for Windows Setup 눌러주세요

https://git-scm.com/

 

4) Expo 가입 및 Expo 앱 설치

https://expo.dev/

SIGN UP 눌러서 가입해주세요

그리고 구글 플레이스토어에 Expo Go 앱을 깔아주세요

---

> 앱 개발

공식 문서를 참고해서 천천히 따라해보겠습니다

참고링크 : https://docs.expo.dev/tutorial/eas/configure-development-build/

Configure a development build in cloud

 

 

 

1) VSCODE 열기

VSCODE를 열고 상단의 파일 메뉴에서 폴더열기를 클릭해주세요

C드라이브를 선택하고 폴더 선택을 눌러줍니다

ctrl키와 ~키를 같이 누르면 하단에 터미널이 켜집니다

그럼 준비 완료!

2) EAS CLI 설치

터미널에 아래처럼 입력하고 엔터 눌러주세요

npm install -g expo-cli

eas-cli를 설치해줍니다... 기다리기...

(npm 어쩌구 오류가 뜨면 Node.js가 제대로 설치되지 않은 것입니다)

아래처럼 뜨면 성공

 

3) 앱 생성하기

npx create-expo-app 하고싶은앱이름

 

아까 VSCODE 상단에 폴더열기를 눌러서 하고싶은앱이름을 찾아줍니다

더블클릭하시고 폴더선택하시면 이렇게 됩니다

 

4) eas-cli 깔기

얘도 터미널에 입력하고 기다리기...

npm install -g eas-cli

 

5) 아까 expo가입했던 아이디와 비밀번호로 로그인하기

eas login

? Email or username이라고 나오면 아까 가입했던 이메일 입력

? Password에는 비밀번호 입력하기

 

6) eas 설정하기

아래 명령 입력해주기

eas build:configure

 

잠시 멈추고 y/n 중에 입력하라고 뜨는데 y 입력해주고 엔터눌러줍니다.
그럼 어떤걸로 빌드할지 고르라고 하는데 Android 골라주세요

Q) 에러가 뜰 경우?

이런 에러가 뜬다면 터미널이 하고싶은앱이름으로 되어있는지 확인해주세요 (전 enavi 로 만들었어요)

이런식으로 되어있어야해요

터미널에 cd 하고싶은앱이름 치면 이동할 수 있어요

cd 하고싶은앱이름

 

7) Eas.json 누르고 파일 내용 바꾸기

왼쪽에 Eas.json 파일을 클릭하면 파일이 열리는데 build라고 적힌 부분부터 마지막 괄호 하나만 빼고 선택해줍니다.

이부분을 첨부한 코드로 바꿔주세요!

"build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {}
  }

 

8) 앱 실행하기

eas build -p android --profile preview

 

 

엔터를 눌러주시고 y를 누르라해서 누르고 기다리다보면 뭔가 열심히 작동하고 있습니다

참고로 한참 기다려야합니다.....

 

되고 있는 과정이 궁금하신분은 터미널의    build details :   뒤에 뜨는 주소를 복사하셔서 들어가시면
이런식으로 되고 있는 과정을 보실 수 있습니다
https://expo.dev/accounts/계정이름/projects/하고싶은앱이름/builds/어쩌구저쩌구고유값들어가있음
(빨리빨리 한국인이라 안되는 줄 알고 몇번 취소했어요..ㅋㅋ)

 

한참 기다리고 다 되면 어쩌구저쩌구.apk라는 주소를 보실 수 있습니다
얘를 복사하셔서 카톡이나 드라이브로 전송하시고 주소를 클릭하면 앱을 설치할 수 있어요!!

 

애뮬레이터(가상실행기)를 실행시키고 싶으시면 y, 아니면 n를 입력해주세요

y를 누르신 분들은 이렇게 가상 앱 화면이 켜질거에요

Q) 한참 기다려도 안돼요

만약 available 어쩌구 하는 오류가 뜨신다면 아래처럼 입력하시고

뜨는 애들을 선택하셔서 모두 취소하시고 다시 eas build -p android --profile preview를 입력하세요

eas build:cancel

9) 휴대폰에 앱 설치하기

저는 카톡으로 주소를 보내고 클릭해줬어요!
제 apk 주소 : https://expo.dev/artifacts/eas/9vidKt6CFrgg92ZG14DmYP.apk

 

다운로드된 파일을 누르면 파일관리자에서 실행하라는데

내 파일을 검색해서 들어가줍니다

 

들어가면 최근 파일에 아까 다운받은 apk 파일이 보일겁니다

클릭하시고 무시하고 설치 눌러주세요!

 

버튼 두개 위에 세부정보를 누르면 검사없이 설치가 떠요

저희가 만든거니 안심하고 검사없이 설치 눌러줍니다

 

그럼 이제 휴대폰에도 짜잔!

앱이 생깁니다

 

실행도 잘 되네요!!