728x90
반응형

현재 서비스 중인 테블릿에서 도는 앱을 점주들이, 컨트롤 타워에서 끄기를 원하는 요구사항이 들어왔다.

 

일단 system에 접근하여 shut down을 하기위해서는 

 

제조사의 플랫폼키 가 필요하다

 

해당 내용으로 사이닝을 하지않으면, permission denied 가 난다.

 

app/build.gradle 에서

 

signingConfigs {
        debug {
        storeFile file("debug.keystore")
        storePassword "android"
        keyAlias "androiddebugkey"
        keyPassword "android"
}
 
release {
        if (project.hasProperty("제조사 플랫폼키")) {
        storeFile file(제조사 플랫폼키)
        storePassword 제조사 플랫폼키
        keyAlias 제조사 플랫폼키
        keyPassword 제조사 플랫폼키
}
}
}

 

로 빌드해준다.

 

 

브릿지를 태워야 하기에

 

DeviceOffModule.java 와 DeviceOffPackage.java 를 만들어준다.

 

 

DeviceOffModule.java

package 프로젝트.deviceOff

import android.app.Activity;
import android.content.ComponentCallbacks2;
import android.content.Context;
import android.content.res.Configuration;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import android.content.Intent;
import android.os.Build;

public class DeviceOffModule extends ReactContextBaseJavaModule {

private ReactApplicationContext reactContext;

public DeviceOffModule(ReactApplicationContext context) {
super(context);
reactContext = context;
}

@Override
public String getName() {
return "DeviceOff";
}

@ReactMethod
public void deviceOff() {
Intent intent;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
intent = new Intent("com.android.internal.intent.action.REQUEST_SHUTDOWN");
} else {
intent = new Intent("android.intent.action.ACTION_REQUEST_SHUTDOWN");
}
intent.putExtra("android.intent.extra.KEY_CONFIRM", false);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

reactContext.startActivity(intent);
}

}

 

 

DeviceOffPackage.java

package 프로젝트.deviceOff

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;

public class DeviceOffPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new DeviceOffModule(reactContext));
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

 

 

해당 package를 mainapplication.java 에서 임포트해주고

 

react native 에서

const { DeviceOff } = NativeModules;

 

DeviceOff.deviceOff();

 

로 실행해주면 된다.

 

AndroidMainfest.xml 에

 

<uses-permission android:name="android.permission.SHUTDOWN"/>

 

까지 추가하면,

 

해당 앱이 설치된 기기의 전원을 언제든지 끌수 있다.

728x90
반응형
728x90
반응형

현재 회사에서 서비스하고있는 앱은 회사에서 설치한 테블릿에서만 도는 앱이다.

 

테블릿은 4GB 램을 사용중이다.

 

대부분의 사용자가 일주일에 한번씩은 앱을 종료하였지만,

 

앱을 설치하고 한번도 앱을 종료하지 않은 매장에서 memory leak 으로 인한 다운이 발생하여 해결하게 되었다.

 

 

다른 일반 앱들과는 다르게, 상점별 세팅 / Van사의 앱 프로토콜 / 수백개의 메뉴이미지로, 초기 메모리가 350MB 정도 되었다.

 

GC 가 돌긴하였지만, 30분만에 300메가 정도가 늘어난 것으로 관찰된다.

 

 

최종 개선된 버전을 보면, 초기메모리가 243MB 로 낮아졌을뿐만아니라, 메모리가 260~290MB 로 유지되는것을 확인할수있었다.

 

해당 개선을 하였던 방법을 포스팅하고자한다.

 

당면과제는 두가지였다.

 

1.초기의 메모리값을 낮춘다.

2.앱을 켜놓아도 메모리값을 적정수준으로 유지한다.

 

해당 과제중

 

1.초기 메모리값을 낮추기 위해

 

-Hermes 엔진 활성화
-ABI 분리 (arm64-v8a 로만 빌드)
-번들 크기 최적화 (package.json에서 사용하지 않는 패키지를 제거)
-이미지관리 최적화(동적 이미지 FastImage)
-이미지관리 최적화  (아이콘 svg 사용)

 

해당 작업을 하였다.

 

해당 작업이후의 메모리사용량을 보면,

 

