Roopretelcham

콜백 함수 (Callback Function)

• 정의: 콜백 함수는 다른 함수에 인자로 전달되는 함수입니다. 이 함수는 외부 함수의 내부 로직에 의해 특정 시점에 호출됩니다. 콜백 함수는 비동기 처리, 이벤트 리스너 등록, 고차 함수(higher-order function)에서 자주 사용됩니다.
• 용도: 콜백 함수는 비동기 작업의 결과를 처리하거나, 특정 이벤트가 발생했을 때 수행할 작업을 정의하는 데 사용됩니다. 예를 들어, 서버로부터 데이터를 요청하고 그 데이터가 도착했을 때 실행될 함수, 또는 사용자가 버튼을 클릭했을 때 실행될 함수 등이 콜백 함수로 사용될 수 있습니다.
• 예시:

// setTimeout 함수에 전달된 익명 함수는 콜백 함수입니다.
setTimeout(() => {
    console.log("1초 후에 실행됩니다.");
}, 1000);

핸들러 (Handler)

• 정의: 핸들러는 특정 이벤트나 조건에 대응하여 실행되도록 지정된 함수를 의미합니다. 이 용어는 주로 이벤트 처리와 관련된 맥락에서 사용됩니다.
• 용도: 이벤트 핸들러는 사용자의 입력, 시스템 이벤트, 네트워크 응답 등 다양한 이벤트에 반응하기 위해 사용됩니다. 웹 개발에서는 DOM 이벤트(클릭, 키보드 입력 등)를 처리하는 함수를 이벤트 핸들러라고 부릅니다.

• 예시:

<!-- HTML에서 버튼 클릭 이벤트에 대한 핸들러를 정의합니다. -->
<button onclick="alert('클릭됨!')">클릭하세요</button>

// JavaScript에서 이벤트 리스너를 추가하는 방식으로 핸들러를 지정할 수 있습니다.
document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다.");
});

결론

요약하자면, 콜백 함수는 넓은 의미에서 다른 함수의 실행 완료, 비동기 작업의 완료 등 다양한 상황에서 호출되도록 예정된 모든 함수를 말하며, 핸들러는 특히 이벤트 처리와 관련된 맥락에서 사용되는 용어입니다. 따라서 모든 이벤트 핸들러는 콜백 함수의 한 형태라고 볼 수 있지만, 모든 콜백 함수가 이벤트 핸들러는 아닙니다.

분명 아카이브가 잘되고 앱스토어 커넥트에 업로드가 성공했다고 나오는데,

실제로 앱스토어 커넥트에 빌드 란을 보면 아무 항목도 나오지 않을 때가 있다.

이 경우에는 개발자 계정에 연결된 메일을 확인해본다.

아래와 같이 사유를 안내해주면 Learn more를 눌러 관련 조치를 해준 후 다시 업로드를 하면 정상적으로 등록이 되는 걸 볼 수 있다.

내 경우엔 문제가 되는 UIWebView 관련 코드를 모두 주석처리하니 해결되었다. (RNWebview를 쓰고 있어서 해당 코드없이도 앱 실행에 문제 없었음)

ITMS-90809: Deprecated API Usage - App updates that use UIWebView will no longer be accepted as of December 2020. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).

앱 소스가 아닌 프론트엔드 소스 코드를 아래와 같이 수정 ( #t=0.001 추가)

<video controls  preload="metadata" src="~/assets/img/video.mp4#t=0.001">

1. Images에 로고 이미지 추가 

2. LaunchScreen > View항목 선택 후 우상단의 + 눌러 Image View 추가

3. 레이아웃 제약 조건 설정

• 반드시 Layout의 Inferred (간접) 오토리사이징 마스크를 선택한다

• 제약 조건을 추가 하여 상하좌우 등의 항목을 설정 (간격핀 안 쪽 영역을 클릭하여 빨강으로 보이게 설정한 후 Add. x Constraints를 누른다)

Showing All Messages

Command PhaseScriptExecution failed with a nonzero exit code

PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/(...)/Build/Intermediates.noindex/Pods.build/Release-iphoneos/FBReactNativeSpec.build/Script-46EB2E0001B930.sh (in target 'FBReactNativeSpec' from project 'Pods')

와 같은 오류가 뜰 때

clean build나 pod 재설치로도 해결이 안된다면 

node 문제일 수 있다.

- 임시적인 해결법

sudo vi node_modules/react-native/scripts/find-node.sh

다음줄 주석처리 ( --no-use 뒤부터와 그 다음 줄)

# Source nvm with '--no-use' and then `nvm use` to respect .nvmrc
# See: https://github.com/nvm-sh/nvm/issues/2053
if [[ -s "$HOME/.nvm/nvm.sh" ]]; then
  # shellcheck source=/dev/null
  . "$HOME/.nvm/nvm.sh" #--no-use
  #nvm use 2> /dev/null || nvm use default
elif [[ -x "$(command -v brew)" && -s "$(brew --prefix nvm)/nvm.sh" ]]; then
  # shellcheck source=/dev/null
  . "$(brew --prefix nvm)/nvm.sh" #--no-use
  #nvm use 2> /dev/null || nvm use default
fi

참고

https://stackoverflow.com/questions/66742033/phasescriptexecution-cp-user-error-in-react-native

하지만 위 임시적인 해결법으로는 패키지 변경 후 재설치마다 find-node.sh파일이 바뀌기 때문에

nvm과 node 제거 후 클린설치를 하는 것이 좋다.

이후 빌드 시의 노드 버전과 which node로 node 경로를 확인하고 환경변수가 잘 설정되어있는지 확인 후에 재빌드하면 될 것이다.

업데이트 심사는 어려운 부분은 없었는데 새 버전 추가를 어디서하는지 헤맸는데 그냥 저 + 버튼을 누르면 되는 거였다...

앱스토어 커넥트 - 나의 앱에서 + 눌러서 새버전 생성

xcode 프로젝트의 빌드버전에 맞춰 생성 후 

이 버전에서 업그레이드된 사항을 적고 새 빌드를 제출하면 된다.

빌드버전은 해당 프로젝트의 TARGETS - General - Identity에서 확인할 수 있다. (업데이트 시 반드시 Version외에도 Build 숫자를 올려야한다. 일반적으로 1씩 증가)

빌드 제출은 아카이브 후에 Window - Organizer에서 해당 아카이브 선택 해 Distribute App을 선택 해 전행하면 된다.

This operation can fail if the version of the OS on the device is incompatible with the installed version of Xcode. You may also need to restart your mac and device in order to correctly detect compatibility.

xcode에서 빌드는 성공했는데 이런 오류가 뜨면서 앱 실행이 안된다면 확인해볼게 3가지

1. xcode 버전 확인

2. iOS 버전 확인

3. 버전의 문제가 아니라면 폰 재시작

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md

위 사이트 참고

// MainApplication.java 에 디버깅 허용 소스 추가

import android.webkit.WebView;

  @Override
  public void onCreate() {
    super.onCreate();
	  ...
    WebView.setWebContentsDebuggingEnabled(true);
  }

크롬에서 아래 주소로 열기

chrome://inspect/#devices

앱을 실행 중인 기기명 확인 후 inspect 클릭

https://stackoverflow.com/questions/71836843/upgraded-react-native-version

android > settings.gradle 내용 변경

rootProject.name = 'my_app'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')

if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
    include(":ReactAndroid")
    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
}

