DEVOCEAN

안녕하세요 Teus입니다.

올해부터 DEVOCEAN을 통해서 스터디를 진행하고 있습니다!

제가 준비한 주제는 React를 활용해서 크로스플랫폼을 플랫폼 어플리캐이션을 만드는 React Native입니다!

이번주는 10주차에 진행한 스터디 내용을 다루는 포스팅 입니다!

0. 스터디 운영

지난 주 중간발표회 이후, 이제 책 학습부분은 선택적으로 진행 하고 있습니다

(react query까지 해서 React Native를 활용하기 위한 기본기는 다 갖추었다고 판단합니다)

이번주 역시 스터디원들과 간단한 아이스브레이킹 후 조별토의 시간을 진행 하였습니다.

이번주는 LSK님께서 준비해주신 진진가!(진짜진짜가짜) 입니다.

진진가는 3가지 항목을 나열하고, 이중 하나만 진짜같은 가짜를 기술하고 다른분들이 이것을 맞추는 게임입니다!

(각자 본인들의 진진가 작성중)

(다른분들의 진진가를 듣고, 가짜 색출중인 스터디원들)

(DEVOCEAN 왕태웅님의 진진가! 무엇이 가짜일까요??)

이번주는 지금까지 만든 App을 이제 남들한태 공개할 수 있는, App 배포하기에 관한 내용을 다룹니다.

어떻게 배포를 하는지 보시도록 하겠습니다.

1. Andorid App 배포하기

1_1. keystore 파일 만들기

안드로이드 배포를 위해서는 먼저 RSA암호화가 된 Key 발급이 필요합니다.

윈도우 환경의 경우 JAVA가 설치된 위치(윈도우의 경우 C:\Program Files\Java\jdkx.x.x_x\bin 경로, 저같은 경우 Android Studio에 jbr가 설치된 위치)에서 아래 커맨드를 실행합니다

keytool -genkeypair -v -storetype PKCS12 -keystore app-release-key.keystore -alias app-release -keyalg RSA -keysize 2048 -validity 10000

그러면 암호와 간단한 신원정보를 입력하고, 아래처럼 RSA 암호화 키가 발급되는것을 볼 수 있습니다.

그러면 보시는 형태로 keystroe 파일이 생기는 것을 볼 수 있습니다

그 다음, 배포를 원하는 project(저는 my_pjt라고 하겠습니다) Android/app 위치에다가 해당 .keystore파일을 이동시켜 줍니다.

1_2. gradle 설정해주기

my_pjt/android/gradle.properties 파일을 수정할 필요가 있습니다.

기존의 파일 내용에 아래에 해당 내용을 추가해 줍니다.

(...)
RELEASE_STORE_FILE=app-release-key.keystore
RELEASE_KEY_ALIAS=app-release
RELEASE_STORE_PASSWORD=********
RELEASE_KEY_PASSWORD=********

대략적으로 만들어진 keystore file을 이용해서 앱을 배포할때 사용한다는것을 예상해 볼 수 있습니다.

위 properties를 사용해서 android/app/build.gradle파일에 적용합니다

(...)
signingConfigs {
debug {
  (...)
}

  (...)
  release {
      if (project.hasProperty('RELEASE_STORE_FILE')) {
          storeFile file(RELEASE_STORE_FILE)
          storePassword RELEASE_STORE_PASSWORD
          keyAlias RELEASE_KEY_ALIAS
          keyPassword RELEASE_KEY_PASSWORD
      }
  }
}
buildTypes {
      debug {
          signingConfig signingConfigs.debug
      }
      release {
        signingConfig signingConfigs.release
          (...)
      }
  }
(...)

1_3. AAB파일 생성하기

일반적으로 사용자들이 Android App을 설치할 때는 APK File을 통해서 설치 합니다.

AAB는 Android App Bundle로, AAB파일을 Playstore에 올리면 해당 AAB 파일은 기반으로 기기들에 맞는 APK 파일이 생성되게 됩니다.

해당 AAB 파일은 Android 경로에서gradlew bundleRelease를 실행하면 build가 진행되며, android/app/build/outputs/bundle/release 위치에 AAB 파일이 생성되게 됩니다.

이제 만들어진 해당 ABB 구글계정을 통해서 배포하면, Android PlayStore로 배포되게 됩니다!

(마지막 스터디 후기에서 배포된 모습을 볼수 있길!)

2. IOS App 배포하기

IOS는 Xcode로 App을 빌드할 수 있습니다. 그래서 Andorid 대비 상대적으로 간단한 편 입니다.

대신, IOS 9.0부터 생긴 네트워크 보안 문제로 ios/my_pjt/Info.plist에서 NSAppTransportSecurity를 아래와같이 수정해 주어야합니다

HTTPS 통신만 가능하게 만드는 정책으로, React Native는 Metro Local 서버와 통신을 위해서 해당 속성의 변경이 필요합니다.

<key>NSAppTransportSecurity</key>
  <dict>
      <!-- <key>NSExceptionDomains</key>
      <dict>
          <key>localhost</key>
          <dict>
              <key>NSExceptionAllowsInsecureHTTPLoads</key>
              <true/>
          </dict>
      </dict> -->
  </dict>

그 다음 Xcode에서 해당 Ios Project로 이동한 다음 Product > Scheme > Edit Scheme 에서 build config를 release로 바꿔주고 Product > Build를 통해서 실행가능한 App을 Build할 수 있습니다.

3. 조별토의

이번주 같은경우 지난주에 진행한 중간발표회에서 있던 피드백사항을 반영하는 작업들이 주로 이뤄졌습니다.

다들 처음에 했던 기획보다 축소 되었지만, 지금 만들고있는 App에 대해서는 완성 후 배포까지 해보는것을 목표로! 하고 있습니다.

이제 마무리를 향해 달려가는 React-Native 스터디입니다!

다들 행복한하루 되시기 바랍니다.

다음주에 11주차 후기로 다시 돌아옵니다!