일단 초기 메모리 사이즈가 많이 감소된것을 관찰할수있다.

 

두번째 작업은

 

-이미지관리 최적화 (정적 이미지 용량절감) : png 리소스 webp 로 변경

 

였다. 리소스들 자체를 webp 로 변경하니

 

 

해당 리소스의 크기가 줄어든만큼 초기 메모리 사용량이 줄어든 것을 확인하였다.

 

세전째 작업은

 

-Proguard/R8 관련 작업이었다.

 

해당 작업은 난독화와 관련되어 메모리와 크게 상관이 없을줄 알았는데

 

 

해당 내용 작업후, 4MB정도의 감소폭을 확인 할 수 있었다.

 

앱의 특성상 초기 메모리를 더욱 낮출수는 없다고 판단하여

 

이제 Memory Leak 관련된 작업을 시작했다.

 

해당 메모리 누수가 일어나는 부분은 '광고'화면 이 주를 이뤘다.

 

처음 작업은

 

1.interval 조건추가
2.backgroundImage key 추가
3.debug 로그제거
4.fastimage key 추가
5.lazy video 로직 변경
6.arm64 만 빌드되도록 수정
7.mmkv 패키지 삭제
8.안쓰는 import 제거 / lodash partial import

 

이었는데,

 

대표적인 memory leak 이 일어나는 interval 함수 사용의 로직을 개선하였다.

Native / Others 쪽 메모리가 쌓이는것을 보고 backgroundImage / FastImage 에 key 값을 추가하여, unmount 되는것을 확실히하였고,

filesystem을 이용하는 debug로그와, video 쪽을 손봤다. 

소스코드를 정리하면서 package 쪽을 정리하니

 

 

초기 메모리 사용량은 비슷하지만, 기하급수적으로 메모리 쌓이는 부분이 해결되는 것을 확인했다.

 

두하지만, 여전히 300MB 를 넘는 사용량을 보이기에

 

FastImage 쪽 Glide 의 cache 컨트롤 쪽을 개선하였다.

 

- 메모리 캐시 크기 지정 : 20MB
- 이미지 Bitmap 처리 포맷 변경 : RGB565 사용하도록 설정

 

해당 작업이후

 

 

최종적인 메모리 사용량은 안정적으로 되었고,

 

해당 문제가 발생했던 매장에 설치하여 모니터링중이다.

728x90
반응형
728x90
반응형

이번 회사 프로젝트에 오래 걸린 디버깅이 있어서 까먹기전(?)에 정리를 해놓는다.

 

현재 회사에서 담당하고 있는 프로젝트는 React-Native 로 되어있지만, 특정 테블릿(안드로이드)에만 설치가 되어 제공을 하기에, 철저히 안드로이드 관련된 내용이라

 

Android와 관련된 공부를 하게되어 기쁘다.

 

현재 코드푸쉬를 할때마다 1500대정도 꾸준히 업데이트를 성실히 따라오고 있는데, 유독 한 매장에서 자꾸 '앱이 종료된다' 라는 CS가 들어왔다.

 

당연히 ANR 은 치명적인 오류이기에, 즉각 대응에 나섰다.

 

일단 지금 서비스에는 data dog / google crashlytic 가 붙어있다.

 

DATA DOG

 

해당 증상이 발생했다는 날에 정보를 확인해봐도 2600개의 세션중에 crash report 는 없었다. 

 

물론 google crashlytics 도 마찬가지였다.

 

data dog 의 내부로직은 모르지만, google crashlytics은 MainActivity.java의  UncaughtExceptionHandler 를 오버라이딩해서 사용하고있다.

 

그러면 해당 에러는 해당 핸들러에 안걸리는 이유로 '앱이 종료된다'고 유추하였다.

 

해당 핸들러에 안걸리는 가장 큰 이유중의 하나는 '메모리'문제이다.

 

따라서 해당 매장의 환경(광고대기화면)과 동일한 환경으로 세팅을하여 일주일정도 메모리 사용량을 확인하였다.

 

터미널에서 top 명령어로 메모리 사용량을 확인할 수 있다

 

adb 로 테블릿을 무선으로 연결한후, adb top 이라는 터미널 명령어로 메모리트래킹을 했는데, 메모리가 점점 쌓이는 현상은 발견되지 않았다.

 

