Roopretelcham

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"
      }
(...)

리액트 네이티브 개발을 하려는데 빌드하려고보니 최신 안드로이드 그래들은 jdk11을 요구한다.

그래서 openJDK를 설치하여 환경 변수를 설정하고 새로 빌드하니 해결되었다.

1. brew사용한 설치 

brew install adoptopenjdk11 --cask

2. 자바홈 확인

/usr/libexec/java_home -V

Matching Java Virtual Machines (2):
    11.0.11 (x86_64) "AdoptOpenJDK" - "AdoptOpenJDK 11" /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home
    1.8.0_312 (arm64) "Azul Systems, Inc." - "Zulu 8.58.0.13" /Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home
/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home

3. 환경변수 편집 ( zshrc를 수정해도 된다 )

vi ~/.bash_profile

editor 열리면 G 입력으로 맨끝줄 이동하여 아래 코드 추가

export JAVA_HOME="/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home"

저장 후 (:wq)  환경변수 적용

source ~/.bash_profile

4. 변경된 자바 버전 확인

java -version

5. 안드로이드 그래들 JDK 버전 변경 ( mac 기준 cmd + , )

자식창은 닫고 부모창의 경로를 이동하는 방법이다. (vue에서도 적용가능)

opener.location.replace("https://123.co.kr/test/");
window.close();

| SSH 접속

ssh root@asdf@cafe24.com

경로이동 : cd /var/www

| GIT 연동

git 설치

yum install git

ssh 접속 키 생성

ssh-keygen -t rsa -b 4096 -C "test@gmail.com'

공개 키 경로 확인하고 열어서 안의 내용을 복사 -> github에 ssh키 입력 ( https://github.com/settings/keys )

권한 문제 발생 시 chmod 400 [공개키파일이름]

깃 ssh host 등록

vi ~/.ssh/config

Host github.com
  IdentityFile  /root/.ssh/id_rsa
  User git

git clone [ssh저장소 주소]

| 노드 및 NPM 설치

저장소 확인

yum repolist

epel 저장소가 없으면 설치

yum install epel-release

특정 노드버전 설치 스크립트 실행

yum install -y gcc-c++ make

 curl -fsSL https://rpm.nodesource.com/setup_16.x | bash -

node.js 설치

yum -y install nodejs

npm install 시 오류나는 경우 아래항목들 설치

python3 설치

yum -y install python3

curl 최신 설치

vi /etc/yum.repos.d/city-fan.repo

[CityFan]
name=City Fan Repo
baseurl=http://www.city-fan.org/ftp/contrib/yum-repo/rhel$releasever/$basearch/
enabled=1
gpgcheck=0

yum install curl 

node에서 jar연동하고 있다면..

자바 설치

readlink /etc/alternatives/javac

jdk경로 확인

vi /etc/profile

JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.332.b09-1.el7_9.x86_64
JAVA_PATH=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.332.b09-1.el7_9.x86_64/bin
export JAVA_HOME JAVA_PATH

혹시나 환경변수 편집하다가 ls같은 기본명령어도 안 먹는다면 아래 항목으로 인식시키고 프로필파일 수정 후에 다시 source하면 된다

export PATH=%PATH:/bin:/usr/local/bin:/usr/bin

gcc버전이 낮아도 npm install이 안될 수 있으므로 아래 항목들 설치

sudo yum install centos-release-scl

sudo yum install devtoolset-7

scl enable devtoolset-7 bash

| 프로젝트 관리 (PM2)

pm2 설치하여 pm2 start

| SSL 인증서 발급

무료 인증서인 certbot 사용

스탠드얼론 방식으로 nginx 사용

nginx 설정파일 수정

vi /etc/nginx/conf.d/default.conf 

server {
        client_max_body_size 50M;

        listen 80;
        server_name domain.co.kr domain.kr;
        return 301 https://$host$request_uri;
}

server {
        client_max_body_size 50M;

        listen 443 ssl;
        server_name domain.co.kr domain.kr;

        #root  /var/www/project/dist;
        #index index.html;

        #ssl on;
        ssl_certificate /etc/letsencrypt/live/www.domain.co.kr/fullchain.pem;
        ssl_certificate_key     /etc/letsencrypt/live/www.domain.co.kr/privkey.pem;
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

        set $service_url http://127.0.0.1:3000;

        location / {
                proxy_pass http://localhost:3000;
        }
}

| mysql 설치

5.7 설치 실패 시 아래 항목 수정 (gpgcheck=0)

vi /etc/yum.repos.d/mysql-community.repo

[mysql57-community]

name=MySQL 5.7 Community Server

baseurl=http://repo.mysql.com/yum/mysql-5.7-community/el/7/$basearch/

enabled=1

gpgcheck=0

gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

1. node에서 jar파일을 불러올 수 있는 java패키지 설치

https://www.npmjs.com/package/java

npm i java

2. 프로젝트에 jar파일 추가

3. 코드 연동

연동 시에 결과를 리턴받으려면 정의한 함수 뒤에 Sync를 붙여주면된다.

예) getMethod   -> getMethodSync

