[React Native] 플레이스토어에 출시하기

플레이스토어 링크

배경

프론트엔드 개발에 지쳐있던 나는 React Native 로 잠시 눈을 돌렸다..
목표는 플레이스토어에 앱 등록이였는데 과정이 까다롭고도 흥미로웠다!

개발 준비

뭘 만들면 좋을까?

먼저 뭘 만들면 간단하고 유용할지 생각해 보았다. 그러다 최근 운동을 열심히 하지 못한 나를 마주하였고, 핼스앱 에 눈을 돌렸다.

1. 랜덤으로 운동루틴을 만들어주자
2. 운동마다 난이도를 부여하자
3. 루틴을 30분 내에 끝내도록 타이머를 만들자

이렇게 3가지 기능을 주로 잡고 개발에 들어갔다

개발

react native + expo 개발환경

가장 빠르고 쉽게 개발하기 위해 react native와 expo 를 이용하였다.

expo를 이용할 때 장점이라 한다면 저 QR코드 를 expo 앱에서 스캔하면 핸드폰에서 바로 볼 수 있다는 점이다. setinterval 함수가 제대로 돌아가지 않을 수 있다

개발하면서 느꼈던 프론트와의 차이점은 많이 없었고, 어느정도 react를 다룰줄만 안다면 금방 익숙해진다. 단 태그의 종류가 너무 다르다

앱 미리보기

이렇게 앱 개발이 끝났다면 이제 플레이스토어에 올릴 준비를 해야 한다.

배포 준비

  "expo": {
    "name": "Break Health", // 앱 이름
    "icon": "./assets/icon.png", // 앱 로고
    "version": "2.0.0", // 앱 버전
    "slug": "break-health", // 앱 이름 사이에 "-" 껴주면 됨
    "ios": {
      "bundleIdentifier": "com.breakhealth.breakhealth",
      "buildNumber": "2.0.0"
    },
    "android": {
      "package": "com.breakhealth.breakhealth",
      "versionCode": 2, // 버전 코드, 앱 업데이트마다 +1씩 해줘야 함
      "permissions": [] // 앱에서 사용하는 권한 목록
    }
  }
}

먼저 app.json 을 저런식으로 수정해주어야 한다.

그리고 빌드 과정을 거치게 되는데 명령어는 expo build:android 안드로이드는 요렇게, expo build:ios ios 는 요렇게 명령어를 입력해주면 된다.

그리고 빌드 과정에서 파일 형식을 선택하게 되는데 .apk 가 아닌 app bundle 을 선택해야 한다.
( 플레이스토어가 파일 형식을 apk 에서 app bundle 로 바꾸었기 때문 )

배포

https://es1015.tistory.com/393

빌드된 파일을 가지고 위 링크에서 제공하는 플레이스토어 배포 절차를 따라간다.
굉장히 까다로운 과정이 기다리고 있으니 주의하자!! 3만원의 돈이 같이 나간다

결과

예전 개발을 하지 않았을 때에는 플레이스토어에 어떻게 앱을 올리는지 궁금했었다. 하지만 이번 경험을 통해 내 앱이 플레이스토어에 등록됨을 보며 굉장히 의미있는 경험을 하였다.

사용자가 많아지면 좋겠지만 처음인 만큼 배포에 의미를 두자! ㅎㅎ