지금까지 개발을 하면서, 앱이 비정상종료가 되었는데, 아무 이유를 파악할 수 없는 경우는 처음이었다.

 

CS에서 들어도, 유저가 액션을 하다가 뻗거나, 기능 동작중에 앱이 내려가는 경우가 아니라, 테블릿을 켜놓고 다음날쯤에 꺼지는 경우는 재연이 쉽지가 않았다.

 

결국 안드로이드 시스템 로그를 확인해보기로 했다.

 

해당 테블릿을 사용하고 있는 사용자에게 방문하여

 

adb 로 해당 테이블에 무선연결 후, adb bugreport 로 시스템 로그를 받아왔다.

회사 정보가 나오는 패키지명은 '패키지명'으로 대체

 

 

ApplicationExitInfo 클래스 덕분에 해당 로그에서 우리 앱이 언제 어떻게 왜 종료되었는지 확인을 할 수가있다.

 

https://developer.android.com/reference/android/app/ApplicationExitInfo

 

ApplicationExitInfo  |  Android Developers

 

developer.android.com

 

해당 클래스 설명에서 보면, 자세한 원인이 나와있다.

 

우리의 원인은 13 으로, 안드로이드 문서를 보면

 

not by problems in apps and not actionable by apps 라고 나와있다.

 

'앱문제는 아니고, 앱의 액션문제도 아니야'

 

하지만...고객이 불편하다고 생각하기에 해당 문제를 해결해야한다.

 

따라서 getDescription 을 통해 자세한 subreason을 확인하기로했다.

 

this process had been in empty state for a long time;


직역하면, '이 프로세스는 empty state 에 너무 오래있었다' 이다.

 

안드로이드의 프로세스는

 

https://developer.android.com/guide/components/processes-and-threads?hl=ko

 

프로세스 및 스레드 개요  |  App quality  |  Android Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 프로세스 및 스레드 개요 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 애플리케이션 구성요소가 시

developer.android.com

https://developer.android.com/guide/components/activities/process-lifecycle?hl=ko

 

프로세스 및 앱 수명 주기  |  Android Developers

대부분의 경우 모든 Android 애플리케이션은 자체 Linux 프로세스에서 실행됩니다. 이 프로세스는 일부 코드를 실행해야 할 때 애플리케이션용으로 생성되며 더 이상 필요하지 않고 시스템에서 메

developer.android.com

 

에서 확인할 수 있듯이

 

foreground > visible > service > cached (empty)

 

로 나뉜다.

 

가장 하위 단계의 프로세스에서 너무 오래떠있어서 종료하니까, 우리앱의 프로세스를 높여볼까?

 

라는 생각으로, 

 

foreground service 를 띄워봤다.

 

react-native-foreground-service

 

라이브러리를 사용하여 쉽게, 앱이 실행중일때 포그라운드 서비스를 띄워놀수 있게되었다. 해당 포그라운드 서비스는 안드로이드 프로세스의 두번째인 visible process 에 해당한다.

 

하지만 해당 증상은 계속되었고, 

import androidx.work.WorkManager;


이번에는 WorkManager를 적용하여 

 

java쪽에서

 

DeviceEventManagerModule.RCTDeviceEventEmitter

 

네이티브 이벤트를 한시간마다 한번씩 발생해줬고, 

import { NativeModules, NativeEventEmitter } from 'react-native';

 

를 통해 로그를 찍어놓았다.

 

이번기회에, 안드로이드의 시스템로그를 보는것과 전반적인 안드로이드의 프로세스에 대해 조금 더 알게되어 기분이 좋다.

728x90
반응형
728x90
반응형

지금 프로젝트에서 구분자를 받아와서 해당 구분자로 기존 리소스를 스플래시로 띄우는 것을 구현해놓았다.

 

https://liveforownhappiness.tistory.com/138

 

[ React Native ] Dynamic splash screen 적용하기

현재 맡은 프로젝트가 테이블에 들어가는 앱인데,  해당 앱은 제조사가 모두 본인들의 splash screen 을 사용하고 싶어했다. 여러 라이브러리를 찾아보던중, 그냥 기존에 쓰던 splash screen 을 patch-pa

liveforownhappiness.tistory.com

 

