좋은앱개발자가되고싶다

현재 react native 0.79 버전으로 앱을 리뉴얼하고있는데,

현재 테블릿보다 사양이 훨씬 낮은 테블릿에서 자연스럽게 동작해야하는 허들이 있다.

따라서 이번에 Fabric View 를 직접 만들어서 사용해보기로했다.

사용할곳은, 상품을 보여주는 컴포넌트이다. 

해당 컴포넌트가 장바구니 열림 / 닫힘에 의해 애니메이션이 되어야하고,

글자가 특정 길이 이상일때, 흐르는 marquee 애니메이션이 들어가야한다.

일단 기존의 TurboModule 과 같은 폴더구조로 생성해주었다.

ProductItemView.kt

ProductItemLayoutModulePackage.kt

ProductItemLayoutModule.kt

ProductItemFabricPackage.kt

이렇게 구성을 해주고

specs/NativeProductItemLayoutModule.ts

이렇게 구성해주었다.

( package.json 이

기때문에, specs/ 에 넣어놓았고, TurboModule 을 적용할때, ts 파일의 처음 이 Native 로 시작해야했다.)

codegen 으로

NativeProductItemLayoutModuleSpec.java

이 생긴걸 확인했다.

체감상 react native reanimated 도 fabric 을 이용하고있기에, 엄청 성능이 더 뛰어난것같은 느낌은 받지못했지만

New architecture 에서 큰 변화였던 Fabric UI 를 직접 작성해서 써본데 큰 의의를 두었다.

(회사 코드가 아니라 작성을 위해 다시 작성한 코드입니다)

좋은 기회로 현재 프로젝트를 처음부터 끝까지 새로 리팩토링 하는 기회를 얻게되었다.

0.79.2 버전으로 새로 버전업을해서 개발중인데, TurboModule 을 사용해보기로 했다.

TurboModle 은 기존 bridge 구조를 사용하지않아 좀더 좋은 퍼포먼스를 보여준다

일단 

폴더트리는

android/app 에서

이렇게 구성했고

NativeLocalStorageModule.java 는

package com.공통폴더이름.nativelocalstorage;

import android.content.Context;
import android.content.SharedPreferences;
import com.공통폴더이름.NativeLocalStorageSpec;
import com.facebook.react.bridge.ReactApplicationContext;

public class NativeLocalStorageModule extends NativeLocalStorageSpec {

  public static final String NAME = "NativeLocalStorage";

  public NativeLocalStorageModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return NAME;
  }

  @Override
  public void setItem(String value, String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    SharedPreferences.Editor editor = sharedPref.edit();
    editor.putString(key, value);
    editor.apply();
  }

  @Override
  public String getItem(String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    String username = sharedPref.getString(key, null);
    return username;
  }

  @Override
  public void removeItem(String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    sharedPref.edit().remove(key).apply();
  }

  @Override
  public void clear() {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    sharedPref.edit().clear().apply();
  }
}

NativeLocalStoragePackage.java

package com.공통폴더이름.nativelocalstorage;

import com.facebook.react.BaseReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.model.ReactModuleInfo;
import com.facebook.react.module.model.ReactModuleInfoProvider;

import java.util.HashMap;
import java.util.Map;

public class NativeLocalStoragePackage extends BaseReactPackage {

  @Override
  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
    if (name.equals(NativeLocalStorageModule.NAME)) {
      return new NativeLocalStorageModule(reactContext);
    } else {
      return null;
    }
  }

  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
    return new ReactModuleInfoProvider() {
      @Override
      public Map<String, ReactModuleInfo> getReactModuleInfos() {
        Map<String, ReactModuleInfo> map = new HashMap<>();
        map.put(NativeLocalStorageModule.NAME, new ReactModuleInfo(
          NativeLocalStorageModule.NAME,       // name
          NativeLocalStorageModule.NAME,       // className
          false, // canOverrideExistingModule
          false, // needsEagerInit
          false, // isCXXModule
          true   // isTurboModule
        ));
        return map;
      }
    };
  }
}

이렇게 구성했다.

또한 codegen 을 사용하기 위해서는 root/specs 에

NativeLocalStorage.ts 가

import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  setItem(value: string, key: string): void;
  getItem(key: string): string | null;
  removeItem(key: string): void;
  clear(): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>(
  'NativeLocalStorage',
);

이렇게 들어가야있어야한다.

마지막으로, package.json 에

 "codegenConfig": {
    "name": "MyTurboModules",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": {
      "javaPackageName": "com.공통폴더이름"
    }
  },

이렇게 세팅하면된다.

