MessagingClientErrorCode.INVALID_ARGUMENT = {
    code: 'invalid-argument',
    message: '제공된 인수가 잘못되었습니다.',
};
MessagingClientErrorCode.INVALID_RECIPIENT = {
    code: 'invalid-recipient',
    message: '잘못된 메시지 수신자가 제공되었습니다.',
};
MessagingClientErrorCode.INVALID_PAYLOAD = {
    code: 'invalid-payload',
    message: '잘못된 메시지 페이로드가 제공되었습니다.',
};
MessagingClientErrorCode.INVALID_DATA_PAYLOAD_KEY = {
    code: 'invalid-data-payload-key',
    message: '데이터 메시지 페이로드가 잘못된 키를 포함하고 있습니다. 제한된 키에 대해 DataMessagePayload 유형의 참조 문서를 참조하십시오.',
};
MessagingClientErrorCode.PAYLOAD_SIZE_LIMIT_EXCEEDED = {
    code: 'payload-size-limit-exceeded',
    message: '제공된 메시지 페이로드가 FCM 크기 제한을 초과합니다. 자세한 내용은 오류 문서를 참조하십시오.',
};
MessagingClientErrorCode.INVALID_OPTIONS = {
    code: 'invalid-options',
    message: '잘못된 메시지 옵션이 제공되었습니다.',
};
MessagingClientErrorCode.INVALID_REGISTRATION_TOKEN = {
    code: 'invalid-registration-token',
    message: '잘못된 등록 토큰이 제공되었습니다. 클라이언트 앱이 FCM으로 등록할 때 수신하는 등록 토큰과 일치하는지 확인하십시오.',
};
MessagingClientErrorCode.REGISTRATION_TOKEN_NOT_REGISTERED = {
    code: 'registration-token-not-registered',
    message: '제공된 등록 토큰이 등록되지 않았습니다. 이전에 유효한 등록 토큰은 다양한 이유로 등록 취소될 수 있습니다. 자세한 내용은 오류 문서를 참조하십시오. 이 등록 토큰을 제거하고 메시지 전송을 중지하십시오.',
};
MessagingClientErrorCode.MISMATCHED_CREDENTIAL = {
    code: 'mismatched-credential',
    message: '이 SDK를 인증하는 데 사용된 자격 증명은 제공된 등록 토큰에 해당하는 기기로 메시지를 보낼 권한이 없습니다. 자격 증명과 등록 토큰이 모두 Firebase 프로젝트에 속하는지 확인하십시오.',
};
MessagingClientErrorCode.INVALID_PACKAGE_NAME = {
    code: 'invalid-package-name',
    message: '메시지가 제공된 "restrictedPackageName" 옵션과 일치하지 않는 패키지 이름을 가진 등록 토큰으로 주소지정되었습니다.',
};
MessagingClientErrorCode.DEVICE_MESSAGE_RATE_EXCEEDED = {
    code: 'device-message-rate-exceeded',
    message: '특정 기기로의 메시지 전송 비율이 너무 높습니다. 이 기기로 보내는 메시지 수를 줄이고 즉시 다시 시도하지 마십시오.',
};
MessagingClientErrorCode.TOPICS_MESSAGE_RATE_EXCEEDED = {
    code: 'topics-message-rate-exceeded',
    message: '특정 주제를 구독하는 구독자에 대한 메시지 전송 비율이 너무 높습니다. 이 주제에 대한 보내는 메시지 수를 줄이고 즉시 다시 시도하지 마십시오.',
};
MessagingClientErrorCode.MESSAGE_RATE_EXCEEDED = {
    code: 'message-rate-exceeded',
    message: '메시지 대상에 대한 전송 제한이 초과되었습니다.',
};
MessagingClientErrorCode.THIRD_PARTY_AUTH_ERROR = {
    code: 'third-party-auth-error',
    message: 'iOS 기기를 대상으로 하는 메시지가 APNs SSL 인증서가 업로드되지 않았거나 만료되어 전송되지 않았습니다. 개발 및 프로덕션 인증서의 유효성을 확인하십시오.',
};
MessagingClientErrorCode.TOO_MANY_TOPICS = {
    code: 'too-many-topics',
    message: '제공된 등록 토큰이 구독할 수 있는 최대 주제 수를 초과했습니다.',
};
MessagingClientErrorCode.AUTHENTICATION_ERROR = {
    code: 'authentication-error',
    message: 'FCM 서버에 인증하는 중에 오류가 발생했습니다. 이 SDK를 인증하는 데 사용된 자격 증명이 적절한 권한을 갖고 있는지 확인하십시오. 설정 지침은 https://firebase.google.com/docs/admin/setup을 참조하십시오.',
};
MessagingClientErrorCode.SERVER_UNAVAILABLE = {
    code: 'server-unavailable',
    message: 'FCM 서버가 요청을 처리하지 못했습니다. 자세한 내용은 오류 문서를 참조하십시오.',
};
MessagingClientErrorCode.INTERNAL_ERROR = {
    code: 'internal-error',
    message: '내부 오류가 발생했습니다. 요청을 다시 시도하십시오.',
};
MessagingClientErrorCode.UNKNOWN_ERROR = {
    code: 'unknown-error',
    message: '알 수 없는 서버 오류가 반환되었습니다.',
};
InstallationsClientErrorCode.INVALID_ARGUMENT = {
    code: 'invalid-argument',
    message: '제공된 인수가 잘못되었습니다.',
};
InstallationsClientErrorCode.INVALID_PROJECT_ID = {
    code: 'invalid-project-id',
    message: '잘못된 프로젝트 ID가 제공되었습니다.',
};
InstallationsClientErrorCode.INVALID_INSTALLATION_ID = {
    code: 'invalid-installation-id',
    message: '잘못된 설치 ID가 제공되었습니다.',
};
InstallationsClientErrorCode.API_ERROR = {
    code: 'api-error',
    message: '설치 ID API 호출이 실패했습니다.',
};