기획쪽에서, 스플래시 스크린의 교체를 요청해왔는데,

 

초기에 스플래시 스크린의 구분자와 리소스가 바뀔확률이 0에 가깝다고 개발을 구분자와 리소스로 해놓았는데

 

앞으로도 해당 교체가 있을것 같아서

 

서버에서 url 을 받아와 구현하는 것으로 변경했다.

 

일단 서버에서 url을 받아온뒤, 해당 url을 splash 스크린에서 세팅해주도록 변경하였다.

 

일단 전에 작업되어있던 

 

RNSharedPreferences

(위에 링크 게시물 참고)

에 웹 리소스 uri 값을 native 쪽으로 내려줬다.

 

SplashScreen.java 코드를

 

public static void show(final Activity activity, final int themeResId, final boolean fullScreen, final String code, final String uri) {
if (activity == null) return;
mActivity = new WeakReference<Activity>(activity);
 
Context context = activity.getApplicationContext();
SharedPreferences sharedPref = context.getSharedPreferences(
"splash", Context.MODE_PRIVATE);

activity.runOnUiThread(new Runnable() {
 
@Override
public void run() {
if (!activity.isFinishing()) {
mSplashDialog = new Dialog(activity, themeResId);

mSplashDialog.setContentView(R.layout.launch_screen);


if(!String.valueOf(code).equals("X")){ //Beaver
// mSplashDialog.setContentView(R.layout.launch_screen);

imageView = (ImageView) mSplashDialog.findViewById(R.id.image);
// imageView = mSplashDialog.findViewById(R.id.imageView);
// imageView = this.findViewById(R.id.imageView);
Log.d("uri : ", uri);
// imageView.setImageURI(Uri.parse(uri));

 
new Thread(() -> {
try{
URL myUrl = new URL(uri);
InputStream inputStream = (InputStream)myUrl.getContent();
Drawable drawable = Drawable.createFromStream(inputStream, null);
activity.runOnUiThread(new Runnable() {
@Override
public void run() {
imageView.setImageDrawable(drawable);
}
});
 
}catch(MalformedURLException ex){
//do exception handling here
// Log.e("error : ", ex);
}catch(IOException ex){
// Log.e("error : ", ex);
}
}).start();
 
}

// if(String.valueOf(code).equals("L")){ //LG
// mSplashDialog.setContentView(R.layout.launch_screen_lg);
// }
// if(String.valueOf(code).equals("S")){ //SK
// mSplashDialog.setContentView(R.layout.launch_screen_sk);
// }
// if(String.valueOf(code).equals("D")){ //D
// mSplashDialog.setContentView(R.layout.launch_screen_d);
// }
// if(String.valueOf(code).equals("B")){ //Beaver
// mSplashDialog.setContentView(R.layout.launch_screen);
// }



mSplashDialog.setCancelable(false);
if (fullScreen) {
setActivityAndroidP(mSplashDialog);
}
if (!mSplashDialog.isShowing()) {
mSplashDialog.show();
}
}
}
});
}

 

이렇게 수정해주었다.

 

기존 image view 에 .setImageURI(Uri.parse(uri)) 값으로 리소스를 세팅해주니

 

resolveUri failed on bad bitmap uri

 

라는 에러가 나와

 

new Thread(() -> {
try{
URL myUrl = new URL(uri);
InputStream inputStream = (InputStream)myUrl.getContent();
Drawable drawable = Drawable.createFromStream(inputStream, null);
activity.runOnUiThread(new Runnable() {
@Override
public void run() {
imageView.setImageDrawable(drawable);
}
});
 
}catch(MalformedURLException ex){
//do exception handling here
// Log.e("error : ", ex);
}catch(IOException ex){
// Log.e("error : ", ex);
}
}).start();

 

해당 작업중 inputstream.에 url  content() 를 담아 Drawble 로 생성했다.

 

해당과정에서 통신은 새로운 Thread 에서 돌려야하기때문에 new Thread 로 새로운 쓰레드를 만들어줬고

 

또한 UI 업데이트는 메인쓰레드에서만 하기때문에, runOnUiThread 로 imageView 업데이트를 진행했다.

 

