좋은앱개발자가되고싶다

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

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

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

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

요즘 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

$ yarn add --dev eslint-plugin-prettier
$ yarn add --dev eslint-config-prettier

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

생성되어있는

.eslint.json을

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

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

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

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

구글 crashlytics 에 새로운 에러가 올라왔다.

해당 에러를 찾아보니, ndk 들의 .so 파일들의 링크가 유효하지 않을때 나오는 에러라고하는데,

1. app/build.gradle 에

defaultConfig{

}

와

2.gradle.properties 에

로 해결했다.

react-native-webview 를 사용하면

os 글자 크기에 따라 변경된다.

webview props 에 textZoom={100} 을 넣으면 일정한 크기로 보여지게된다.

비슷한 원리로  <Text> 컴포넌트의 디폴트 사이즈도 os 글자 크기에 따라 변경되는데

이런 함수로 해결하면 된다.

react native webview 는 고질적인 문제가 있다.

이문제는 크롬의 업데이트에서부터 시작됐다.

webview 에서 크래시가 지 않는 방법은 대부분의 RN 개발자들이 검색 해봤을 것이다.

가장 저차원 적인 문제해결은 android manifest 에 

값을 변경하는 것이다.

하지만 해당 hardwareAccelarted 를 전역에서 변경하면 react-native-video 같은 화면이 정상작동하지 않을 수 있다.

대부분의 개발자들이 workaround 의 한 방법으로 

Webview 스타일에

해당방법으로 opacity 를 넣는다.

해당 방법으로는 해결이 된다.

오늘 작성하는 글은

해당 방법으로도 해결되지 않는 버그가 생겼을때 해결하는 방법이다.

주로 webview 의 길이가 많이 길어지기에, scrollview 안에서 사용하는 경우가 많은데,

scrollview안에 있는 webview 의 길이가 매우 길어지면(react-native-webview 에는 5000px 정도로 나와있다)

스크롤이 업되거나 다운되면서 스크롤의 범위가 벗어날때, 크래시되는 경우가 발생한다.

scrollview의 bounce가 실행되며, 앱이 꺼지는 경우가 있는데

웹뷰를 포함한 scrollview 에서

해당 props 로 bounce 액션을 막아주면 해결된다.

FastImage 에서는 gif가 ios android 모두 잘 정상작동한다.

하지만

과 같은 react-native 의 Image 컴포넌트를 기본으로 개발한 라이브러리들에서는 gif 가 정상작동하지 않는다

이를 위해선

app/build.gradle 에

를 추가해줘야 정상작동한다.

react native debugger 에는 로그가 나오지않아

안드로이드 스튜디오 로그캣으로 디버깅을 해보았다.

에러 메세지는 

the crashlytics build id is missing. this occurs when the crashlytics gradle plugin is missing from your app's build configuration.

였는데, 안드로이드에 추가로 세팅을 해줘야 하는 부분이 있었다.

https://rnfirebase.io/crashlytics/android-setup

해당 부분을 참고하여

android/build.gradle

// ..
buildscript {
  // ..
  repositories {
    // ..
    google()
  }
  // ..
}

android/build.gradle

// ..
buildscript {
  // ..
  dependencies {
    // ..
    classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.9'
  }
  // ..
}

android/app/build.gradle

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // apply after this line
apply plugin: 'com.google.firebase.crashlytics'
// ..

로 해결했다.