React-native: RCTBridge๋Š” RCTDevLoadingView๋ฅผ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด dispatch_sync๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ๊ต์ฐฉ ์ƒํƒœ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 10์›” 15์ผ  ยท  106์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react-native

iOS ์•ฑ ์‹œ์ž‘์‹œ ๋ฌด์ž‘์œ„๋กœ์ด ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค (ํ•ญ์ƒ ๊ทธ๋Ÿฐ ๊ฒƒ์€ ์•„๋‹˜).

๋ฒ„๊ทธ ์‹ ๊ณ ์ž…๋‹ˆ๊นŒ?

์˜ˆ

๊ธฐ์—ฌ ๊ฐ€์ด๋“œ ๋ผ์ธ ์„ ์ฝ์—ˆ์Šต๋‹ˆ๊นŒ?

์˜ˆ

ํ™˜๊ฒฝ

์šด์˜์ฒด์ œ : macOS Sierra 10.12.6
๋…ธ๋“œ : 6.10.2
ํ„ธ์‹ค : 1.0.2
npm : 5.4.2
ํŒŒ์ˆ˜๊พผ : 4.7.0
Xcode : Xcode 9.0 ๋นŒ๋“œ ๋ฒ„์ „ 9A235
์•ˆ๋“œ๋กœ์ด๋“œ ์ŠคํŠœ๋””์˜ค : 2.1 AI-143.2915827

ํŒจํ‚ค์ง€ : (์›ํ•จ => ์„ค์น˜๋จ)
๋ฐ˜์‘ : ^ 16.0.0 => 16.0.0
๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ : ^ 0.49.3 => 0.49.3

์žฌํ˜„ ๋‹จ๊ณ„

  1. ์•ฑ ์‹œ์ž‘

    ์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘

๊ฒฝ๊ณ  ์—†์Œ

์‹ค์ œ ํ–‰๋™

capture d ecran 2017-10-15 12 49 45

์žฌํ˜„ ๊ฐ€๋Šฅํ•œ ๋ฐ๋ชจ

ํ•ด๋‹น ์—†์Œ

๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์ผ๋ถ€ ํŒจํ‚ค์ง€

https://github.com/antoinerousseau/react-native-custom-components
https://github.com/rebeccahughes/react-native-device-info
https://github.com/evollu/react-native-fcm
https://github.com/gwmccull/react-native-polyfill
https://github.com/getsentry/react-native-sentry

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

+1 ์ถ”๊ฐ€๋ฅผ ์ค‘์ง€ํ•˜์‹ญ์‹œ์˜ค.์ด ๊ฒฝ์šฐ ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๋Š” ์ด๋ฉ”์ผ ์•Œ๋ฆผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๋Œ€์‹  "๋ฐ˜์‘ ์ถ”๊ฐ€"๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

๋ชจ๋“  106 ๋Œ“๊ธ€

์—ฌ๊ธฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค!

iOS ์šฉ ๋…ธ๋ž€์ƒ‰ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ๋„ ๋ด…๋‹ˆ๋‹ค. # 11196๊ณผ ๊ด€๋ จ์ด์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๊ฒƒ์ด ๋‹ค์‹œ๋กœ๋“œํ•˜๋ ค๊ณ  ํ•  ๋•Œ ์•ฑ์ด ์ถฉ๋Œํ•˜๋Š” ์›์ธ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ์‹คํŒจํ•œ๋‹ค
Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'This method must not be called before the JS thread is created'

๋‚˜๋Š” ๋˜ํ•œ iOS 11์—์„œ ๋•Œ๋•Œ๋กœ์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉฐ ๋” ๋งŽ์€ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ์ด๊ฒƒ์„ ๋””๋ฒ„๊น…ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ Stacktrace๋Š” ์ „ํ˜€ ๋„์›€์ด๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

+1

+1

+1 ์ถ”๊ฐ€๋ฅผ ์ค‘์ง€ํ•˜์‹ญ์‹œ์˜ค.์ด ๊ฒฝ์šฐ ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๋Š” ์ด๋ฉ”์ผ ์•Œ๋ฆผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๋Œ€์‹  "๋ฐ˜์‘ ์ถ”๊ฐ€"๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

๊ฐ™์€ ๋ฌธ์ œ. ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ํŒจํ‚ค์ง€๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ์žฅ์น˜ ์ •๋ณด
  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ์ƒํ˜ธ ์ž‘์šฉ
  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ๋ฏผ๊ฐํ•œ ์ •๋ณด
  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ์Šค๋‚ต๋ฐ”
  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ์Šคํ”Œ๋ž˜์‹œ ํ™”๋ฉด
  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ SVG
  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ๋ฒกํ„ฐ ์•„์ด์ฝ˜

@antoinerousseau ๋ชฉ๋ก๊ณผ์˜ ๊ต์ฐจ์ ์„ ๊ณ ๋ คํ•  ๋•Œ์ด ๋ฒ„๊ทธ์˜ ๊ฐ€๋Šฅํ•œ ์œ„์น˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ์ž์ฒด์˜ ๋ฒ„๊ทธ
  • react-native-device-info์˜ ๋ฒ„๊ทธ
  • react-native-device-info ์ด์™ธ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์—ฌ๋Ÿฌ ๋ฒ„๊ทธ

๋ฐฉ๊ธˆ react-native-device-info๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  rn 0.49์—์„œ 0.50์œผ๋กœ ์ด๋™ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ์ด ๋ฒ„๊ทธ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒŒ ๋ฌธ์ œ์ธ์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๋‚ด๊ฐ€ ์ด๊ฑธ ๋ฐ›์•˜์„ ๋•Œ์•ผ.

๊ฐ™์€ ๋ฌธ์ œ ...
๊ทธ๋ž˜์„œ ๋‚ด ์ž˜๋ชป์ด ์•„๋‹ˆ ์—ˆ์–ด?

๊ฐ™์€ ๋ฌธ์ œ ... ์–ด๋–ค ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ™์€ ๋ฌธ์ œ. ์œ„ ๋ชฉ๋ก์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์œ ์ผํ•œ ํŒจํ‚ค์ง€๋Š” react-native-sentry ์ž…๋‹ˆ๋‹ค.