'React Native' 카테고리의 다른 글

rn 에서 android 뷰 사용하기.  (0) 2022.03.02
굳이 jsx를 사용하고싶다.  (0) 2022.01.05
UI Test를 위해 Detox를 적용해본다. -iOS  (0) 2021.12.15
npm install을 주의하라  (0) 2021.10.22
npm version downgrade  (0) 2021.07.12

 

기본 베이스는

 

https://reactnative.dev/docs/native-components-android#imageview-example

로 만들어서 

이미지 다운로드 부분은 

https://www.coderzheaven.com/2018/08/10/how-to-create-a-custom-native-imageview-in-android-for-reactnative/

 

를 이용하여 만들어봤다.

 

돌아는가게됏다...

 

안드로이드를 전혀 모르니 항상 뭔가 하려면 막혀서 힘들다


 

https://github.com/wiwi-git/ReactNativeUseAndroidUi

 

GitHub - wiwi-git/ReactNativeUseAndroidUi: rn에서 안드로이드에서 만든 ui가져오는 튜토리얼

rn에서 안드로이드에서 만든 ui가져오는 튜토리얼. Contribute to wiwi-git/ReactNativeUseAndroidUi development by creating an account on GitHub.

github.com

 

이후 웹뷰를 연결할거라 오픈이라 적힌 버튼이 있으나 중요한건 아니니 무시.

 

 

'React Native' 카테고리의 다른 글

rn fcm messaging error code 번역  (0) 2023.04.26
굳이 jsx를 사용하고싶다.  (0) 2022.01.05
UI Test를 위해 Detox를 적용해본다. -iOS  (0) 2021.12.15
npm install을 주의하라  (0) 2021.10.22
npm version downgrade  (0) 2021.07.12

vscode 에서 rn을 작성하고있다보면 보이는 이 js 파일 로고...

이걸 굳이 jsx로 확장자를 변경해보면 

이런 멋진! 리액트 로고가 된다.

굳이 해줄 필요는 없어 보이나

난 이 로고로 작성해나가고 싶어서 jsx 파일 지원에 대한 글을 작성해본다.

 

우선 rn프로젝트 루트에서 지원되는 확장자를 따로 작성해줘야한다.

 

metro.config.js 파일에 해당 내역을 작성해주면된다.

 

참고로 sourceExts영역은 md파일이라던가 뭔가 다른 확장자를 가진 애를 가져올때 적어주면된다.

 

module.exports = {
  transformer: {
  	...
  },
  resolver: {
    sourceExts: ['jsx', 'js'], //add here
  },
};

 

