📱 앱 버전 설정 예시

package.json에서 버전을 관리하는 방법:

{
  "name": "your-awesome-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-native start",
    "ios": "react-native run-ios",
    "android": "react-native run-android",
    "test": "jest",
    "lint": "eslint ."
  },
  // 나머지 설정들...
}
      

iOS의 경우 Info.plist와 Android의 경우 build.gradle 파일에서도 버전을 설정해야 해요!

🔐 인증서 생성을 위한 CSR 파일 생성 방법

Mac에서 키체인 접근을 통해 CSR 파일을 생성하는 방법:

1. 키체인 접근 앱 실행
2. 메뉴에서 '키체인 접근 > 인증서 지원 > 인증 기관에서 인증서 요청...' 선택
3. 이메일 주소와 이름 입력, '디스크에 저장됨' 선택 후 계속
4. 생성된 CSR 파일을 Apple Developer 사이트에 업로드

🔐 Android 앱 서명 키 생성 방법

키스토어 생성을 위한 명령어:

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

android/app/build.gradle에 서명 설정 추가:

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file('my-release-key.keystore')
            storePassword 'your-store-password'
            keyAlias 'my-key-alias'
            keyPassword 'your-key-password'
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
      

보안을 위해 실제 비밀번호는 환경 변수나 gradle.properties에 저장하는 것이 좋아요!

🔢 리액트 네이티브에서 버전 관리 예시

package.json에서 버전 관리:

{
  "name": "awesome-app",
  "version": "1.2.3",
  ...
}
      

iOS (Info.plist):

<key>CFBundleShortVersionString</key>
<string>1.2.3</string>
<key>CFBundleVersion</key>
<string>10</string>
      

Android (build.gradle):

android {
    defaultConfig {
        versionCode 10
        versionName "1.2.3"
    }
}
      

🔍 Firebase Crashlytics 설정 예시

리액트 네이티브에 Firebase Crashlytics 추가하기:

// 패키지 설치
npm install @react-native-firebase/app @react-native-firebase/crashlytics

// App.js에서 초기화
import crashlytics from '@react-native-firebase/crashlytics';

// 사용자 정보 기록
async function onSignIn(user) {
  crashlytics().setUserId(user.id);
  crashlytics().setAttributes({
    role: user.role,
    subscription: user.subscription
  });
}

// 에러 로깅
try {
  // 위험한 작업
} catch (error) {
  crashlytics().recordError(error);
}
      

📝 인앱 피드백 시스템 구현 예시

리액트 네이티브에서 간단한 인앱 피드백 컴포넌트 구현:

import React, { useState } from 'react';
import { View, TextInput, Button, Alert, StyleSheet } from 'react-native';

const FeedbackForm = () => {
  const [feedback, setFeedback] = useState('');
  
  const submitFeedback = async () => {
    try {
      // 피드백을 서버에 전송하는 API 호출
      const response = await fetch('https://your-api.com/feedback', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ feedback }),
      });
      
      if (response.ok) {
        Alert.alert('감사합니다!', '소중한 의견 감사합니다. 더 나은 앱을 만들기 위해 노력하겠습니다.');
        setFeedback('');
      }
    } catch (error) {
      Alert.alert('오류 발생', '피드백 전송 중 문제가 발생했습니다. 나중에 다시 시도해주세요.');
    }
  };
  
  return (
    <view style="{styles.container}">
      <textinput style="{styles.input}" multiline numberoflines="{4}" placeholder="앱 사용 경험에 대한 의견을 알려주세요" value="{feedback}" onchangetext="{setFeedback}"></textinput>
      <button title="피드백 보내기" onpress="{submitFeedback}"></button>
    </view>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 10,
    marginBottom: 16,
  },
});

export default FeedbackForm;
      

🔍 Android 64비트 지원 설정 예시

android/app/build.gradle에 64비트 지원 추가:

android {
    defaultConfig {
        ...
        ndk {
            abiFilters "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
        }
    }
}
      

🌐 리액트 네이티브 다국어 지원 예시

i18n을 활용한 다국어 지원 구현:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

const resources = {
  en: {
    translation: {
      welcome: 'Welcome to my app!',
      description: 'This is a simple app built with React Native'
    }
  },
  ko: {
    translation: {
      welcome: '내 앱에 오신 것을 환영합니다!',
      description: '리액트 네이티브로 만든 간단한 앱입니다'
    }
  },
  ja: {
    translation: {
      welcome: 'アプリへようこそ！',
      description: 'React Nativeで構築されたシンプルなアプリです'
    }
  }
};

const languageDetector = {
  type: 'languageDetector',
  detect: () => {
    const locales = RNLocalize.getLocales();
    return locales[0].languageCode;
  },
  init: () => {},
  cacheUserLanguage: () => {}
};

i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;
      

컴포넌트에서 사용 예시:

import React from 'react';
import { View, Text } from 'react-native';
import { useTranslation } from 'react-i18next';

const WelcomeScreen = () => {
  const { t } = useTranslation();
  
  return (
    <view>
      <text>{t('welcome')}</text>
      <text>{t('description')}</text>
    </view>
  );
};

export default WelcomeScreen;