์˜ค๋Š˜ ์—ฌ๊ธฐ์—์„œ ๊ฐ™์€ ๋ฌธ์ œ๋กœ ์ƒˆ๋กœ์šด ์•ฑ์„ ์‹œ์ž‘ํ–ˆ๊ณ  ๋‚ด๊ฐ€ ์ถ”๊ฐ€ ํ•œ ํŒจํ‚ค์ง€ ๋งŒ
"native-base": "^ 2.3.3",
"๋ฐ˜์‘": "16.0.0",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ": "0.50.3",
"react-native-fcm": "^ 10.0.3"

์•ˆ๋…•ํ•˜์„ธ์š”.
+1
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ": "0.49.3",
๋ฌด์ž‘์œ„๋กœ ์ฒ˜์Œ๋กœ๋“œ ํ•  ๋•Œ ์•ฑ์ด ๋‹ค์šด๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์•„๋ฌด๋„ ๊ทธ๊ฒƒ์„ ํ•ด๊ฒฐ ํ–ˆ์Šต๋‹ˆ๊นŒ ??

@dantman ๋‚˜๋Š” react-native-device-info๋ฅผ ์„ค์น˜ ํ•œ ์งํ›„์— ๋ฌธ์ œ๋ฅผ๋ณด๊ธฐ ์‹œ์ž‘ ํ–ˆ์œผ๋ฏ€๋กœ ์ ์–ด๋„ ์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ์—๋Š” ํ•ด๋‹น ํŠน์ • ํŒจํ‚ค์ง€์™€ ๊ด€๋ จ์ด ์žˆ๋‹ค๊ณ  ์˜์‹ฌํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ๊ฝค ์˜ค๋ž˜ ์ „์— ์•„๋ฌด๋Ÿฐ ๋ฌธ์ œ์—†์ด ์„ค์น˜ ํ•œ react-native-keychain์„ ์‚ฌ์šฉํ•˜๊ณ ์žˆ๋Š” ์œ ์ผํ•œ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€์ด๋ฏ€๋กœ ์ข‹์€ ์„ ํƒ ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

rebeccahughes / react-native-device-info # 260์€ RNDeviceInfo ๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋ฉ”์‹œ์ง€๋ฅผ ๊ฐ€์ง€๊ณ ์žˆ๋Š” ๋ฐ˜๋ฉด์ด ๋ฒ„๊ทธ๋Š” RCTDevLoadingView ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ์ด ๊ฒฝ๊ณ ๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•˜๋Š” ์ง€์ ์ด ๋‘˜ ์ด์ƒ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ์ค„์— ์ค‘๋‹จ ์ ์„ ๋„ฃ๋Š” ๊ฒฝ์šฐ :

RCTLogWarn(@"RCTBridge required dispatch_sync to load %@. This may lead to deadlocks", _moduleClass);

RCTDevLoadingView ๋กœ๋“œ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ๋ชจ๋“ˆ / ์Šคํƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ์—๋Š” RCTCxxBridge.mm ์—์„œ ์›๊ฒฉ ๋ฒˆ๋“ค์„๋กœ๋“œํ•˜๊ณ  ๋‹ค์šด๋กœ๋“œ ์ง„ํ–‰๋ฅ ์„๋ณด๊ณ ํ•˜๋Š” RCTDevLoadingView .

... onProgress:^(RCTLoadingProgress *progressData) {
#if RCT_DEV && __has_include("RCTDevLoadingView.h")
      RCTDevLoadingView *loadingView = [weakSelf moduleForClass:[RCTDevLoadingView class]];
      [loadingView updateProgress:progressData];
#endif
    }];

์—ฌ๊ธฐ์—์„œ RCTCxxBridge๋Š” moduleForClass ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ์•„์ง ์‚ฌ์šฉํ•  ์ˆ˜์—†๋Š” ๊ฒฝ์šฐ ๋ชจ๋“ˆ์˜ ์ธ์Šคํ„ด์Šค๋ฅผ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. onProgress ๋ธ”๋ก์— ์‚ฌ์šฉ ๋œ ๋Œ€๊ธฐ์—ด๋กœ ์ธํ•ด RCTDevLoadingView ๋Š” ๋น„ ๋ฉ”์ธ ๋Œ€๊ธฐ์—ด์—๋กœ๋“œ๋˜๋Š” ๋ฐ˜๋ฉด RCTDevLoadingView ์—๋Š” ๋ฉ”์ธ ๋Œ€๊ธฐ์—ด ์„ค์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์„ ์‚ฌ์šฉํ•˜์—ฌ RCTBridgeDelegate ์—์„œ ์ธ์Šคํ„ด์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•˜์—ฌ RCTDevLoadingView ๋ฅผ ๋‚™๊ด€์ ์œผ๋กœ๋กœ๋“œํ•˜์—ฌ ๊ฒฝ๊ณ ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge;

AppDelegate.m ์—…๋ฐ์ดํŠธํ•˜์—ฌ ๊ฒฝ๊ณ ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                            moduleProvider:nil
                                             launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Test"
                                            initialProperties:nil];
  ...
}

๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ : 0.50.4
๊ฐ™์€ ๋ฌธ์ œ ...

๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ : 0.51.0
๊ฐ™์€ ๋ฌธ์ œ ...

"๋ฐ˜์‘": "16.2.0",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ": "0.52.0",
๊ฐ™์€ ๋ฌธ์ œ ...

"๋ฐ˜์‘": "16.2.0",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ": "0.51.0",
"react-native-device-info": "0.13.0"

์—ฌ๊ธฐ์„œ ๋‚ด ํ•ด๊ฒฐ์ฑ…์€ react-native-device-info๋ฅผ pod ํŒŒ์ผ์—์„œ ์˜ฎ๊ธฐ๊ณ  ํ”„๋กœ์ ํŠธ์—์„œ ์ˆ˜๋™์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ์ด ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ ๊ฐ™์•˜์Šต๋‹ˆ๋‹ค. ๋˜ ๋‹ค๋ฅธ ์ ‘๊ทผ ๋ฐฉ์‹์€ CxxBridge๋ฅผ pod ํŒŒ์ผ์— React์˜ ํ•˜์œ„ ์‚ฌ์–‘์œผ๋กœ ํฌํ•จํ•˜๋Š” ๊ฒƒ์ด ๋  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ Folly (๊ทธ๋ฆฌ๊ณ  ๋ถ€์ŠคํŠธ)๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ ์ „์ฒด ์„ค์ •์ด ๋ฒˆ๊ฑฐ๋กญ๊ณ  ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฝ๋‹ˆ๋‹ค. ๋น ๋ฅธ ์ˆ˜์ •์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ค๋Š” ํŒจํ‚ค์ง€๋ฅผ ํฌ๋“œ์—์„œ ์ œ๊ฑฐํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