사실 이 metro설정에도 우선 적용되는 단계가 있다고한다만 그냥 여기다가 적자...

만약 해당 파일이 없으면

package.json 파일에 metro영역을 만들어 적용해주자

 

자세한 방법은 공식 도큐먼트를 봅시다...

https://facebook.github.io/metro/docs/configuration/#resolver-options

 

Configuring Metro | Metro

A Metro config can be created in these three ways (ordered by priority):

facebook.github.io

 

 

A Metro config can be created in these three ways (ordered by priority):

  1. metro.config.js
  2. metro.config.json
  3. The metro field in package.json

You can also give a custom file to the configuration by specifying --config <path/to/config> when calling the CLI.

 

 

 

'React Native' 카테고리의 다른 글

rn fcm messaging error code 번역  (0) 2023.04.26
rn 에서 android 뷰 사용하기.  (0) 2022.03.02
UI Test를 위해 Detox를 적용해본다. -iOS  (0) 2021.12.15
npm install을 주의하라  (0) 2021.10.22
npm version downgrade  (0) 2021.07.12

UI Test의 자동화를 추가 해보려고했다.

 

Appium을 먼저 시도를 했으나 이상하게도 시뮬레이터에서 어마어마게 지연현상이 일어나고 이러면 그냥 손으로하는게 더빠르겠다 싶어서 포기한적이 있었다. 

무엇이 문제였는지는 아직도 모르겠다.

 

그리고 이제 다시 Detox로 해보려고 한다.

 

사실 디톡스의 홈페이지에 방법이 적혀있다

디톡스를 적용해볼 사람은 굳이 이글을 읽지말고

https://wix.github.io/Detox/docs/introduction/getting-started/ 

 

Getting Started | Detox

Getting Started

wix.github.io

를 보는게 좋다고 본다.

 

일단 필요한 도구들을 설치해준다.

npm install -g detox-cli

npm install detox --save-dev

디톡스들을 설치해주고

설정은 나중에 할거다.

 

그전에 문서에 이러한 항목이 있다.

Tip: Remember to add the node_modules folder to your git ignore file (e.g. .gitignore).

gitignore에 무시항목을 꼭 넣어주라는 말인데 

이걸 안해주면 모든 파일이 깃에 추가되어 특히 라이브러리들이 많은 리엑트 네이티브에서는 깃관리의 헬이 벌어진다.

프로젝트의 루트폴더에 .gitignore 라는 숨긴파일이 있을것이고 

해당 내용을 수정해주면된다.

폴더 자체를 관리 안할수도있고

파일 확장자별로도 관리 안할 수도 있고

여러가지가 있다.

 

 

디톡스를 설정하기전  나는 프로젝트가 제대로 시뮬레이터상에서 동작하는지 확인을 해야한다고 생각한다.

그래서 첫단계는

1. npm i 

로 라이브러리 먼저 설치한다.

여러가지 버전 문제로 실제로나는

 

npm i --force

 

의 명령어를 프로젝트 루트 폴더에서 실행시켰다.

 

그 다음은 ios 의 라이브러리를 설치한다.

cd ios && pod install --repo-update

 

왜 레포지토리의 업데이트도 같이 하는지는 내 프로젝트에서 사용중인 firebase 관련 라이브러리들이 이상하게 버전이 계속 어긋난다.

이럴때 --repo-update 옵션을 붙이니 잘맞게 설치가 되었다.

 

이제 iOS시뮬레이터로 돌아가는지 테스트를 해본다.

 

npx react-native run-ios --simulator="iPhone 12 mini"

 

시뮬레이터 옵션을 붙이는 이유는 맥북의 용량이 적기에 필요한 시뮬레이터만 남기고 죄다 삭제해버렸다.

그래서 기본으로 잡히는 시뮬레이터가 존재하지않는다는 에러를 뱉기에 따로 지정해줬다.

 

안드로이드는.... 결론만 말하자면 실패했다 이에 대해서는 후반부에 다시 적을 것이다.

iOS가 정상적으로 돌아가기에 이제 설정해줬다

 

detox init

를 실행한다.

 

디톡스에대한 설정을 package.json에 설정해줘도 된다고 적혀있지만

난 .detoxrc.json에 설정해줬다.

아래는 공식문서에 적힌 형식이다.