해당 명령어로, 먼저 codegen 을통해, 

app/build/generated/codegen 폴더에 NativeSystemModuleSpec 를 생성해주고 해당 파일을

이렇게 사용하는 원리다.

추가

주의사항

1. specs/ 안에 있는 파일명이 Native 로 시작해야한다.

파일명을 Native 로 시작하지않으면, codegen 생성시에 읽지못함

2.

해당 NativeAwsMqttModule 이 

와 일치해야한다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

기분좋게, 해당 기능은 평가원을 통과하였다

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
지금 다니는 회사에서 Barrier Free 기능을 테블릿오더에 탑재하기로 하였다.

이는 장애우분들도 테블릿오더로 사용하기위함이었다.

해당 기능에는 시각장애우모드가 있기때문에, 모든 컴포넌트들은 키보드로 사용가능하도록(방향키 / 선택 등) 처음 구성하였다.

기본적인 개념은 모든 기능은 스크롤이 없이, 터치만으로 사용이 가능하여야하고, 해당 터치모드는 시각장애우들이 이어폰을 꽂았을때, 키보드로 조작이 가능하기로 하였다.

총 작업기간은 주말출근 등 빡시게 하여 한달만에 완성하였다. 물론 QA테스트등을 위하여 실 워킹데이는 22일정도 된다.

해당 작업을 받았을때,

일단 터치만으로 사용가능한 컴포넌트들을 구성하고, 추후에 ref 값으로 키보드 포커싱을 이동하는 개념으로 잡았다.

터치만으로 작업시에, FlatList 들을 pagination 을 통해 , index 를 관리하고, 터치로, 해당 스크롤들 조작하는 방법으로 했다.

물론 해당 기능은 크게 어렵지않았는데,

시각장애우분들을 위한 키패드모드를 하면서 ref에 대한 공부가 많이 된것같다.

기본적으로

import React, {
  ReactNode,
  useEffect,
  useRef,
  forwardRef,
  useImperativeHandle,
} from 'react';
import {
  Animated,
  Pressable,
  PressableProps,
  StyleSheet,
  Text,
  ViewStyle,
} from 'react-native';
import { TSoundType, usePlayPollyTTS } from '@/utils/polly/playPollyTTS';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
const AnimatedText = Animated.createAnimatedComponent(Text);

interface BFTouchableProps extends PressableProps {
  children: ReactNode;
  style?: ViewStyle | ViewStyle[];
  type?: TSoundType;
  activeBackgroundColor?: string;
  activeTextColor?: string;
  activeBorderColor?: string;
  sound?: string;
  soundKey?: string;
}