์„ค์น˜๋œ "react-native-device-info"์—†์Œ :
0.54.2์— ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

"react": "16.3.0-alpha.2",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ": "0.54.2",
"react-native-action-button": "^ 2.8.4",
"react-native-admob": "^ 2.0.0-beta.4",
"react-native-animatable": "^ 1.2.4",
"react-native-awesome-alerts": "^ 1.0.7",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ์š”์†Œ": "^ 0.19.0",
"react-native-fbsdk": "^ 0.7.0",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ์„ ํ˜• ๊ทธ๋ž˜๋””์–ธํŠธ": "^ 2.4.0",
"react-native-parallax-scroll-view": "^ 0.21.0",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ํฌํ†  ๊ทธ๋ฆฌ๋“œ": "0.0.2",
"react-native-responsive-dimensions": "^ 1.0.2",
"react-native-snap-carousel": "^ 3.6.0",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ๋ฒกํ„ฐ ์•„์ด์ฝ˜": "^ 4.5.0",
"react-navigation": "^ 1.5.7"

"react-native-action-button": "^ 2.8.4", shadowStyle={{shadowOpacity: 0.9}} ์ถ”๊ฐ€ํ•˜๋ฉด ๊ฒฝ๊ณ ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค ..

์—ฌ๊ธฐ์—๋„ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ™์€ ๋ฌธ์ œ.
RN 0.54.4

์•„๋ฌด๋„ ํ•ด๊ฒฐ์ฑ…์„ ์–ป์—ˆ์Šต๋‹ˆ๊นŒ?

์ƒˆ๋กœ / ์ƒˆ๋กœ ๋งŒ๋“  ํ”„๋กœ์ ํŠธ์—์„œ๋„ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

"๋ฐ˜์‘": "16.3.1",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ": "0.54.4"

๊ฐ™์€

+1

@antoinerousseau ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์—…๋ฐ์ดํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

@devburmistro์—์„œ ์ œ๊ณตํ•˜๋Š” ์†”๋ฃจ์…˜์„ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚ด ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ ํฌํ•จ์œผ๋กœ ์ธํ•ด ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์—์„œ ์‹คํ–‰ํ•  ๋•Œ์ด ์–ด์„ค ์…˜ ์˜ค๋ฅ˜ ๊ฐ€ ์‹œ์ž‘์‹œ ๋ฌด์ž‘์œ„๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ์ผ์ข…์˜ ๊ฒฝ์Ÿ ์กฐ๊ฑด

๋‚ด ์„ค์ • :

react-native-cli: 2.0.1
react-native: 0.53.0

๋‚ด ์ €์žฅ์†Œ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ์„ค์ •ํ•˜๊ณ  ์ˆœ์ˆ˜ํ•œ js ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ์‚ฝ์ž… ํ•œ ์งํ›„์—์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ „ ์ €์žฅ์†Œ์™€์ด ์ƒˆ ์ €์žฅ์†Œ์˜ ์ž ์žฌ์  ์ธ ์ฐจ์ด์ ์€ ์ด์ œ Cocoapods๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Cocoapods๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚ด๊ฐ€ ์ถ”๊ฐ€ ํ•œ ์งํ›„์— ์ผ์–ด๋‚œ ์ผ

๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ๋ธ”๋Ÿฌ

๋‚ด๋ถ€์— ์ค‘์ฒฉ ๋œ ๊ณต์œ  ํ™•์žฅ๋ณด๊ธฐ์—

๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋‹ฌ ๋ฐ•์Šค

@Babazon ์ด ๋ฐœ์ƒํ•˜๋ฉด ๋””๋ฒ„๊ฑฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ๊ณต์œ  ํ™•์žฅ๋ณด๊ธฐ์—์„œ ๋””๋ฒ„๊ทธ / ์ฝ˜์†” ๋กœ๊ทธ๋ฅผ ํ•  ์ˆ˜ ์—†์—ˆ๊ณ  ๋ฉ”์ธ ์•ฑ๋งŒ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

+1

๊ฒŒ์‹œ ํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ๋ฌธ์ œ๊ฐ€ ์ด์ „ ๋ฒ„์ „์˜ React Native๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ๋ฆด๋ฆฌ์Šค v0.55 ์—์„œ ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ท€ํ•˜์˜ ๊ธฐ์—ฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

React Native 0.55์—์„œ ์—ฌ์ „ํžˆ ๋ฐœ์ƒํ•˜๋Š” @ react-native-bot ๋ฌธ์ œ

@ react-native-bot cocoapods๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ React Native๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

๋ฒ„์ „ 0.50.4 ๋ฐ 0.55.4๋ฅผ ์‹œ๋„ํ•ฉ๋‹ˆ๋‹ค.

React Native 0.55.3์— react-native-svg๋ฅผ ์„ค์น˜ํ–ˆ๋Š”๋ฐ์ด ๋ฌธ์ œ๊ฐ€ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค.

screen shot 2018-05-30 at 16 04 07

๋‹ค์Œ์—์„œ ์—ฌ์ „ํžˆ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ :

๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ CLI : 2.0.1
๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ : 0.55.4

์ฝ”๋“œ๊ฐ€ ์ถ”๊ฐ€๋˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ ์ƒ์„ฑ ๋œ ํ”„๋กœ์ ํŠธ์™€ ๋˜‘๊ฐ™์€ ๊ฒฝ๊ณ ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€๋งŒ Firebase ์ข…์†์„ฑ ๋งŒ ์‚ฝ์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
๋‚˜๋Š” ์‚ฌ์šฉํ•˜๊ณ ์žˆ๋‹ค : ๋ฐ˜์‘ : 16.3.1
๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ : 0.55.4
๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