{
  "devices": {
    "simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 12 Pro Max"
      }
    }
  },
  "apps": {
    "ios.release": {
      "name": "YourProject",
      "type": "ios.app",
      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/YourProject.app",
      "build": "xcodebuild -project ios/YourProject.xcodeproj -scheme YourProject -sdk iphonesimulator -derivedDataPath ios/build"
    }
  },
  "configurations": {
    "ios.sim.release": {
      "device": "simulator",
      "app": "ios.release"
    }
  }
}

뭔가 많다.

release라고 뒤에 붙은 애들과 따로 debug용으로 나눌수 있어서 이렇게 한것으로 보이나

난 디버그용이면 충분하다고 생각한다.

 

그래서 나는 아래와 같이 설정했다.

{
    "testRunner": "jest",
    "runnerConfig": "e2e/config.json",
    "skipLegacyWorkersInjection": true,
    "apps": {
      "ios": {
        "name":"<AppName>",
        "type": "ios.app",
        "build": "xcodebuild -workspace ios/<ProjectName>.xcworkspace -scheme <ProjectName> -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/<ProjectName>.app"
      }
    },
    "devices": {
      "simulator": {
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 12 mini"
        }
      },
      "emulator": {
        "type": "android.emulator",
        "device": {
          "avdName": "Pixel_API_28_AOSP"
        }
      }
    },
    "configurations": {
      "ios": {
        "device": "simulator",
        "app": "ios"
      },
      "android": {
        "device": "emulator",
        "app": "android"
      }
    }
  }

 

ios는 여타 다른 설정이 굳이 필요하지 않다

바로 e2e폴더에 테스트 코드를 넣고 돌리면 된다.

 

예제용 코드

describe("First UI test1", () => {

  it("should show Step One", async () => {
    await device.launchApp();
    await expect(element(by.text("Step One"))).toBeVisible();
  });

  it("should show Debug", async () => {
    await expect(element(by.text("Debug"))).toBeVisible();
  });

  it("should show \"Learn More", async () => {
    await expect(element(by.text("Learn More"))).toBeVisible();
  });
});

주의점은

if가 아니라 it이라는것과

여러 it이 있지만 하나라도 뭔가 이상하면 테스트가 없다고 에러가 날수 있다는점과

해당 코드들 기본으로 쓰이는 expect나 it , element 등등에 대한 import가 위에 적용될시 에러가 날 수 있다는점이다.

이런한 점때문에 시간을 참 많이 날렸다.

 

 

테스트를 돌릴려면 빌드가 필요하다.

detox build --configuration <your configuration name>

를 프로젝트 루트에서 실행해서 에러를 잡으면된다

 

나는

detox build --c ios

로 돌렸다.


configuration 을 c로도 동작한다는게 공식페이지에선 보이지 않는다.

 

테스트 코드를 실행하려면

detox test --configuration <your configuration name>

로 실행을 하면 기존 설치된앱이 삭제되고 새로 깔리며 실행된다.

 

나는

detox test -c ios 

로 돌렸다.

 

 

추가적인 팁을 적자면

 

각 파트별을 컴포넌트화 하여 임포트 시켜 사용할 수 있다.

난 긴 명령어를 간단하게 작성하려고 컴포넌트화를 시켜서 사용했다

다른 라이브러리를 임포트하여 ( axios )네트워크 통신도 넣어볼수있다.

- 어디선가 본 글에는 이러한 네트워크 통신을 테스트코드에 넣지말고 임의로 값을 반환해서 마치 값을 잘 받아온것처럼 하라고 하여서 서버 부담을 없애야한다고 했다. 만 나는 그냥 돌렸다.

 

 

 

iOS - 끝!

 

다음글은 결국 실패하고 기약을 알 수 없이 미뤄버린 안드로이드에대한 글이다.

 

'React Native' 카테고리의 다른 글

rn 에서 android 뷰 사용하기.  (0) 2022.03.02
굳이 jsx를 사용하고싶다.  (0) 2022.01.05
npm install을 주의하라  (0) 2021.10.22
npm version downgrade  (0) 2021.07.12
SafeAreaView의 상단을 참조안하는 방법에 대해  (0) 2021.07.07

https://devhyun.com/blog/post/8

 

당신이 npm install을 사용하지 말아야할 때 - 데브현

