Westwood Forever

 리액트 네이티브로 TextInput 테스트 중에 iOS 시뮬레이터에서 키보드가 나타나지 않아서 확인해봤습니다. 굳이 리액트 네이티브에서만 발생하는 증상은 아닌 듯 하네요. 시뮬레이터에서 단축키로 command + k 로 바로 토글을 할 수 있습니다. 단축키로 계속적인 토글이 귀찮다면 시뮬레이터 I/O 메뉴 - Keyboard - Connect Hardware Keyboard 체크 해제해주면 키보드 팝업이 잘 되네요.

 맥에서 리액트 네이티브 iOS 시뮬레이터 실행 중 에러가 발생했네요. ERROR Invariant Violation: "myproject2" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called Metro에서 발생한 에러인데, 에러메세지 바로 밑에 설명처럼 잘못된 폴더에서 Metro가 실행되고 있어서 발생한 에러네요. myproject에서 실행하다 만 Metro가 있길래 그냥 진행했더니 프로젝트 폴더별로 Metro가 의존적인가 봅니다. Metro를 종료하고 다시 프로젝트 실행하면 되네요.

 맥에서 리액트 네이티브 프로젝트 생성중에 CocoaPods관련 에러가 발생하네요. Welcome to React Native!                  Learn once, write anywhere ✔ Downloading template ✔ Copying template ✔ Processing template ✖ Installing CocoaPods dependencies (this may take a few minutes) ✖ Installing CocoaPods dependencies (this may take a few minutes) error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template. Please try again manually: "cd ./project/ios && pod install". CocoaPods documentation: https://cocoapods.org/ 기존 포스팅에서 brew install --cask cocoapods 로 설치 했었는데 uninstall 시킨 후 아래와 같이 설치한 cocoapods를 사용하면 이슈가 해결되네요. 제 맥이 구버전이라 그런건지 카탈리나라 그런건지.. brew install cocoapods Warning: Treating cocoapods as a formula. For the cask, use homebrew/cask/cocoapods ==> Downloading https://ghcr.io/v2/homebrew/core/cocoapods/manifests/1.11.3 Already downloaded: /Users/wwforever/Library/Caches/Homebrew/downloads/e1e42eaf7a9c48aaa7a74e8eca...

 리액트 네이티브 프로젝트는 맥에서 설정 중 cocoapods 설치 관련 에러가 발생했네요. 참고로 맥북프로 2015년형이라 MacOS 카탈리나에 Xcode는 12.4입니다. sudo gem install cocoapods Password: Building native extensions. This could take a while... ERROR:  Error installing cocoapods: ERROR: Failed to build gem native extension.     current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/ext/ffi_c /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r ./siteconf20220422-38063-jofjbd.rb extconf.rb checking for ffi.h... *** extconf.rb failed *** Could not create Makefile due to some reason, probably lack of necessary libraries and/or headers.  Check the mkmf.log file for more details.  You may need configuration options. Provided configuration options: --with-opt-dir --without-opt-dir --with-opt-include --without-opt-include=${opt-dir}/include --with-opt-lib --without-opt-lib=${opt-dir}/lib --with-make-prog...

 윈도우 환경에서 클레이튼 개발 튜토리얼 중에 CountBApp 개발하기를 따라하던 중 단순히 npm install을 실행한 상황에서 에러가 발생했습니다. D:\Study\countbapp\node_modules\keccak>if not defined npm_config_node_gyp (node "C:\Users\wwfor\AppData\Roaming\nvm\v14.19.0\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Users\wwfor\AppData\Roaming\nvm\v14.19.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild ) gyp ERR! find VS  gyp ERR! find VS msvs_version not set from command line or npm config gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer gyp ERR! find VS looking for Visual Studio 2015 gyp ERR! find VS - not found gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8 gyp ERR! find VS gyp ERR! find VS ************************************************************** gyp ERR! find VS You need to install ...

 빌드 및 실행이 잘되던 리액트 네이티브 프로젝트가 SSD 고장으로 다시 윈도우 재 설치 후 개발 환경이 뭔가 바뀌었는지 아래와 같이 에러가 발생하네요. * Where: Build file 'D:\Study\rnstudy\node_modules\react-native-os\android\build.gradle' line: 43 * What went wrong: A problem occurred evaluating project ':react-native-os'. > Could not find method compile() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler. 해당 파일에 가서 아래와 같이 compile부분을 implementation으로 변경해줍니다. dependencies { compile 'com.facebook.react:react-native:+' } 문제는 하나 고치고 빌드하면 아래와 같이 또 발생하네요. 나오는 것 모두 수정해줍니다. * Where: Build file 'D:\Study\rnstudy\node_modules\react-native-tcp\android\build.gradle' line: 43 * What went wrong: A problem occurred evaluating project ':react-native-tcp'. > Could not find method compile() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependency...

 멀고도 험한 리액트 네이티브 초보의 길이네요.  @medardm/react-native-bip39 로 니모닉 생성 테스트중 아래와 같이 에러가 발생했습니다. ERROR  TypeError: null is not an object (evaluating 'RNRandomBytes.seed') ERROR  TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[3], "react-native-randombytes").randomBytes') 다른 react-native-bip39 때문에 설치 되었던 react-native-randombytes 를 다시 설치해주면 해결 됩니다.

 리액트 네이티브 bip39 패키지를  @medardm/react-native-bip39 로 변경 후 에러 발생입니다. ERROR TypeError: undefined is not an object (evaluating '_reactNativeBip.default.generateMnemonic') import bip39 from '@medardm/react-native-bip39' ; 위와 같이 임포트 해줬었는데, 아래와 같이 중괄호로 generateMnemonic을 꺼내오던가 as로 임포트 해줍니다. import { generateMnemonic } from '@medardm/react-native-bip39' ; import * as bip39 from '@medardm/react-native-bip39' ;

 리액트 네이티브 bip39관련 패키지 에러로 다른 패키지를 설치하려고 아래의 두 패키지를 제거했더니 에러가 발생하네요. react-native-bip39 react-native-randombytes error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 D:\Study\rnstudy\android\app\src\main\java\com\rnstudy\MainApplication.java:7: error: package com.bitgo.randombytes does not exist import com.bitgo.randombytes.RandomBytesPackage; 로그에 나와있는데로 MainApplication.java에 가서 필요없어진 import를 제거해줍니다.

 리액트 네이티브 가는길이 험난하군요. 마치 예전 cocos2d-x 프로젝트 진행할 때 이슈들을 보는 느낌적인 느낌입니다. 이번에는 react-native-bip39 모듈이 말썽이네요. Error: Unable to resolve module assert from D:\Study\rnstudy\node_modules\react-native-bip39\index.js: assert could not be found within the project or in these directories: node_modules\react-native-bip39\node_modules node_modules 1 | var unorm = require('unorm') > 2 | var assert = require('assert') | ^ 3 | var pbkdf2 = require('react-native-crypto').pbkdf2Sync 4 | var createHash = require('react-native-crypto').createHash 5 | var randomBytes = require('react-native-randombytes').randomBytes at ModuleResolver.resolveDependency (D:\Study\rnstudy\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:158:15) at DependencyGraph.resolveDependency (D:\Study\rnstudy\node_modules\metro\src\node-haste\DependencyGraph.js:231:43) at Object.resolve (D:\Study\rnstudy\node_modules\metro\src...

  리액트 네이티브에서 node.js 코어 모듈과 npm 모듈을 사용할 수 있게 해주는 rn-nodeify 를 설치 중에 에러가 발생했네요. error: Error: Unable to resolve module process from D:\Study\rnstudy\shim.js: process could not be found within the project or in these directories: node_modules 1 | if (typeof __dirname === 'undefined') global.__dirname = '/' 2 | if (typeof __filename === 'undefined') global.__filename = '' > 3 | if (typeof process === 'undefined') { | ^ 4 | global.process = require('process') 5 | } else { 6 | const bProcess = require('process') at ModuleResolver.resolveDependency (D:\Study\rnstudy\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:158:15) at DependencyGraph.resolveDependency (D:\Study\rnstudy\node_modules\metro\src\node-haste\DependencyGraph.js:231:43) at Object.resolve (D:\Study\rnstudy\node_modules\metro\src\lib\transformHelpers.js:129:24) at resolve (D:\Study\rnstudy\node_modules\metro\src\DeltaBundler\traverseDepen...

 리액트 네이티브 초기 세팅 관련 마지막 에러가 되지 싶네요. ERROR  Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager. This error is located at:     in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)     in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)     in SafeAreaProviderCompat (at StackView.tsx:430)     in RNGestureHandlerRootView (at GestureHandlerRootView.android.tsx:23)     in GestureHandlerRootView (at StackView.tsx:429)     in StackView (at createStackNavigator.tsx:121)     in Unknown (at createStackNavigator.tsx:120)     in StackNavigator (at App.tsx:22)     in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)     in BaseNavigationContainer (at NavigationContainer.tsx:132)     in ThemeProvider (at NavigationContainer.tsx:131)     in NavigationContainerInner (at App.tsx:21)     in App (at renderApplicat...

 리액트 네이티브 네비게이션의 의존성 끝은 어디건지... 계속 에러입니다. ERROR  [react-native-gesture-handler] react-native-gesture-handler module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..). For installation instructions, please refer to https://docs.swmansion.com/react-native-gesture-handler/docs/#installation npm install react-native-gesture-handler 설치해주고 다시 빌드해줍니다.

 리액트 네이티브 네비게이션은 의존 패키지가 있나보네요.  ERROR  Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager. This error is located at:     in RNSScreen (at createAnimatedComponent.js:211)     in AnimatedComponent (at createAnimatedComponent.js:264)     in AnimatedComponentWrapper (at src/index.native.tsx:281)     in MaybeFreeze (at src/index.native.tsx:280)     in Screen (at Screens.tsx:37)     in MaybeScreen (at CardStack.tsx:654)     in RNSScreenContainer (at src/index.native.tsx:351)     in ScreenContainer (at Screens.tsx:20)     in MaybeScreenContainer (at CardStack.tsx:566)     in RCTView (at View.js:32)     in View (at Background.tsx:13)     in Background (at CardStack.tsx:564)     in CardStack (at StackView.tsx:437)     in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)     in SafeAreaProvider (at ...

 리액트 네이티브에 리액트 네비게이션 연동 중 에러가 발생했습니다. error: Error: While trying to resolve module `@react-navigation/stack` from file `D:\Study\rnstudy\App.tsx`, the package `D:\Study\rnstudy\node_modules\@react-navigation\stack\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`D:\Study\rnstudy\node_modules\@react-navigation\stack\src\index.tsx`. Indeed, none of these files exist:   * D:\Study\rnstudy\node_modules\@react-navigation\stack\src\index.tsx(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)   * D:\Study\rnstudy\node_modules\@react-navigation\stack\src\index.tsx\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)     at DependencyGraph.resolveDependency (D:\Study\rnstudy\node_modules\metro\src\node-haste\DependencyGraph.js:243:17)   ...

 윈도우 환경에서 리액트 네이티브 타입스크립트 템플릿의 특정 버전을 설치하려고 공식 문서의 명령어 를 아래 처럼 해봐도 해당 버전이 설치되지 않고 무조건 최신 버전만 설치가 되더군요. npx react-native init AwesomeTSProject --version x.xx.x --template react-native-template-typescript 리서치 해보니 --version=x.xx.x 또는 --version="x.xx.x" 등도 있었지만 모두 제대로 작동하지 않았습니다. 해결은 타입스크립트 템플릿의 버전을 지정 해 줘야하네요. react-native-template-typescript의 릴리즈 버전 에 종속적인 리액트 버전을 확인해서 아래와 같이 설치하면 됩니다. npx react-native init rntype --template react-native-template-typescript@6.5.13 왼쪽은 최신버전이고 오른쪽이 타입스크립트 템플릿 6.5.13으로 설치한 것입니다. 아마 타입스크립트 리액트가 아니고 자바스크립트 버전이었다면 그냥 될 수도 있겠네요.

 윈도우에서는 가상 데스크톱 화면을 어짜피 듀얼 모니터라 사용하지 않지만, 맥북에서는 모니터가 하나이기 때문에 미션 컨트롤을 활용해서 여러 데스크톱 화면을 사용중에 있습니다. 다 좋은데 가끔 카톡메세지를 연다던지 하면 데스크톱 화면의 위치 순서가 바뀌는 이슈가 있네요. 순서를 본인이 설정한데로 고정하도록 해보겠습니다. 시스템 환경설정 - Mission Control을 실행해줍니다. Spaces를 최근 사용 내역에 따라 자동으로 재정렬이 체크가 되어 있는데 체크 해제하시면 이제 자동 재정렬 되지 않게 됩니다.

 깃허브에서 원격에 무언가 작업을 하려고 하면 에러가 발생했습니다. remote: Repository not found. fatal: repository 'https://github.com/저장소.git/' not found 저의 경우 원인은 기존에 사용하던 깃허브를 사용하다가 추가로 깃허브 계정을 생성해서 사용하려는데 기존에 자격 증명이 되어 있던 계정으로 처리가 되면서 꼬인 이슈였습니다. 일단 윈도우 환경이었는데 제어판 - 사용자 계정 - 자격 증명 관리자 - Windows 자격 증명에서 깃허브 관련을 모두 제거 후 다시 사용할 계정으로 시도 하면 잘 됩니다.

 윈도우 환경에 리액트 + 타입스크립트 환경을 세팅중에 있었습니다. 코드 정적 분석 도구인 ESLint와 코드 포멧터인 Prettier을 설치 및 관련 json이나 .prettierrc 파일도 설정했지만 파일 저장시에 작동을 안하더군요. 일단 2가지를 확인 해봐야 합니다. 먼저 Ctrl + , 를 눌러 세팅 창을 열고 default formatter을 입력해 기본 포멧터가 None null로 되어 있다면 Prettier - Code formatter esbenp.prettier-vscode로 선택해줍니다. 다음으로 editor format on save를 검색해서 나오는 것이 체크 해제되어 있다면 체크 해줍니다.