๋‚˜๋Š” ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์ง€๋งŒ Xcode์—์„œ ๋นŒ๋“œ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•  ๋•Œ ์ด์ „ ํ„ฐ๋ฏธ๋„ ์ฐฝ์ด ์‹คํ–‰ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํ„ฐ๋ฏธ๋„๊ณผ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ๋ฅผ ์ข…๋ฃŒํ•˜๊ณ  ๋นŒ๋“œ๋ฅผ ๋‹ค์‹œ ์‹คํ–‰ํ•˜๋ฉด์ด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ react-native-device-info๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ์ง€๋งŒ ๋…ธ๋ž€์ƒ‰ ๋ฉ”์‹œ์ง€๊ฐ€ ์•ฝ๊ฐ„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. 'RCTBridge๊ฐ€ RCCManagerModule์„๋กœ๋“œํ•˜๋ ค๋ฉด dispatch_sync๊ฐ€ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค ...'

์ƒˆ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฑฐ๋‚˜ style prop์„ ์‚ฌ์šฉ์ž ์ง€์ • ๊ตฌ์„ฑ ์š”์†Œ์— ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ๋ฐฐ์—ด์— map ๋•Œ์ด ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋˜์ง€๋งŒ ์ด์ œ ๊ฒฝ๊ณ ๊ฐ€ ์˜ˆ์ธกํ•  ์ˆ˜์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

OS11์—์„œ๋„์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ๋ฐ˜์‘ ํƒ์ƒ‰
  • ๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ ๋ฒกํ„ฐ ์•„์ด์ฝ˜

์—ฌ๊ธฐ์— ๋ฒกํ„ฐ ์•„์ด์ฝ˜ ์‚ฌ์šฉ์— ๋Œ€ํ•ด ์–ธ๊ธ‰ ํ•œ ๋ช‡ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋˜ํ•œ ๋‚˜์—๊ฒŒ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๊ณ  react-native-device-info ์—ฐ๊ฒฐ์„ ํ•ด์ œํ•˜๊ณ  ์ œ๊ฑฐํ–ˆ์œผ๋ฉฐ ์ด์ œ ๊ฒฝ๊ณ ๊ฐ€ ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

react-native-vector-icons๋ฅผ ์ถ”๊ฐ€ ํ•œ ํ›„์—๋„ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ ์ œ๊ฑฐํ•˜๊ณ  ๊ฒฝ๊ณ ๊ฐ€ ์‚ฌ๋ผ์กŒ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ,์ด ๊ฒฝ๊ณ ๋Š” ์›๊ฒฉ ๋””๋ฒ„๊ฑฐ๋ฅผ ์ผœ๊ณ  ๋‹ค์‹œ๋กœ๋“œ ํ•œ ํ›„ ์˜ค๋Š˜ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค. ์›๊ฒฉ์„ ๋„๊ณ  ๋‹ค์‹œ๋กœ๋“œํ–ˆ์œผ๋ฉฐ ๊ฒฝ๊ณ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์›๊ฒฉ์„ ๋‹ค์‹œ ์ผœ๊ณ  ๋‹ค์‹œ๋กœ๋“œํ–ˆ์œผ๋ฉฐ ๊ฒฝ๊ณ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ,์ด ๊ฒฝ๊ณ ๋Š” ์›๊ฒฉ ๋””๋ฒ„๊ฑฐ๋ฅผ ์ผœ๊ณ  ๋‹ค์‹œ๋กœ๋“œ ํ•œ ํ›„ ์˜ค๋Š˜ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค. ์›๊ฒฉ์„ ๋„๊ณ  ๋‹ค์‹œ๋กœ๋“œํ–ˆ์œผ๋ฉฐ ๊ฒฝ๊ณ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์›๊ฒฉ์„ ๋‹ค์‹œ ์ผœ๊ณ  ๋‹ค์‹œ๋กœ๋“œํ–ˆ์œผ๋ฉฐ ๊ฒฝ๊ณ ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

~ @mokriya ์ฃผ์„์„ ์ฝ์€ ํ›„ ๋””๋ฒ„๊ฑฐ๋ฅผ ๋‹ค์‹œ๋กœ๋“œํ•˜๊ณ  ๊ฒฝ๊ณ  ํ‘œ์‹œ๋ฅผ ์ค‘์ง€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋””๋ฒ„๊ฑฐ ํƒญ์ด ์—ด๋ฆฐ ์ƒํƒœ์—์„œ Android์™€ IOS ์—๋ฎฌ๋ ˆ์ดํ„ฐ / ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ ์‚ฌ์ด๋ฅผ ์ด๋™ํ•˜๋ฉด์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ~

์•„๋‹ˆ์—์š”

iOS 12, RN 0.57.0 ๋™์ผํ•œ ๋ฌธ์ œ.

ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•?
์•„๋‹ˆ๋ฉด ๋ฌด์‹œ?

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['RCTBridge']);

์˜ˆ, react-native-video๋ฅผ ์ถ”๊ฐ€ ํ•œ ํ›„์—๋„์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒŒ ๋ฌด์Šจ ๋œป์ธ๊ฐ€์š”? ๋™์˜์ƒ ์žฌ์ƒ์„ ๋ฐฉํ•ดํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ด๋Ÿฌํ•œ ๋ชจ๋“  ํƒ€์‚ฌ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ์ผ์œผํ‚ค๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋“ˆ์„ ๊ฐœ๋ฐœํ•  ๋•Œ ๋ˆ„๋ฝ ๋œ ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

react-native-device-info ์—†์ด iOS 12.1, RN 0.57.4์—์„œ ๋™์ผํ•œ ๋ฌธ์ œ ๋ฐœ์ƒ

๋ช‡ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค

"lodash": "^4.17.10",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-check-box": "^2.1.0",
"react-native-collapsible": "^1.2.1",
"react-native-elements": "^0.19.1",
"react-native-google-analytics-bridge": "^5.8.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-map-clustering": "^1.3.0",
"react-native-maps": "^0.21.0",
"react-native-masked-text": "^1.7.2",
"react-native-modal-picker": "0.0.16",
"react-native-onesignal": "^3.2.8",
"react-native-simple-radio-button": "^2.7.2",
"react-native-svg": "^8.0.0",
"react-native-ui-kitten": "^3.0.1",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.11.2",
"rn-sliding-up-panel": "^1.2.1",
"victory-native": "^30.5.0"

IOS์—์„œ "RCTDevLoadingView๋ฅผ๋กœ๋“œํ•˜๋ ค๋ฉด RCTBridge๊ฐ€ dispatch_snyc๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ๊ต์ฐฉ ์ƒํƒœ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค."