이제 서버에서 이미지링크를 내려주면 해당 이미지로 스플래시를 세팅하여 보여주고 앱이 실행된다.

728x90
반응형
728x90
반응형

현재 맡은 프로젝트가 테이블에 들어가는 앱인데, 

 

해당 앱은 제조사가 모두 본인들의 splash screen 을 사용하고 싶어했다.

 

여러 라이브러리를 찾아보던중, 그냥 기존에 쓰던 splash screen 을 patch-package 해서 사용하기로했다.

 

SplashScreen.java

 

package org.devio.rn.splashscreen;

import android.app.Activity;
import android.app.Dialog;
import android.os.Build;
import android.view.WindowManager;

import android.util.Log;
import android.content.Context;
import android.content.SharedPreferences;
import com.facebook.react.bridge.ReactApplicationContext;
import java.lang.ref.WeakReference;

/**
* SplashScreen
* 启动屏
* Author:CrazyCodeBoy
* Email:crazycodeboy@gmail.com
*/
public class SplashScreen {
private static Dialog mSplashDialog;
private static WeakReference<Activity> mActivity;

/**
* 打开启动屏
*/
public static void show(final Activity activity, final int themeResId, final boolean fullScreen, final String code ) {
if (activity == null) return;
mActivity = new WeakReference<Activity>(activity);
 
Context context = activity.getApplicationContext();
SharedPreferences sharedPref = context.getSharedPreferences(
"splash", Context.MODE_PRIVATE);

activity.runOnUiThread(new Runnable() {
@Override
public void run() {
if (!activity.isFinishing()) {
mSplashDialog = new Dialog(activity, themeResId);
mSplashDialog.setContentView(R.layout.launch_screen);
if(String.valueOf(code).equals("L")){ //LG
mSplashDialog.setContentView(R.layout.launch_screen_lg);
}
if(String.valueOf(code).equals("S")){ //SK
mSplashDialog.setContentView(R.layout.launch_screen_sk);
}
if(String.valueOf(code).equals("D")){ //D
mSplashDialog.setContentView(R.layout.launch_screen_d);
}
if(String.valueOf(code).equals("B")){ //Beaver
mSplashDialog.setContentView(R.layout.launch_screen);
}
mSplashDialog.setCancelable(false);
if (fullScreen) {
setActivityAndroidP(mSplashDialog);
}
if (!mSplashDialog.isShowing()) {
mSplashDialog.show();
}
}
}
});
}

/**
* 打开启动屏
*/
public static void show(final Activity activity, final boolean fullScreen,final String code) {
int resourceId = fullScreen ? R.style.SplashScreen_Fullscreen : R.style.SplashScreen_SplashTheme;


show(activity, resourceId, fullScreen, code);
}

/**
* 打开启动屏
*/
public static void show(final Activity activity,final String code) {
show(activity, false,code);
}


/**
* 关闭启动屏
*/
public static void hide(Activity activity) {
if (activity == null) {
if (mActivity == null) {
return;
}
activity = mActivity.get();
}

if (activity == null) return;

final Activity _activity = activity;

_activity.runOnUiThread(new Runnable() {
@Override
public void run() {
if (mSplashDialog != null && mSplashDialog.isShowing()) {
boolean isDestroyed = false;

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
isDestroyed = _activity.isDestroyed();
}

if (!_activity.isFinishing() && !isDestroyed) {
mSplashDialog.dismiss();
}
mSplashDialog = null;
}
}
});
}

private static void setActivityAndroidP(Dialog dialog) {
//设置全屏展示
if (Build.VERSION.SDK_INT >= 28) {
if (dialog != null && dialog.getWindow() != null) {
dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);//全屏显示
WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
dialog.getWindow().setAttributes(lp);
}
}
}
}

 

 

해당 java 중 show function 을 수정했다.

 

기본 앱이 react native 이기때문에, 안드로이드와 가장 가볍게 쓸수있는 데이터 저장소를 SharedPreference 로 정하고,

 

api 로 받아온 스플래시 스크린의 구분자를 SharedPreference 로 저장해주고,

 

해당 값에 따라

 

SharedPreferences sharedPreferences = getSharedPreferences("splash", 0);
String result = sharedPreferences.getString("splash", "");

SplashScreen.show(this,result);

 