const BFTouchable = forwardRef<any, BFTouchableProps>(
  (
    {
      children,
      style = {},
      onPress,
      onLongPress,
      type,
      activeBackgroundColor,
      activeTextColor,
      activeBorderColor,
      ...props
    },
    ref,
  ) => {
    const localRef = useRef<any>(null); // 내부 ref
    const propsRef = useRef(props);
    React.useEffect(() => {
      propsRef.current = { ...props, onPress };
    }, [onPress, props]);
    useImperativeHandle(ref, () => ({
      ...localRef.current,
      focus: () => {
        if (props?.sound) {
          playPollyTTS({ text: props?.sound, key: props?.soundKey });
        } else {
          playPollyTTS({ text: '항목이 선택되었습니다', key: 'focused' });
        }
      },
      press: () => {
        if (propsRef.current?.onPress) {
          propsRef.current.onPress({ nativeEvent: {} } as any);
        }
      },
    }));

    const intervalRef = useRef<NodeJS.Timeout | null>(null);
    const animatedValue = useRef(new Animated.Value(0)).current;
    const flattenedStyle = StyleSheet.flatten(style);
    const { playPollyTTS } = usePlayPollyTTS();

    const defaultBackgroundColor =
      flattenedStyle?.backgroundColor || 'transparent';
    const defaultBorderColor = flattenedStyle?.borderColor || 'transparent';

    let extractedTextColor: string | undefined;
    React.Children.forEach(children, (child) => {
      if (
        React.isValidElement(child) &&
        child.type === Text &&
        child.props.style
      ) {
        const textStyle = StyleSheet.flatten(child.props.style);
        if (textStyle?.color) {
          extractedTextColor = textStyle.color;
        }
      }
    });

    const defaultTextColor = extractedTextColor || 'black';

    const backgroundColor = animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [
        defaultBackgroundColor,
        activeBackgroundColor || defaultBackgroundColor,
      ],
    });

    const borderColor = animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [
        defaultBorderColor,
        activeBorderColor || defaultBorderColor,
      ],
    });

    const textColor = animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [defaultTextColor, activeTextColor || defaultTextColor],
    });

    const handlePressIn = () => {
      if (!activeBackgroundColor && !activeTextColor && !activeBorderColor)
        return;
      Animated.timing(animatedValue, {
        toValue: 1,
        duration: 0,
        useNativeDriver: false,
      }).start(() => {
        setTimeout(() => {
          Animated.timing(animatedValue, {
            toValue: 0,
            duration: 0,
            useNativeDriver: false,
          }).start();
        }, 300);
      });
    };

    const handleLongPressStart = (event: any) => {
      if (onPress) onPress(event);
      playPollyTTS({ text: 'BF', key: 'click' });

      intervalRef.current = setInterval(() => {
        if (onPress) onPress(event);
        playPollyTTS({ text: 'BF', key: 'click' });
      }, 300);
    };

    const handleLongPressEnd = () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    };

    useEffect(() => {
      return () => {
        if (intervalRef.current) {
          clearInterval(intervalRef.current);
          intervalRef.current = null;
        }
      };
    }, []);

    const renderChildren = () => {
      return React.Children.map(children, (child) => {
        if (React.isValidElement(child) && child.type === Text) {
          return (
            <AnimatedText
              {...child.props}
              style={[child.props.style, { color: textColor }]}
            >
              {child.props.children}
            </AnimatedText>
          );
        }
        return child;
      });
    };

    return (
      <AnimatedPressable
        ref={localRef}
        android_disableSound={true}
        style={[style, { backgroundColor, borderColor }]}
        onPress={(event) => {
          handlePressIn();
          playPollyTTS({ text: 'BF', key: 'click' });
          if (onPress) onPress(event);
        }}
        onPressIn={handlePressIn}
        onPressOut={handleLongPressEnd}
        onPressCancel={handleLongPressEnd}
        onLongPress={onLongPress ? handleLongPressStart : undefined}
        {...props}
      >
        {renderChildren()}
      </AnimatedPressable>
    );
  },
);

BFTouchable.displayName = 'BFTouchable';

export default BFTouchable;

모든 버튼에서 사용할 컴포넌트를 만들었다.

함수형 컴포넌트들의 ref 값을 참조하기위해 useImperativeHandle 훅을 사용하여 ref 값을 설정해주었고,

키보드를 통해 focus 가 될때마다 음성인식을 해주었다.

onPress 로 받은 함수를 실행할때도, ref 값의 할당은 UI 가 다 그려지고나서 하기때문에 안에서 ref 값을 한번 더 사용해주었다.

import useModal from '@/utils/hooks/useModal';
import { usePlayPollyTTS } from '@/utils/polly/playPollyTTS';
import { useIsFocused } from '@react-navigation/native';
import React from 'react';
import KeyEvent from 'react-native-keyevent';
import { useBFContext } from './BFContext';

export const BFKeyType = {
  volumeUp: 137,
  volumeDown: 136,
  mode: 132,
  arrowRight: 22,
  arrowLeft: 21,
  center: 112,
  arrowUp: 19,
  arrowDown: 20,
  home: 122,
  info: 131,
  back: 111,
  jackIn: 138,
  jackOut: 139,
};

type BFKeyCode = (typeof BFKeyType)[keyof typeof BFKeyType];

type TUseKeypad = {
  narration?: { key?: string; text: string };
  onArrowUp?: () => void;
  onBack?: () => void;
  focusableRefs?: React.MutableRefObject<React.Component<any, any, any>[]>;
  onInfo?: () => void;
  onHome?: () => void;
  visible?: boolean;
  currentIndexRef: React.MutableRefObject<number>;
  onSelect?: () => void;
  setMilliseconds?: React.Dispatch<React.SetStateAction<number>>;
  onReset?: () => void;
  setModalSeconds?: React.Dispatch<React.SetStateAction<number>>;
};