Xcode์—์„œ Project -> Clean ํ•œ ๋‹ค์Œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋‹ค์‹œ ์‹คํ–‰ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์ด ์˜๊ฒฌ ์ด ํ•ด๊ฒฐ ์ฑ…์ž„์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค. @mattijsf ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

RCTBridgeDelegate ์ฐพ์•„ extraModulesForBridge ๋ฉ”์„œ๋“œ๋ฅผ ์žฌ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

๋ชฉํ‘œ -C

<strong i="11">@interface</strong> MyBridgeDelegate : NSObject <RCTBridgeDelegate>
<strong i="12">@end</strong>

<strong i="13">@implementation</strong> MyBridgeDelegate

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
  return @[
#if RCT_DEV
    [bridge moduleForClass:[RCTDevLoadingView class]],
#endif
  ];
}

<strong i="14">@end</strong>

์Šค์œ„ํ”„ํŠธ 4

class MyBridgeDelegate: NSObject, RCTBridgeDelegate {
  func extraModules(for bridge: RCTBridge!) -> [RCTBridgeModule]! {
    var modules: [Any]! = []
    if RCT_DEV == 1 {
      modules.append(bridge.module(for: RCTDevLoadingView.self))
    }
    return modules as? [RCTBridgeModule]
  }
}

iOS12, RN 0.57.8์—์„œ ์žฌํ˜„

image
๋‚ด ์˜์กด, ๊ฐ™์€ ๋ฌธ์ œ

@aleclarson ๊ทธ ์ฝ”๋“œ๋Š” ์ •ํ™•ํžˆ ๋ฌด์—‡์„ํ•ฉ๋‹ˆ๊นŒ?

@ccorcos ๋จผ์ € RCTDevLoadingView ๋กœ๋“œํ•˜๋ฏ€๋กœ RN์—์„œ๋กœ๋“œ ํ•  ๋•Œ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๋ฅผ ์ฐจ๋‹จํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด ์ฃผ์„ ์ด ๋” ์‰ฌ์šด ํ•ด๊ฒฐ์ฑ…์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์—ฌ์ „ํžˆ ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ RN 0.57.8 + iOS 11.3 (์ ์–ด๋„)์—์„œ ์—ฌ์ „ํžˆ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

@devburmistro๊ฐ€ ์œ„์˜ ์ฃผ์„ ์—์„œ ๋ณ€๊ฒฝ ํ•œ ๋‚ด์šฉ์„ ์„ฑ๊ณต์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ์— ์ง๋ฉด

RN 0.58.3
iOS 11.4, 12.1

๊ต์ฐฉ ์ƒํƒœ๋กœ ์ด์–ด์ง‘๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ง€์ • ๋ชจ๋‹ฌ์„ ๋‹ซ์„ ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด์ „ 0.57.8์—์„œ ์ด๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ๋„ RN 0.58.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•œ ํ›„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

๋‚ด ์ •ํ™•ํ•œ ์˜ค๋ฅ˜๋Š” Unable find module for DevLoadingView , ์œ„์˜ ์†”๋ฃจ์…˜์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ˆ˜์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

screen shot 2019-01-30 at 0 54 04

์‹ค์ œ๋กœ RN 0.58.3์— ์ถ”๊ฐ€ ๋œ์ด ์ปค๋ฐ‹๊ณผ ๊ด€๋ จ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

https://github.com/facebook/react-native/commit/d7a0c44590bcf3fb9d055aeae3391d5bcd7e21be#diff -a2a67635fffd7b690d14dc17ae563a71

๋‚˜๋Š” 0.58.3 ์˜ค๋Š˜ RN๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•œ ํ›„ @oferRounds์™€ ๊ฐ™์€ "DevLoadingView์— ๋Œ€ํ•œ ๋ชจ๋“ˆ์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค"๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ ์žˆ๋‹ค.

์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์—์„œ ์•ฑ์ด ์ฒ˜์Œ ์—ด๋ฆด ๋•Œ ํŠธ๋ฆฌ๊ฑฐ๋˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ดํ›„์— ๋‹ค์‹œ๋กœ๋“œ (cmd-R)ํ•ด๋„ ์˜ค๋ฅ˜๊ฐ€ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํŽธ์ง‘ :์ด ํŠน์ • ์˜ค๋ฅ˜์— ๋Œ€ํ•ด ๋ณ„๋„์˜ ๋ฌธ์ œ ์ œ์ถœ : # 23235

0.58.3์„ ์‚ฌ์šฉํ•˜๋Š” iOS์—์„œ๋„ ์—ฌ์ „ํžˆ ๋ฌธ์ œ๊ฐ€ ์žˆ์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ช‡ ๊ฐ€์ง€ ํฅ๋ฏธ๋กœ์šด ๊ด€์ฐฐ :

  • @superguineapig๊ฐ€ ๋งํ–ˆ๋“ฏ์ด ์•ฑ์„ ๋‹ค์‹œ๋กœ๋“œ ํ•œ ํ›„์—๋Š” ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ๋ชจ๋“  ํ„ฐ๋ฏธ๋„ ์ธ์Šคํ„ด์Šค๋ฅผ ์ข…๋ฃŒํ•˜๊ณ  ์•ฑ์„ ๋นŒ๋“œ / ํŒจํ‚ค์ €๋ฅผ ์ƒˆ๋กœ ์‹œ์ž‘ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ํ‘œ์‹œ๋˜์ง€ _ ์•Š์Šต๋‹ˆ๋‹ค _. ๊ทธ๋Ÿฌ๋‚˜ ํŒจํ‚ค์ง€ ํ”„๋กœ๊ทธ๋žจ์„ ์—ด์–ด๋‘๊ณ  Xcode์—์„œ ์•ฑ์„ ๋‹ค์‹œ ๋นŒ๋“œํ•˜๋ฉด ์•ฑ์ด ํŒจํ‚ค์ง€ ํ”„๋กœ๊ทธ๋žจ์— ๋‹ค์‹œ ์—ฐ๊ฒฐ๋œ ํ›„ ์˜ค๋ฅ˜๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

_ ํŽธ์ง‘ :์ด ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ์ด ์—ฌ์ „ํžˆ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์†”๋ฃจ์…˜์ž„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค ._

AppDelegate.m ์—…๋ฐ์ดํŠธํ•˜์—ฌ ๊ฒฝ๊ณ ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                            moduleProvider:nil
                                             launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Test"
                                            initialProperties:nil];
  ...
}

