안드로이드 스튜디오 없이 간편한 어플만들기 (Reacte native)

 

어플 만들기 (Reacte native) 자바스크립트 언어 하나로 어플 개발이 가능하다.

빠른 어플을 위해 Web View 기능을 넣어서 만들겠다.

 

1. 개발환경 설정

- 구름IDE(아래의 링크로 전 포스팅 참고)

https://taehui.tistory.com/76

 

- 기본적인 방법은 위에 링크에서 설명한 것과 동일하지만 소프트웨어 스택을 React Native로 설정해준다 (1)

- React-Navtive & Expo 개발환경 설정
- 이번 프로젝트에서는 Expo를 이용할 것이다. Expo는 React-Navtive의 사용을 도와주는 개발도구로써 테스트와 배포가 쉽다.
- 컨테이너 생성 후 실행하면 아래의 사진과 같이 기본적인 파일들이 들어있다.

 

2. Android & IOS 앱 코딩

- 아래의 코드를 Terminal에 작성(docs.expo.io/versions/latest/sdk/webview/) 공식문서링크

expo install react-native-webview

-App.js에도 아래의 코드 작성

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default class App extends React.Component {
  render() {
    return <WebView source={{ uri: 'https://expo.io' }} style={{ marginTop: 20 }} />;
  }
}

 

 - 그림에서 숫자 2로 표시된 부분은 자신이 만들어놓은 웹페이지의 주소를 입력한다.

 

- 코드 작성 후 아래의 사진처럼 재생 버튼을 누르면 큐알코드가 생성된다.

 - 안드로이드폰 Expo Go어플 설치 후 qr코드 스캔하면 만든 어플 확인 가능
 - 아이폰 expo Client 어플 설치 후 qr코드 스캔하면 만든 어플 확인 가능

 위에 과정이 시간이 다소 걸릴 수 있다. 나 같은 경우 8분 정도의 시간이 걸렸다.

 

 

3. 앱 마켓 출시 준비

- 설정 및 APK 파일 제작

- app.json을 수정한다. 가장 위에 name에 원하는 어플 이름을 적는다

- assets에 들어있는 기존의 png 파일들을 모두 지워준다.

- icon(1024x1024)과 splash(1242x2436)을 만들어 assets에 넣어준다. 비율을 맞추지 않으면 apk 생성 시 오류가 난다.

- Terminal에 아래의 명령를 입력해요 Expo CLI를 다운받는다(https://docs.expo.io/distribution/building-standalone-apps/) 공식문서 링크

 

 

npm install -g expo-cli 

 - 오류를 방지하기 위해. expo 파일을 삭제해 준다

 - 아래의 코드를 app.json 하단에 콤마(,)를 하나 찍 고 넣어준다.

 "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }

- 자신만의 어플을 구별하기 위해 패키지 수정을 해준다. 형식은 com.내이름.어플이름  이런 느낌

- 안드로이드 어플을 만들기 위해서는 아래의 명령어 입력

 expo build:android

 - 위에 명령어를 입력하게 되면 회원가입을 요청하는데 expo 사이트로 가 회원가입을 해주면 된다.

회원가입

 - 로그인 후 apk 다운을 진행하다 보면 keystore을 어디서 관리할 거냐고 하는데 뭔지 모르겠으면 위에꺼를 선택하면 된다.

 - 어느 정도 빌드가 진행되면 어떠한 주소가 나오게 된다. 아까 가입한 정보로 로그인해주면 된다.

 

- 기다리다 보면 빌드가 완료된다. (꽤 많은 시간이 걸린다 10 ~ 20분 정도)

 

- 빌드가 완료되면 아래의 다운 버튼을 눌러 apk 파일을 다운로드할 수 있다. 

- 안드로이드 스마트폰에서도 해당 url을 검색하면 이 어플은 다운로드할 수 있다.

 다음 포스팅은 apk를 가지고 마켓에 등록 후 광고를 삽입하는 것을 하겠다.

 

참고 : 유튜브 조코딩