export const useKeypad = ({
  narration,
  onArrowUp,
  onBack,
  focusableRefs,
  onInfo,
  onHome,
  visible,
  currentIndexRef,
  onSelect,
  setMilliseconds,
  onReset,
  setModalSeconds,
}: TUseKeypad) => {
  const { replayLastAudio, playPollyTTS, stopCurrentAudio } = usePlayPollyTTS();
  const { currentVolume, currentSpeed, isSettingVoice, isTimeDone } =
    useBFContext();
  const modal = useModal();
  const isFocused = useIsFocused();

  const settingSpeed = React.useCallback(
    (keyCode: BFKeyCode, speed: number) => {
      if (speed === 1.5) {
        if (keyCode === BFKeyType.arrowRight) {
          playPollyTTS({ text: 'stuck', key: 'stuck' });
        } else if (keyCode === BFKeyType.arrowLeft) {
          currentSpeed.current = 1;
          playPollyTTS({
            text: '현재 보통 속도로 말하고 있어요. 좌우 방향키를 이용해 속도를 조절해보세요',
            key: 'settingSpeed_1',
          });
        }
      } else if (speed === 0.8) {
        if (keyCode === BFKeyType.arrowRight) {
          currentSpeed.current = 1;
          playPollyTTS({
            text: '현재 보통 속도로 말하고 있어요. 좌우 방향키를 이용해 속도를 조절해보세요',
            key: 'settingSpeed_1',
          });
        } else if (keyCode === BFKeyType.arrowLeft) {
          playPollyTTS({ text: 'stuck', key: 'stuck' });
        }
      } else if (speed === 1) {
        if (keyCode === BFKeyType.arrowRight) {
          currentSpeed.current = 1.5;
          playPollyTTS({
            text: '현재 더 빠른속도로 말하고있어요',
            key: 'settingSpeed_2',
          });
        } else if (keyCode === BFKeyType.arrowLeft) {
          currentSpeed.current = 0.8;
          playPollyTTS({
            text: '현재 더 느린 속도로 말하고 있어요',
            key: 'settingSpeed_3',
          });
        }
      }
    },
    [],
  );

  const settingVolume = React.useCallback(
    (keyCode: BFKeyCode, volume: number) => {
      const speak = (text: string, key: string) => playPollyTTS({ text, key });

      if (volume === 0.99) {
        currentVolume.current = 0.33;
        keyCode === BFKeyType.volumeUp
          ? speak('현재 더 작게 말하고있어요', 'settinvVolume_2')
          : keyCode === BFKeyType.volumeDown &&
            ((currentVolume.current = 0.66),
            speak('현재 보통 크기로 말하고있어요', 'settinvVolume_1'));
      } else if (volume === 0.33) {
        keyCode === BFKeyType.volumeUp &&
          ((currentVolume.current = 0.66),
          speak('현재 보통 크기로 말하고있어요', 'settinvVolume_1'));
        keyCode === BFKeyType.volumeDown &&
          ((currentVolume.current = 0.99),
          speak('현재 더 크게 말하고 있어요', 'settinvVolume_3'));
      } else if (volume === 0.66) {
        keyCode === BFKeyType.volumeUp &&
          ((currentVolume.current = 0.99),
          speak('현재 더 크게 말하고 있어요', 'settinvVolume_3'));
        keyCode === BFKeyType.volumeDown &&
          ((currentVolume.current = 0.33),
          speak('현재 더 작게 말하고있어요', 'settinvVolume_2'));
      }
    },
    [],
  );

  const settingVoice = React.useCallback(
    async (keyCode: BFKeyCode) => {
      if (keyCode === BFKeyType.mode && !isTimeDone.current) {
        isSettingVoice.current = true;
        playPollyTTS({
          text: ' 지금부터, 음성 속도와 크기 조절을 시작합니다...',
          key: 'settingVoice',
        });
        return;
      }

      if (isSettingVoice.current && !isTimeDone.current) {
        if (keyCode === BFKeyType.center) {
          await stopCurrentAudio();
          if (narration) {
            playPollyTTS({
              text: '속도, 크기 조절 완료',
              key: 'settingVoice_done_',
            }).then(() => {
              setTimeout(() => {
                playPollyTTS({ text: narration.text, key: narration.key });
              }, 3000);
            });
          }
          isSettingVoice.current = false;
          return;
        }

        if (
          keyCode === BFKeyType.volumeUp ||
          keyCode === BFKeyType.volumeDown
        ) {
          settingVolume(keyCode, currentVolume.current);
          return;
        }

        if (
          keyCode === BFKeyType.arrowRight ||
          keyCode === BFKeyType.arrowLeft
        ) {
          settingSpeed(keyCode, currentSpeed.current);
          return;
        }

        if (keyCode === BFKeyType.arrowUp) {
          await stopCurrentAudio();
          replayLastAudio();
          return;
        }
      }
    },
    [narration, stopCurrentAudio],
  );

  const selectItem = React.useCallback(
    (keyCode: BFKeyCode) => {
      const validRefs = (focusableRefs?.current || []).filter(Boolean);
      if (!validRefs.length) return;

      if (keyCode === BFKeyType.arrowRight) {
        currentIndexRef.current =
          (currentIndexRef.current + 1) % validRefs.length;
      } else {
        currentIndexRef.current =
          currentIndexRef.current - 1 < 0
            ? validRefs.length - 1
            : currentIndexRef.current - 1;
      }

      validRefs[currentIndexRef.current]?.focus?.();
    },
    [focusableRefs],
  );

  const onPressItem = React.useCallback(() => {
    const validRefs = (focusableRefs?.current || []).filter(Boolean);
    if (!validRefs.length) return;
    validRefs[currentIndexRef.current]?.press?.();
  }, [focusableRefs]);

  React.useEffect(() => {
    if (!isFocused) return;

    setTimeout(() => {
      KeyEvent.onKeyDownListener((keyEvent) => {
        (async () => {
          if (!isFocused || !visible) return;
          setMilliseconds(0);
          setModalSeconds(0);

          if (!isSettingVoice.current && !isTimeDone.current) {
            switch (keyEvent.keyCode) {
              case BFKeyType.home:
                if (onHome) {
                  await stopCurrentAudio();
                  onHome();
                }
                break;
              case BFKeyType.info:
                if (onInfo) {
                  await stopCurrentAudio();
                  onInfo();
                } else {
                  await playPollyTTS({
                    text: '호출 선택',
                    key: 'on_info',
                  }).then(() => {
                    modal.open('bf/EmpCallModal', {}, {});
                  });
                }
                break;
              case BFKeyType.arrowUp:
                if (onArrowUp) {
                  await stopCurrentAudio();
                  onArrowUp();
                }
                break;
              case BFKeyType.volumeDown:
              case BFKeyType.volumeUp:
                await stopCurrentAudio();
                replayLastAudio();
                break;
              case BFKeyType.arrowRight:
              case BFKeyType.arrowLeft:
                if (onSelect) {
                  onSelect();
                } else {
                  selectItem(keyEvent.keyCode);
                }

                break;
              case BFKeyType.center:
                await stopCurrentAudio();
                onPressItem();
                break;
              case BFKeyType.back:
                if (onBack) {
                  await stopCurrentAudio();
                  onBack();
                }
                break;
            }
          }

          if (keyEvent.keyCode === BFKeyType.arrowDown && !isTimeDone.current) {
            await stopCurrentAudio();
            replayLastAudio();
          }

          await settingVoice(keyEvent.keyCode);

          if (isTimeDone.current) {
            if (
              onReset &&
              keyEvent.keyCode !== BFKeyType.jackIn &&
              keyEvent.keyCode !== BFKeyType.jackOut
            ) {
              await stopCurrentAudio();
              onReset();
            }
          }
        })();
      });
    }, 200);

    return () => {
      KeyEvent.removeKeyDownListener();
    };
  }, [isFocused, visible]);
};