์ด๊ฒƒ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ์Šต๋‹ˆ๋‹ค.

react-native-navigation์„ ์‚ฌ์šฉํ•˜๋Š” ๋™์•ˆ ์‚ฌ์šฉ์ž ์ง€์ • RCTBridgeDelegate๋ฅผ ๋“ฑ๋ก ํ•  ์ˆ˜์žˆ๋Š” ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ? bridgeManagerDelegate ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด ๋ธ๋ฆฌ๊ฒŒ์ดํŠธ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์†์ƒ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ( extraModulesForBridge ์ œ๊ณต๋œ RCTBridge๋Š” ํ•ญ์ƒ nil ).

RN 0.58.6 ๋ฐ iOS 12์— react-native-device-info ์„ ์ถ”๊ฐ€ ํ•œ ์งํ›„์— ์ด๊ฒƒ์„ ๋ฐ›๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ข‹์•„์š”, ์ด ๋Œ“๊ธ€์ด ์ €๋ฅผ ์œ„ํ•ด ์ˆ˜์ • ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

React Native 0.59.1

react-native-device-info๋ฅผ ์„ค์น˜ ํ•œ ์งํ›„์—์ด ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋˜๊ธฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์‹ค์ œ ์†”๋ฃจ์…˜์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚˜๋Š” ์ด๊ฒƒ๋„ ๋ฌด์ž‘์œ„๋กœ๋ณด๊ณ  ์žˆ์œผ๋ฉฐ, RN 0.57.8์—์„œ 0.59.5๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•  ๋•Œ ๋ชจ๋“  ๊ฒƒ์ด ๋‹ค์‹œ ์ž‘๋™ํ•˜๋„๋กํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๊ฒƒ (๊ตฌ์„ฑ) ์™ธ์—๋Š” ์•ฑ ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ œ ๊ฒฝ์šฐ์—๋Š” lib๊ฐ€ CodePush์ด๊ณ  2 ๊ฐœ์˜ yellowbox ๊ฒฝ๊ณ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

RCTBridge required dispatch_sync to load CodePush. This may lead to deadlocks
๊ณผ
Required dispatch_sync to load constants for CodePush. This may lead to deadlocks

์ด ๋ฌธ์ œ๋Š” ๊ธธ๋‹ค. ๊ทผ๋ณธ ์›์ธ์„ ํŒŒ์•…ํ•˜๋Š” ๊ฒƒ์ด ์—ฌ์ „ํžˆ ์ˆ˜์ˆ˜๊ป˜๋ผ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๊นŒ? ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜์žˆ๋Š” ๋‹ค๋ฅธ ๋””๋ฒ„๊ทธ ์ •๋ณด๋ฅผ ์•Œ๋ ค์ฃผ์„ธ์š”.


๋‚ด package.json :

{
  "name": "wonderswipe",
  "version": "0.0.1",
  "private": true,
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 7,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": false,
      "node": true
    },
    "plugins": [
      "react",
      "react-native",
      "react-hooks"
    ],
    "rules": {
      "comma-dangle": [
        2,
        "always-multiline"
      ],
      "semi": [
        2,
        "never"
      ],
      "react-native/no-unused-styles": 2,
      "react-native/split-platform-components": 2,
      "react-hooks/rules-of-hooks": "error"
    }
  },
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@postlight/mercury-parser": "^2.0.0",
    "@react-native-community/async-storage": "^1.3.3",
    "@react-native-community/viewpager": "^1.1.6",
    "babel-plugin-idx": "^2.4.0",
    "buffer": "^5.2.1",
    "he": "^1.1.0",
    "idx": "^2.5.5",
    "lodash": "^4.17.2",
    "moment": "^2.19.0",
    "moment-timezone": "^0.5.10",
    "node-summary": "../node-summary",
    "react": "16.8.3",
    "react-native": "^0.59.4",
    "react-native-actionsheet": "^2.4.2",
    "react-native-blur": "^3.2.0",
    "react-native-cached-image": "../react-native-cached-image",
    "react-native-cheerio": "^1.0.0-rc.4",
    "react-native-code-push": "^5.3",
    "react-native-custom-tabs": "^0.1.7",
    "react-native-easy-toast": "^1.0.9",
    "react-native-firebase": "^5.3.1",
    "react-native-fit-image": "^1.4.8",
    "react-native-flanimatedimage": "^0.4.0",
    "react-native-highlight-words": "^1.0.1",
    "react-native-keep-awake": "^4.0.0",
    "react-native-linear-gradient": "^2.0.0",
    "react-native-modal-dropdown": "^0.6.2",
    "react-native-modalbox": "^1.6.0",
    "react-native-orientation": "^3.1.3",
    "react-native-parallax-scroll-view": "../react-native-parallax-scroll-view",
    "react-native-rate": "^1.0.8",
    "react-native-safari-view": "^2.0.0",
    "react-native-sentry": "^0.42.0",
    "react-native-sha256": "^1.1.1",
    "react-native-status-bar-size": "^0.3.2",
    "react-native-swiper": "^1.5.14",
    "react-native-tooltip": "^5.2.0",
    "react-native-tts": "^3.0.0",
    "react-native-vector-icons": "^6.4.2",
    "react-native-webview": "^5.7.0",
    "react-native-webview-bridge": "^0.40.1",
    "react-redux": "^7.0.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.0.1",
    "eslint-plugin-react-native": "^3.6.0",
    "patch-package": "^6.1.2",
    "postinstall-postinstall": "^2.0.0",
    "redux-logger": "^3.0.6"
  },
  "resolutions": {
    "babel-core": "7.0.0-bridge.0"
  }
}

image

@grossingdev ์ฃผ์„ ์œผ๋กœ์ด ์˜ค๋ฅ˜๋ฅผ ์ˆ˜์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ react-native๋ฅผ 0.59.8 ๋ฒ„์ „์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ•œ ํ›„. ์ด ์˜ค๋ฅ˜๊ฐ€ ๋‹ค์‹œ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค

react-native 0.59.3์—์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ์œ„ํ•œ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  #if RCT_DEV
    [bridge moduleForClass:[RCTDevLoadingView class]];
  #endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"YourAppName"
                                            initialProperties:nil];