package.json

{
  "name": "my_app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android-d": "react-native run-android --variant=debug",
    "android": "react-native run-android --variant=release",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "build-android": "cd ./android && ./gradlew app:bundleRelease --stacktrace",
    "build": "cd ./android && ./gradlew assembleRelease",
    "build-debug": "cd ./android && ./gradlew assembleDebug",
    "bundle": "cd ./android && ./gradlew app:bundleRelease",
    "clean": "cd ./android && ./gradlew clean",
    "devtools": "react-devtool"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.14",
    "@react-native-firebase/app": "^14.11.0",
    "@react-native-firebase/dynamic-links": "^14.11.0",
    "@react-native-firebase/messaging": "^14.11.0",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-webview": "^11.22.2",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-send-intent": "^1.3.0",
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

이 방법으로 꼭 해결된다기보다 해볼 수 있는 것들

1. Podfile이 잘못되었는지 확인

: 잘못된 프로젝트 타겟 네임 수정하거나 주석처리

#target 'react_app-tvOS' do
  # Pods for react_app-tvOS

#  target 'react_app-tvOSTests' do
#    inherit! :search_paths
 
  ### Pods for testing
  
  #end

2. 리액트 네이티브 CLI 전역 제거

npm uninstall -g react-native-cli

3. 특정 환경변수 제거

 unset NODE_EXTRA_CA_CERTS

4. cocopods 파일 제거

rm -rf ~/.cocoapods/repos/trunk/\n

5. m1 mac에서 pod install하면 ffi 에러날 시

(...) tried: '/opt/homebrew/lib/ruby/gems/3.1.0/gems/ffi-1.15.5/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have 'x86_64', need 'arm64e')) - /opt/homebrew/lib/ruby/gems/3.1.0/gems/ffi-1.15.5/lib/ffi_c.bundle (LoadError)

( ... )

- 기존 패키지 제거하고 재설치

brew uninstall --ignore-dependencies ruby
sudo gem uninstall cocoapods
sudo gem uninstall cocoapods-core
sudo gem uninstall cocoapods-downloader

6. 저장소 업데이트하고 다시 install

pod repo update

pod install

7. Podfile

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'
install! 'cocoapods', :deterministic_uuids => false

target 'reactApp' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'reactAppTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

8. requireNativeComponent: "RNCWebView" was not found in the UIManager 에러 날 시

-> 리액티 네이티브, 웹뷰 패키지 설치 확인 후 npm i

 "react": "18.0.0",
    "react-native": "0.69.0",
    "react-native-webview": "11.22.3"

-> pod install 명령어를 vs code 터미널이 아닌 iTerm을 사용해 입력

9. target error 시

[!] CocoaPods could not find compatible versions for pod "React-RCTSettings":
  In Podfile:
    React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)

Specs satisfying the `React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)` dependency were found, but they required a higher minimum deployment target.

위와 같은 오류가 나면 Podfile의 타겟을 올린다.

platform :ios, '12.4'

이런저런 과정들을 수행했는데도 제대로 pod install 이나 빌드, 앱 실행이 잘 안된다면 package, package-lock.json 의존성을 잘 살펴보자. 필요한 의존성 패키지가 설치되지 않아서일 가능성이 있다.

(...)
 "node_modules/@react-navigation/stack": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.2.1.tgz",
      "integrity": "sha512-JI7boxtPAMCBXi4VJHVEq61jLVHFW5f3npvbndS+XfOsv7Gf0f91HOVJ28DS5c2Fn4+CO4AByjUozzlN296X+A==",
      "dependencies": {
        "@react-navigation/elements": "^1.3.3",
        "color": "^3.1.3",
        "warn-once": "^0.1.0"
      },
      "peerDependencies": {
        "@react-navigation/native": "^6.0.0",
        "react": "*",
        "react-native": "*",
        "react-native-gesture-handler": ">= 1.0.0",
        "react-native-safe-area-context": ">= 3.0.0",
        "react-native-screens": ">= 3.0.0"
      }
(...)