show 해주는 식으로 작성했다.

 

서버에서 데이터 값을 받아와서 브릿지를 통해 안드로이드의 SharedPreference에 저장하는 방법은

 

const updateSplashCode = React.useCallback(() => {
RNSharedPreferences.getString('splash', 'splash', (result) => {
if (result !== SPLASH_CODE) {
RNSharedPreferences.putString(
'splash',
'splash',
SPLASH_CODE,
// eslint-disable-next-line @typescript-eslint/no-empty-function
(_result) => {},
);
}
});
}, [SPLASH_CODE]);

 

해당 방법으로 해결했으며

 

android 의 sharedPreference 에 접근하는 방법은

 

RNHaredPreferencesPagkage.java

 

package com.bw_frontend_table_order_app.sharedPreference;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.facebook.react.bridge.JavaScriptModule;

public class RNSharedPreferencesPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(new RNSharedPreferencesModule(reactContext));
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

 

RNSharedPreferencesModul.java

 

package com.bw_frontend_table_order_app.sharedPreference;

import android.content.SharedPreferences;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;

public class RNSharedPreferencesModule extends ReactContextBaseJavaModule {

private final ReactApplicationContext reactContext;

public RNSharedPreferencesModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}

@Override
public String getName() {
return "RNSharedPreferences";
}

@ReactMethod
public void getString(String prefName, String keyName, Callback resultCallback) {
SharedPreferences sharedPreferences = this.reactContext.getSharedPreferences(prefName, 0);

String result = sharedPreferences.getString(keyName, "");
resultCallback.invoke(result);
}

@ReactMethod
public void putString(String prefName, String keyName, String value, Callback resultCallback) {
SharedPreferences sharedPreferences = this.reactContext.getSharedPreferences(prefName, 0);

boolean commitResult = sharedPreferences.edit().putString(keyName, value).commit();
resultCallback.invoke(commitResult);
}
}

 

로 작성했고

 

const { RNSharedPreferences } = NativeModules;

 

로 해결했다.

728x90
반응형
728x90
반응형

 

 

yarn add @react-native-seoul/kakao-login

 

사이드 프로젝트에 카카오 로그인을 붙이는데

 

[!] CDN: trunk URL couldn't be downloaded: https://cdn.jsdelivr.net/cocoa/Specs/a/d/6/KakaoSDKCommon/2.22.1/KakaoSDKCommon.podspec.json Response: SSL peer certificate or SSH remote key was not OK

 

해당 에러가 나왔다.

찾아보니, vpn을 사용하라는 디투어가있었는데...해당 방법은 적합한것 같지않아서

 

다른 방법을 찾았다.

 

pod file 상단에

 

 

를 추가해주고,

 

podfile.lock 을 삭제해준다.

 

터미널에서

root/ios 로 이동하여

 

pod repo remove trunk

 

로 레포를 제거하고

 

pod install

 

로 다시 깔아주면

 

잘 해결된다.

728x90
반응형
728x90
반응형

현재 redux로 앱내의 상태를 관리하는데,

react-query 를 이용하여, 클라이언트 / 서버의 상태를 분리하기위해 이번에 react-query 를 도입하려한다.

 

const {data, isSuccess, isError} = useQuery(['get-main-info'], () => getMain);

 

해당 코드로 query 를 사용하려하니

 

해당 에러가 나왔다. 

 

에러를 읽어보면 reqct-query v5부터는 object type으로 변경되었다고하는데

 

const {data, isSuccess, isError} = useQuery({
    queryKey: ['get-main-info'],
    queryFn: getMain,
  });

 

같은 내용을 해당 코드로 변경해서 해결했다.

728x90
반응형
728x90
반응형

rn을 하다보면, 기본적인 틀을 짤때 하는 일들이 있다.

 

1.stack navigation / bottom tab navigation

2.redux toolkit

3.persist-store

4.eslint / prettier 설정

 

등등...

만든 템플릿 프로젝트에 들어가있는 라이브러리들

 

사실 프로젝트를 시작할때, 기본적인 구조를 고민하면서 짜는건 즐거운 순간이지만, 대부분 고민을 하고나서 짜는 구조는 비슷해보인다.

 