ios ์•ฑ์—์„œ react-native-maps Google์ง€๋„๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ๋™์•ˆ AppDelegate.m ํŒŒ์ผ์„ ์—…๋ฐ์ดํŠธ ํ•œ ํ›„ ๋™์ผํ•œ ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
"react-native": "0.59.5"

๋‚˜๋ฅผ ์œ„ํ•ด-์ด๊ฒƒ์€ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค ---
"๋ฐ˜์‘": "16.8.3",
"๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ": "0.59.9",
AppDelegate.m ํŒŒ์ผ

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
//  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
//                                                   moduleName:@"mobileapp"
//                                            initialProperties:nil];


  NSURL *theurl ;
#if DEBUG
  theurl = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  theurl = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:theurl
                                            moduleProvider:nil
                                             launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"mobileapp"
                                            initialProperties:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@ amitkumar3968 ์ฃผ์„ ํ˜•์‹์„ ์ฝ”๋“œ๋กœ ์ง€์ •

๋น„์Šทํ•œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.
Screenshot 2019-07-23 at 10 27 04


๋‚ด package.json :

{
  "name": "auth",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "firebase": "^6.3.1",
    "react": "16.8.6",
    "react-native": "0.60.0"
  },
  "devDependencies": {
    "@babel/core": "7.5.0",
    "@babel/runtime": "7.5.0",
    "@react-native-community/eslint-config": "0.0.3",
    "babel-jest": "24.8.0",
    "eslint": "6.0.1",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

Reload๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์ง€๋งŒ์ด ๋ฌธ์ œ๊ฐ€ ๋ฌด์ž‘์œ„๋กœ ๋ฐœ์ƒํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ๋””๋ฒ„๊ฑฐ๋ฅผ ๋น„ํ™œ์„ฑํ™” ํ•  ๋•Œ๋งŒ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. Perf Monitor๋ฅผ ์—ด์—ˆ์„ ๋•Œ RAM์ด ๋น„ํ™œ์„ฑํ™” ๋œ ํ›„ ยฑ 100MB์—์„œ ยฑ 300MB๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

๋””๋ฒ„๊ฑฐ ์‚ฌ์šฉ :
Screen Shot 2019-07-25 at 9 07 45 AM

๋””๋ฒ„๊ฑฐ์—†์ด :
Screen Shot 2019-07-25 at 9 08 09 AM

์ œ์•ˆ ๋œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ๊ฒฝ๊ณ  ํ‘œ์‹œ ๋งŒ ์ค‘์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ œ ๊ฒฝ์šฐ์—๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์ง€๋งŒ ๋ฉ”๋ชจ๋ฆฌ ๋ฌธ์ œ๋Š” ํ•ด๊ฒฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๊ฐ€ ๋ฆด๋ฆฌ์Šค ๋ชจ๋“œ์—์„œ ์•ฑ์˜ ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ๋ฏธ์น ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.

์•ž์„œ ์–ธ๊ธ‰ ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ React Native 0.59.10 ์—์„œ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค.

diff --git a/ios/Foo/AppDelegate.m b/ios/Foo/AppDelegate.m
index e446e79..2c28719 100644
--- a/ios/Foo/AppDelegate.m
+++ b/ios/Foo/AppDelegate.m
@@ -18,6 +18,11 @@

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

+// https://github.com/facebook/react-native/issues/16376#issuecomment-350523177
+#if RCT_DEV && __has_include(<React/RCTDevLoadingView.h>)
+#import <React/RCTDevLoadingView.h>
+#endif
+
 <strong i="7">@implementation</strong> AppDelegate

@@ -39,6 +44,13 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(

   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+
+  // https://github.com/facebook/react-native/issues/16376#issuecomment-350523177
+  #if RCT_DEV && __has_include(<React/RCTDevLoadingView.h>)
+  [bridge moduleForClass:[RCTDevLoadingView class]];
+  #endif
+
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"Foo" initialProperties:nil];
   rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

์—ฌ๊ธฐ์„œ ์œ ์ผํ•œ ์ฐจ์ด์ ์€๋กœ๋“œ ํ•  ๋•Œ ๋˜‘๊ฐ™์€ ๋…ผ๋ฆฌ ( RCT_DEV && __has_include(<React/RCTDevLoadingView.h>) ๋ถ€๋ถ„)๋ฅผ ์ผ์น˜ ์‹œ์ผฐ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค ...

react-native-firebase 2 ๊ฐœ๋ฅผ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๋“œ๋ฌผ๊ฒŒ ๋ฐœ์ƒํ•˜์ง€๋งŒ :
image
image

react-native 0.61.2๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ๋กœ ๋งŒ๋“  ํ…Œ์ŠคํŠธ ํ”„๋กœ์ ํŠธ์˜ Images.xcassets/AppIcon.appiconset ๋””๋ ‰ํ„ฐ๋ฆฌ์— ์•ฑ ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜์—ฌ์ด ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ ํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ์— ์ฝ”๋“œ ์ค„์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฐ˜์‘ ๋„ค์ดํ‹ฐ๋ธŒ 0.59.10
๊ฐ™์€ ๋ฌธ์ œ.

์—ฌ๊ธฐ์— ๊ฐ™์€ ๋ฌธ์ œ !! ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐ ํ•œ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

AppDelegate.m ์—…๋ฐ์ดํŠธํ•˜์—ฌ ๊ฒฝ๊ณ ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                            moduleProvider:nil
                                             launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Test"
                                            initialProperties:nil];
  ...
}

์ด ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฒฝ๊ณ ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋‹จํžˆ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๊ฐ™์€ ๋ฌธ์ œ์ด์ง€๋งŒ componentDidUpdate ์ฝ”๋“œ ๋ธ”๋ก์„ ์‚ญ์ œํ•˜๋ฉด์ด ๊ฒฝ๊ณ ๊ฐ€ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒํ•˜์ง€๋งŒ componentDidUpdate๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ : ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์„ค์น˜ํ•˜๋ ค๋ฉด Xcode๋ฅผ ์—ฝ๋‹ˆ ๋‹ค.

macOS ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์—…๋ฐ์ดํŠธ ํ•  ๋•Œ ์—…๋ฐ์ดํŠธ๋ฅผ ์œ„ํ•ด Xcode๋ฅผ ์—ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

AppDelegate.m ์—…๋ฐ์ดํŠธํ•˜์—ฌ ๊ฒฝ๊ณ ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                            moduleProvider:nil
                                             launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Test"
                                            initialProperties:nil];
  ...
}