키보드 훅도 해당 내용으로 작성했는데, 훅안에서 ref 값들을 배열로 받고, 키보드의 움직임에 따라 focus 를 호출하도록하였다.

단기간에, 큰 이슈없이 생각한대로 개발이 돼서 뿌듯하다

해당 코드는 회사 코드가 아니라 예시를 위해 제가 새로 작성한 코드입니다.

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

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

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

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

app/build.gradle 에서

로 빌드해준다.

브릿지를 태워야 하기에

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

DeviceOffModule.java

DeviceOffPackage.java

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

react native 에서

로 실행해주면 된다.

AndroidMainfest.xml 에

까지 추가하면,

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

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

테블릿은 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 사용하도록 설정

해당 작업이후

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

우리의 원인은 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

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

에서 확인할 수 있듯이

foreground > visible > service > cached (empty)

로 나뉜다.

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

라는 생각으로, 

foreground service 를 띄워봤다.

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

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

이번에는 WorkManager를 적용하여 

java쪽에서

DeviceEventManagerModule.RCTDeviceEventEmitter

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

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

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

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

https://liveforownhappiness.tistory.com/138

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

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

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

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

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

일단 전에 작업되어있던 

(위에 링크 게시물 참고)

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

SplashScreen.java 코드를

이렇게 수정해주었다.

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

resolveUri failed on bad bitmap uri

라는 에러가 나와

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

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

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

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

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

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

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

SplashScreen.java

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

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

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

해당 값에 따라

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

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

해당 방법으로 해결했으며

android 의 sharedPreference 에 접근하는 방법은

RNHaredPreferencesPagkage.java

RNSharedPreferencesModul.java

로 작성했고

const { RNSharedPreferences } = NativeModules;

로 해결했다.

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

로 다시 깔아주면

잘 해결된다.

현재 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,
  });

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