해서, 시간이 날때 기본적인 라이브러리들을 넣고, 폴더 구조를 잡아 놓은 프로젝트를 만들었다.

 

이번에 새로 시작하는 프로젝트에 해당 프로젝트의 이름만 변경하여 이용하려고한다.

 

그러기위해서는 일단, 프로젝트의 이름 / 번들 id 등을 변경해줘야한다.

 

그러기 위해서는

npm install -g react-native-rename

 

명령어로, react-native-rename 라이브러리를 설치해준다.

 

또 기존 템플릿에서 브랜치도 하나 따준다(혹시 문제가 생길경우를 대비하여, 나는 작업할때 모두 브랜치를 딴다)

 

git checkout -b rename

 

후에, 해당 브랜치의 로컬에서 

 

react-native-rename "새로운이름"

 

명령어를 쳐주면, 

 

파일들이 변경된다.

 

루트에서 

 

npx pod-install

 

로 다시 pod 세팅을 해주면 ios 는 모두 변경이 완료된다.

 

안드로이드 같은 경우에는

 

기존 번들 아이디를 검색하여, 새로운 번들아이디를 입력하면되고, xcode에서도 같은 번들아이디로 변경해주면 끝난다.

 

해당 브랜치의 루트에서

rm -rf ./.git

 

로 깃파일을 없애주고

 

git init

 

으로 새로운 깃을 만들어 레파지토리에 연결해주면 끝이다.

728x90
반응형
728x90
반응형

요즘 IOS 앱을 심사 넣을때 메일로 연락이 온다.

해당 내용은 현재 23년 3월 21일에는 문제가 없지만,

starting May 1, 2024, 

24년 5월 1일부터는 새로 앱을 올리거나, 업데이트를 하게되면 문제가 된다는 내용이다.

해당 내용은 이렇다.

 

해당 링크로 이동해서 해석해보면 업데이트된 애플의 개인정보 정책에 대해서 앱내에 명시를 해줘야한다 로 요약할수 있다.

그러면 해당 api들을 추가해보자

 

 

일단 xcode에서 새 파일을 만든다.

 

 

app privacy 파일을 만든다.

 

메일로 온 api 의 코드 종류를 알아보겠다

 

NSPrivacyAccessedAPICategoryDiskSpace

  • 85F4.1장치를 사용하는 사람에게 디스크 공간 정보 표시(표시만 가능, 장치 외부로 보내는 정보는 포함되지 않음)
  • E174.1파일을 쓸 수 있을 만큼 디스크 공간이 충분한지 확인하거나, 디스크 공간이 부족할 때 앱이 파일을 삭제할 수 있도록 디스크 공간이 부족한지 확인하세요.
  • 7D9E.1버그 보고서에 사용됩니다. 단, 제출 여부는 사용자가 선택하는 선택정보이어야 합니다.
  • B728.1건강 연구    API 카테고리에 액세스하여 연구 데이터 수집에 영향을 미치는 디스크 공간 부족에 대해 연구 참여자에게 감지하고 알립니다.

NSPrivacyAccessedAPICategorySystemBootTime

  • 35F9.1앱 내에서 발생한 이벤트 사이에 경과된 시간을 측정하거나 타이머 활성화 계산을 수행하기 위해 시스템 부팅 시간에 액세스합니다. 이 데이터를 이 장치 밖으로 보낼 수 없습니다.
  • 8FFB.1 UIKit 또는 AVFAudio 프레임워크와 관련된 이벤트와 같이 앱 내에서 발생한 이벤트에 대한 절대 타임스탬프를 계산합니다.
  • 3D61.1그 사람이 제출하기로 선택한 버그 보고서에서. 시스템 부팅 시간 정보는 보고서의 일부로 사람에게 눈에 띄게 표시되어야 합니다.