var java = require("java")
java.classpath.push("./test_JDK18.jar")

var something = java.import('com.test.comm.some.Manager'); 
var instance = new something(); // 인스턴스 생성

console.log('instance', instance);
console.log('===================test', instance.getMethodSync("test", ""))

$object = new User; // new 키워드로 User 객체를 생성한다.

class User{ // User 클래스 선언

public $id = "test", $email, $name, $birthday; //public으로 변수 선언

function printUser(){ // User 클래스에 printUser 메소드 선언
print_r($this); // User 클래스 Print
}
}

// 객체 내 속성 접근 시에는 -> 사용하며 속성명 앞엔 $ 붙이지 않는다.
if ($object -> id === 'test' ) {
echo $object -> id;
//console.log(json_encode($object));
} else {
echo 'tt';
}

객체 배열 접근

if ($obj['id'] === 'testid') {
	( ...)
}

JSON 객체 변환

<!DOCTYPE html>
<html>
<body>

<?php

$postData = '{"eventType":"PAYMENT_STATUS_CHANGED","data":{"paymentKey":"kWzn16mywdYPBal2vxj81gvOa0ORAV5RQgOAND7pJe9KE0qL","status":"DONE","orderId":"CDD-7A7VCXTN"}}';
$json = (array)json_decode($postData);
echo $json['data']->orderId;

//echo substr("Hello world",6);
?>

</body>
</html>

php에서 콘솔 로그 찍기

function debug_to_console($data) {
    $output = $data;
    if (is_array($output))
        $output = implode(',', $output);

    echo "<script>console.log('Debug Objects: " . json_encode($output) . "' );</script>";
}

usage : 

debug_to_console($object->id);

             if #available(iOS 13.0, *) {
                            /**
                             In iOS 13 and above WKWebViews in iPad has the ability to render desktop versions of web pages.
                             One of the properties they change to support this is the User-Agent.
                             Therefore forcing the WKWebView to load the mobile version.
                             */
                            let pref = WKWebpagePreferences.init()
                            pref.preferredContentMode = .mobile
                            config.defaultWebpagePreferences = pref
                        }

위와 같이 iOS13에서는 WKWebpagePreferences의 속성에 preferredContentMode를 설정할 수 있다. 

https://developer.apple.com/documentation/webkit/wkwebpagepreferences/3194426-preferredcontentmode?language=objc 

preferredContentMode는 enum상수로 3가지 옵션이 정의되어있다 (2022.4.6 기준)

extension WKWebpagePreferences {

    
    /** @enum WKContentMode
     @abstract A content mode represents the type of content to load, as well as
     additional layout and rendering adaptations that are applied as a result of
     loading the content
     @constant WKContentModeRecommended  The recommended content mode for the current platform
     @constant WKContentModeMobile       Represents content targeting mobile browsers
     @constant WKContentModeDesktop      Represents content targeting desktop browsers
     @discussion WKContentModeRecommended behaves like WKContentModeMobile on iPhone and iPad mini
     and WKContentModeDesktop on other iPad models as well as Mac.
     */
    @available(iOS 13.0, *)
    public enum ContentMode : Int, @unchecked Sendable {

        
        case recommended = 0

        case mobile = 1

        case desktop = 2
    }
}

웹뷰 초기화시 정의한 config를 넘기면 된다.

WKWebView(frame: rect, configuration: config)

참고

https://developer.apple.com/forums/thread/674232

1. 설치

https://dashboard.ngrok.com/get-started/setup

2. 인증토큰 확인

https://dashboard.ngrok.com/get-started/your-authtoken

3. ngrok 에이전트 인증 (첫 한번만 필요, Authtoken은 기본 구성 파일에 저장됨)

ngrok 다운로드 폴더로 이동 후

$ ./ngrok authtoken [토큰번호]

4. ngrok 실행

$ ./ngrok http [PORT번호]

잠시 후 ngrok이 실행되면,

아래와 비슷한 https로 시작하는 포워딩 주소를 열어 확인하면 됩니다.

https://6eda-231-229-250-184.ngrok.io

내 경우엔 typescript를 기본으로 사용하는 nest project가 실행이 안되어서 에러로그를 보니

TS2688 에러가 났다.

➜  ch1-intro git:(main) ✗ npm run start

> book-nestjs-backend@1.0.0 start
> nest start

error TS2688: Cannot find type definition file for 'uglify-js'.
  The file is in the program because:
    Entry point for implicit type library 'uglify-js'
error TS2688: Cannot find type definition file for 'webpack-sources'.
  The file is in the program because:
    Entry point for implicit type library 'webpack-sources'

Found 2 error(s).

그래서 아래와 같이 정의를 찾지 못하는 패키지를 설치

$ npm install --save @types/webpack-sources

$ npm install --save @types/uglify-js

그 후 npm run start를 하니 실행이 되긴했는데 찝찝한 기분이다...

다른 해결책이나 비슷한 오류를 보신 분이 있으면 댓글 달아주시면 감사하겠습니다.