아래는 Qiita에 개재된 「あなたがnpm installをしてはいけない時」를 번역한 내용입니다. 다소 의역이 있어 어색한 부분이 있어도 양해 부탁드립니다. 🙉 개요 여러분은 평소에, 무의식적으로 npm

devhyun.com

새로운 회사로 입사한후로 어언 반년이 지나 일주년을 바라보고 있습니다.

이 회사에서는 앱개발을 RN으로 하기에 처음 접해보는 자바스크립트 개발환경에 당황을 하면서 어찌어찌 개발을 이어나가고 있습니다.

그러던중 블로그에서 시키는대로, 책에서 시키는대로 프로젝트 시작시에는 npm i 를 입력하고 들어가고있었는데

요즘 노드 버전 업데이트로 고군분투 하던중 lock파일의 필요성과 lock파일을 사용방법에 대해 글을 우연히 접하게 되어 이렇게 링크를 남깁니다.

 

요약 -

npm install 로 설치되는 패키지.json 파일의 ^1.x.x 는 현재 1.01 버전일지라도 나중에 뒤에 마이너버전 업데이트가 될시에 최신버전으로 설치해라는 뜻

그러니 이전 개발 환경과 동일하게 설치하고 싶다면 lock파일에 기술되어 있는데로 설치하는 npm ci로 설치를 하도록.

npm install -g npm@[해당버전]

 

ex) 6버전으로 변경

npm install -g npm@6

기존 소스를 파악 하던도중 이러한 부분을 만났다.

검색해보니 '아마 safearea에서 상단을 참조안하고 해당 뷰를 화면 상단에 꽉 채우는 내용일터이다. ' 라 판단했었다.

<SafeAreaView forceInset={{top: 'never',}}>
</SafeAreaView>

 

열심히 따라해 보았으나 전혀 변함이없다

 

 

해당 라이브러리를 제공해주는 홈페이지에 찾아가서 보니

해당 내용이없다....

 

5.x 버전 기준으론 해당 내용을 하려면

 

import { useSafeAreaInsets } from 'react-native-safe-area-context';

function Demo() {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingBottom: insets.bottom,

        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </View>
  );
}

와 같이 하라고한다....

 

저 소스에서 paddingTop을 추가안해주면 될듯하다.

 

몇 시간을 왜 안되지 라며 다른 부분에 의한 문제인가 코드를 다시 보았으나 

참담한 결과이다.

 

이글을 보는 사람은 그런일을 겪지 않았으면 한다.

 

참고로 해당 예제를 바로 따라해보면 오류가 난다

최상단을 

<SafeAreaProvider>로 감싸야해! 라는 에러이다

해당 에러 내용 그대로 최상단을 감싸주면 된다.

무슨 용도인지는 모르겠지만 시키니 따라했다.

최신 시뮬레이터를(또는 기기)에서 테스트를 해보기위해 최신버전 xcode가 필요했다만

구형 라이브러리를 사용중인 리액트 네이티브 프로젝트때문에 최신버전 xcode를 사용하지 못하고 있었다.

 

최신버전( 12.5.1 )에서 해당 프로젝트를 사용하지 못할까 하여 찾아보고 아래와같은 시도로 성공을 했다.

 

1 ~ 4번은 flipper의 구형버전때문에 발생하는 문제로 사용안하기에 주석처리

  1. Podfile의 use_flipper 부분과 post_install do 항목 주석처리  
  2. pod install
  3. run 해봤지만 안돌아가서 왓치맨-빌드 파일등 들을 초기화 및 삭제해줌
  4. build fail 

아래와 같은 에러 발생

Undefined symbols for architecture x86_64:

  "Swift._ArrayBuffer._copyContents(initializing: Swift.UnsafeMutableBufferPointer<A>) -> (Swift.IndexingIterator<Swift._ArrayBuffer<A>>, Swift.Int)", referenced from:

 

이전 swift5 컴파일러가 돌아갔을때의 문제와 비슷해보인다.

 

 

  1. .xcodeproj파일의 PROJECT  build Settings Library Search Paths swift-5.0항을 삭제해본다.
  2. run ….
  3. xcode상에서는 빌드가 성공했다.

Library Search Paths의 내부에 swift-5.0 라인 부분이 있다.

 

+ Recent posts