@grossingdev jsCodeLocation์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? URL์ด์–ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ๋ฌด์—‡์„ ๊ฐ€๋ฆฌ์ผœ ์•ผํ•ฉ๋‹ˆ๊นŒ?

react-native-firebase 2 ๊ฐœ๋ฅผ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค. ๋“œ๋ฌผ๊ฒŒ ๋ฐœ์ƒํ•˜์ง€๋งŒ :
image
image

Firebase๋กœ ์ธํ•ด์ด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ–ˆ๋Š”์ง€ ๊ณต์œ  ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ์•ˆ๋…•ํ•˜์„ธ์š”.

@ abdi4 ๋ฐฉ๊ธˆ

@zloka ์•„๋‹ˆ ์ด๊ฒƒ์€ ๋ฌด์ž‘์œ„๋กœ ๋ฐœ์ƒํ•˜๊ณ  ๊ทธ๊ฒƒ์„ ๋‹ค์‹œ ๋งŒ๋“ค ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด ๊ฒฝ๊ณ  ๋‚˜ ๋‹ค๋ฅธ ๊ฒฝ๊ณ ๋ฅผ ๋ฌด์‹œํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์€

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
    'RCTBridge'
]);

์ด ๋ฌธ์ œ๋Š” ๋น„ ๊ฒฐ์ •์ ์œผ๋กœ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ํ•  ๋•Œ๋งˆ๋‹ค ๋‚ด๊ฐ€ ๊ฐ€์ง„ ์œ ์ผํ•œ ํ•ด๊ฒฐ์ฑ…์€ ๋‚ด ์žฅ์น˜์—์„œ ์•ฑ์„ ์‚ญ์ œํ•˜๊ณ  ๋‹ค์‹œ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์‹ ์†ํ•œ ์†”๋ฃจ์…˜ :

let bridge = RCTBridge (bundleURL : jsCodeLocation, moduleProvider : nil, launchOptions : nil)
#if RCT_DEV
bridge? .module (for : RCTDevLoadingView.self)
#endif
let rootView = RCTRootView (bridge : bridge !, moduleName : "AppMain", initialProperties : nil)

์•ˆ๋…•ํ•˜์„ธ์š”. ์ตœ๊ทผ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ™œ๋™์ด์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ ๋˜์—ˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ์—ฌ์ „ํžˆ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜์ฃผ์˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๊นŒ? ์ด ๋ฌธ์ œ๋Š” ๋” ์ด์ƒ ํ™œ๋™์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์œผ๋ฉด ์ข…๊ฒฐ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ "ํ† ๋ก "์œผ๋กœ ๋ถ„๋ฅ˜ํ•˜๊ฑฐ๋‚˜ "๋ฐฑ ๋กœ๊ทธ"์— ์ถ”๊ฐ€ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ด์–ด ๋‘๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ๊ธฐ์—ฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”. ์ตœ๊ทผ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ™œ๋™์ด์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ ๋˜์—ˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ์—ฌ์ „ํžˆ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜์ฃผ์˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๊นŒ? ์ด ๋ฌธ์ œ๋Š” ๋” ์ด์ƒ ํ™œ๋™์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์œผ๋ฉด ์ข…๊ฒฐ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ "ํ† ๋ก "์œผ๋กœ ๋ถ„๋ฅ˜ํ•˜๊ฑฐ๋‚˜ "๋ฐฑ ๋กœ๊ทธ"์— ์ถ”๊ฐ€ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ด์–ด ๋‘๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ๊ธฐ์—ฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— ๋‹น์‹ ์˜ ํ™œ๋™์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒฝ๊ณ ๋Š” ์ƒˆ๋กœ์šด ์•ฑ์—์„œ ๊ณ„์†ํ•ด์„œ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

@sospedra ์™ธ๋ถ€ ์ข…์†์„ฑ์—†์ด React Native ํ…œํ”Œ๋ฆฟ์œผ๋กœ ์ด๋Ÿฐ ์ผ์ด ๋ฐœ์ƒํ•˜๋Š” ์ €์žฅ์†Œ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

ํƒ€์‚ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ ๋ฌธ์ œ๋Š” ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์ œ์ถœํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

0.63.2 ์— ๋Œ€ํ•œ ๋™์ผํ•œ ๋ฌธ์ œ ์›์ธ์ด ๋ฌด์—‡์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ€๋” ์•ฑ์˜ ๋ชจ๋“  ์ƒํ˜ธ ์ž‘์šฉ์ด ๋” ์ด์ƒ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๋ฌด์ž‘์œ„๋กœ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๋™์ผํ•œ ๊ฒฝ๊ณ ๋Š” Metro (์ˆ˜๋™) ์žฌ๋กœ๋“œ์˜ react-native-macos์—์„œ๋งŒ ์ œ๊ณต๋˜๋ฉฐ ์ฝ”๋“œ ๋ณ€๊ฒฝ ์—…๋ฐ์ดํŠธ์—๋Š” ๋ฐœ์ƒํ•˜์ง€ ์•Š์œผ๋ฉฐ iOS, Android ๋˜๋Š” Windows์—์„œ๋Š” ์ œ๊ณต๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
NB : RN 0.62.2์˜ ๋‚˜๋ฅผ ์œ„ํ•ด

Catalyst ์•ฑ์—์„œ ๋™์ผํ•œ ๊ฒฝ๊ณ ๋ฅผ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.

์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ๋ฅผ ๋‹ซ๊ณ  ์ง€ํ•˜์ฒ ์„ ์ฃฝ์˜€์Šต๋‹ˆ๋‹ค. XCode build and run ๊ฒฝ๊ณ ๊ฐ€ ์‚ฌ๋ผ์กŒ์Šต๋‹ˆ๋‹ค!

๋ฉ”ํŠธ๋กœ ๋ฒˆ ๋“ค๋Ÿฌ๋ฅผ ๋‹ซ๊ณ  ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์—์„œ ์•ฑ์„ ์ œ๊ฑฐํ•˜๋ฉด ๊ฒฝ๊ณ ๊ฐ€ ์‚ฌ๋ผ์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‚ด๋ถ€์—์„œ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฝํฌ ํŒจํ‚ค์ง€๋ฅผ ์ถ”๊ฐ€ ํ•œ ํ›„ ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