NSPrivacyAccessedAPICategoryFileTimestamp

  • DDA9.1장치를 사용하는 사람에게 파일 타임스탬프를 표시하려고 합니다.
    • 참고: 이러한 이유를 선언하면 정보가 기기 외부로 전송되지 않을 수 있습니다.
  • C617.1앱 컨테이너, 앱 그룹 컨테이너 또는 앱의 CloudKit 컨테이너 내부에 있는 파일의 타임스탬프, 크기 또는 기타 메타데이터에 액세스하세요.
  • 3B52.1문서 선택기 보기 컨트롤러를 사용하는 등 사용자가 특별히 액세스 권한을 부여한 파일이나 디렉터리의 타임스탬프, 크기 또는 기타 메타데이터에 액세스합니다.
  • 0A2A.1타사 SDK가 앱에서 사용할 파일 타임스탬프 API에 대한 래퍼 함수를 제공하고 앱이 래퍼 함수를 호출할 때만 파일 타임스탬프 API에 액세스하는 경우 이 이유를 선언하세요.

요약하자면,

3B52.1  시스템 기본 파일 선택기를 사용하여 사용자가 선택한 파일만 읽는 경우에  사용하세요  . 

DDA9.1 정보를 표시하기만 하고 정보를 저장하거나 업로드하지 않는 경우에 사용하세요  .

C617.1 , 그룹 또는 CloudKit 내에서 정보에 액세스하고 사용하는 경우 사용하세요  .

 

NSPrivacyAccessedAPICategoryUserDefaults

  • CA92.1액세스 사용자는 기본적으로 앱 자체에서만 액세스할 수 있는 정보를 읽고 쓸 수 있습니다.
    • 참고: 이 코드를 선언하면 앱 그룹 내에서 UserDefaults 값을 공유할 수 없습니다(앱과 위젯 간에 데이터를 공유할 수 없음).
  • 1C8F.1액세스 사용자는 기본적으로 앱 자체와 동일한 앱 그룹의 구성원인 앱, 앱 확장 프로그램 및 앱 클립에만 액세스할 수 있는 정보를 읽고 씁니다.
  • C56D.1타사 SDK는 앱이 사용할 사용자 기본 API에 대한 래퍼 기능을 제공하며, 앱이 래퍼 함수를 호출할 때만 사용자 기본 API에 액세스합니다.
    • 참고: 이러한 이유로 액세스된 정보 또는 파생된 정보는 타사 SDK의 자체 목적으로 사용되거나 타사 SDK에 의해 장치 외부로 전송될 수 없습니다.
    • 예를 들어,  앱이 UserDefaults 사용하여 기본 iOS 앱과 위젯 사이에 1C8F.1 사용해야 하는지 여부를 표시하기 위해 사용자의 현재 도시를 공유하는 경우

 

해당 코드를 읽어보고 하나하나씩 본인에 맞는 것으로 선택하면된다.

 

reason을 추가할때, 충분한 설명이 나와있다.

 

설명서를 잘읽고,

구글 analytics 와 sentry가 앱내 붙어있는것을 감안하여, 이유들을 등록하였다. 

최종은

 

이다.

 

해당 privacyInfo 파일을 추가해서 전송하니, 더이상 

Missing API declaration

에 해당하는 메일이 오지않았다.

 

저번주에 ios로 이커머스를 서비스할때, eu 정책이 바뀌어서, 세금관련 정보를 추가했는데, 이번주에는 개인정보 정책을 업로드했다.

 

항상 개발자 메일을 잘 확인해야한다.

 

 

참고링크

https://developer.apple.com/documentation/bundleresources/privacy_manifest_files/describing_use_of_required_reason_api

 

728x90
반응형
728x90
반응형
$ yarn add --dev eslint-plugin-prettier
$ yarn add --dev eslint-config-prettier

 

해당 명령어로 eslint 를 설정해주고

 

생성되어있는

 

.eslint.json을

 

{
"parser": "@typescript-eslint/parser",
"plugins": ["react", "@typescript-eslint"],
"extends": [
"eslint:recommended",
"@react-native-community",
"airbnb",
"airbnb/hooks",
"plugin:prettier/recommended"
],
"rules": {
"@typescript-eslint/explicit-module-boundary-types": "off",
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/react-in-jsx-scope": "off"
},
"settings": {
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"node": true
},
"globals": {
"__DEV__": true
}
}

 

로 변경해주고 vscode 를 재시작 하면 된다.

 

아래 옵션은 'React' must be in scope when using JSX 라는 워닝이 나올때 꺼주면, 모든 컴포넌트에서

 

import react from 'React'를 사용할 필요가 없다.

 

"react/react-in-jsx-scope": "off"

728x90
반응형

+ Recent posts