React-Native 업그레이드

React Native 0.19에서 0.20로 업그레이드

어제밤까지만 해도 http://facebook.github.io/react-native/ 사이트의 왼쪽 상단에 0.19라고 적혀 있었던 것 같은데, 오늘 보니 0.20으로 바뀌었더군요. 그래서 https://github.com/facebook/react-native/releases 에 가보니 0.20이 이틀전에 릴리즈 되었더군요. (근데 왜 http://www.reactnative.com/react-native-v0-20-0-rc-released/ 여기서는 2월 10일 즉 7일전에 릴리즈 되었다고 할까요….? 이유 아시는분?)

앱을 만들기 시작할때 react-native 0.19로 시작했었고0.20 업그레이드를 시도해 보기로 했습니다.

저는 안드로이드 앱을 만들고 있고 개발 환경은..

윈도우즈 7 64비트, Microsoft Visual studio 2012가 설치되어 있습니다.

---

RN 공식 페이지에 업그레이드에 대해서 나와 있었고 (http://facebook.github.io/react-native/docs/upgrading.html#content) 1번 단계를 시도해 봤는데 폭망…

제가 시도했을때 나왔던 에러를 미쳐 캡쳐를 안해둬서 다른곳에서 발췌해왔습니다; (https://github.com/strongloop/strongloop/issues/261)

npm install react-native@0.20을 하면 뭐가 좀 실행되다가

Warning MSB80003: Could not find WindowsSDKDir variable from the registry. TargetFrameworkVersion or PlatformTools ….

이런 경고가 중간중간에 뜨고 error도 뜨더군요. 그래도 끝까지 기다리면 0.20이 설치는 되던데 몇몇 모듈이 제대로 설치되지 않았다라는 문구가 나옵니다.

먼저 시스템 환경변수로 WindowsSDKDir 을C:\Program Files\Microsoft SDKs\Windows\v7.1 로 설정하고 다시 시도했습니다. 안되네요..

그래서 구글링을 해보니 https://github.com/nodejs/node-gyp/issues/119 에서 node-gyp을 업데이트 해보라고 하네요. 그래도 안 됩니다.

이번에는 https://github.com/Level/levelup/issues/278 에서 GYP_MSVS_VERSION 환경변수를 설정해주고 해보라고 하네요. 그래서 커맨드에서 set GYP_MSVS_VERSION=2012 를 하고 다시 설치를 시도했더니 이번에는 다른 에러가 나옵니다.

> npm install react-native@0.20

> utf-8-validate@1.2.1 install c:\Dev\workspace6\AndroidApp\node_modules\react-native\node_modules\ws\node_modules\utf-8-validate
> node-gyp rebuild

|
c:\Dev\workspace6\AndroidApp\node_modules\react-native\node_modules\ws\node_modules\utf-8-validate
> if not defined npm_config_node_gyp (node “C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js” rebuild ) else (node rebuild )
Building the projects in this solution one at a time. To enable parallel build, please add the “/m” switch.
 validation.cc
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(336): error C2988: unrecognizable template declaration/definition [c:\Dev\workspace6\AndroidApp\nod e_modules\react-native\node_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(336): error C2059: syntax error : ‘using’ [c:\Dev\workspace6\AndroidApp\node_modules\react-native\n ode_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(469): error C2988: unrecognizable template declaration/definition [c:\Dev\workspace6\AndroidApp\nod e_modules\react-native\node_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(469): error C2059: syntax error : ‘using’ [c:\Dev\workspace6\AndroidApp\node_modules\react-native\n ode_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(576): error C2061: syntax error : identifier ‘WeakCallbackType’ [c:\Dev\workspace6\AndroidApp\node_ modules\react-native\node_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
 C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(642) : see reference to class template instantiation ‘v8::PersistentBase<T>’ being compiled C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(637): error C2253: ‘PersistentBase<T>’ : pure specifier or abstract override specifier only allowed o n virtual function [c:\Dev\workspace6\AndroidApp\node_modules\react-native\node_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(844): error C2253: ‘Global<T>’ : pure specifier or abstract override specifier only allowed on virtua l function [c:\Dev\workspace6\AndroidApp\node_modules\react-native\node_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
 C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(847) : see reference to class template instantiation ‘v8::Global<T>’ being compiled
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(852): error C2988: unrecognizable template declaration/definition [c:\Dev\workspace6\AndroidApp\nod e_modules\react-native\node_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(852): error C2059: syntax error : ‘using’ [c:\Dev\workspace6\AndroidApp\node_modules\react-native\n ode_modules\ws\node_modules\utf-8-validate\build\validation.vcxproj]

.
.
중간생략
.
.
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:270:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd c:\Dev\workspace6\SampleApp\node_modules\react-native\node_modules\ws\node_modules\utf-8-validate
gyp ERR! node -v v4.2.4
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok

> bufferutil@1.2.1 install c:\Dev\workspace6\SampleApp\node_modules\react-native\node_modules\ws\node_modules\bufferutil
> node-gyp rebuild

-
Ji@ECHOMANIA c:\Dev\workspace6\SampleApp\node_modules\react-native\node_modules\ws\node_modules\bufferutil
> if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node  rebuild )
Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
  bufferutil.cc
C:\Users\Ji\.node-gyp\4.2.4\include\node\v8.h(336): error C2988: unrecognizable template declaration/definition [c:\Dev\workspace6\SampleApp\nod e_modules\react-native\node_modules\ws\node_modules\bufferutil\build\bufferutil.vcxproj]
.
.
.

정확히는 모르겠지만 node-gyp을 통해서 utf-8-validate 모듈, bufferutil 모듈을 빌드하려고 하는데 에러가 나는것 같아 보입니다.

흠..그래서 node-gyp(https://github.com/nodejs/node-gyp) 이뭔가 알아봤더니 Node.js의 native addon 모듈들을 컴파일해주는 빌드 툴이라고 합니다. node-gyp의 installation 가이드에 따르면

• 파이썬이 필요하고
• 비쥬얼 스튜디오 2013(Express도 됨)또는 그 이상이 필요하고!
• 커맨드 창을 ‘관리자 권한’으로 실행해야 하고
• GYP_MSVS_VERSION 환경변수를 설정해주거나 msvs-version 옵션을 붙여서 install을 실행해야 하고
• WindowsSDKDir 환경변수 설정을 위해서 아래의 커맨드를 실행해야

call "C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd" /Release /x86

나

call "C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd" /Release /x64

이러이러한 조건들이 필요한데 여기서 제일 중요한게 비쥬얼 스튜디오 버전!!! 저는 2012라서 저런 에러가 났던것 같기도 하네요. VS2012로 만들고 있는 프로그램이 있기도 했고, 또다른 비쥬얼 스튜디오 버전을 설치해가면서 하기에는 귀찮니즘이 생겨서..다른 방법을 찾아보기로 했습니다.

다시 한번 구글링을 해보니 업그레이드 때문에 곤란함을 겪은 사람이 더 있더군요. (https://github.com/facebook/react-native/issues/1502) 그래도 여기서 힌트를 얻은게..새로운 앱을 init해서 거기서 react-native 모듈을 가져오는 방법이 생각났습니다.

react-native init GarbageApp 을 하면 react-native-cli 모듈을 통해서 GarbageApp이라는 프로젝트가 생성되면서 최신 버전의 react-native 모듈을 받아온다.

모듈은 독립적으로 다운로드 받아지고 사용될 수 있기 때문에 새로운 버전을 다른 디렉토리에서 받은 후 기존 프로젝트의 react-native를 지우고, 새 버전을 넣어도 작동할 것이다.

그래서 새로운 프로젝트를 하나 생성하고 node_modules/react-native 를 복사해서 기존 프로젝트의 node_modules 안에 붙여넣어봤습니다. (복사할때 파일 이름이 너무 길다고 157개 정도의 파일들을 복사 못하더군요. 그래서 git bash shell에서 cp 명령을 통해서 복사했더니 되었습니다.)

그리고 바로 앱을 실행시켜봤습니다. (react-native run-android) 빌드는 잘 되고 실행이 되었는데, 공포의 빨간 화면 뜨면서 undefined is not an object (evaluating ‘s.propTypes.style’) 에러가 표시되더군요. 구글링을 바로 해보니 (http://stackoverflow.com/questions/35422246/react-native-android-app-working-on-debug-crashing-on-release) 업그레이드 시에 일어날법한 문제가 있더군요. 환경설정이 달라진다던가..

공식 사이트에서 업그레이드에 관한 순서가 하나 더 남아있던게 생각이 나서 다시 RN 공식 사이트의 Upgrade 가이드를 보니 react-native upgrade를 하라고 써있더군요. 새 패키지의 업데이트된 내용을 프로젝트에 적용시키기 위해서 꼭 해야하는 부분이더라고요. 예를 들어 android/app/build.gradle에 compile “com.facebook.react:react-native:0.19.+” 을 compile “com.facebook.react:react-native:0.20.+” 으로 바꾸는 작업이 필요합니다.

다만 react-native upgrade를 하면 기존의 설정 파일들 (setting.gradle 이라던가 build.gradle)들을 업데이트 시키려고 하고, 혹시나 그런 파일들의 내용을 바꾼적이 있다면 (네이티브 모듈을 만들어서 사용하려고 MainActivity.java를 바꿨다던가 하면..) 기존 파일들을 무시하고 덮어쓸것인지 아니면 기존 파일을 그대로 유지할 것 인지 물어봅니다. 어떤점이 바뀌었는지도 비교 가능하니까 잘 보면서 진행하면 됩니다.

react-native upgrade가 끝나고 다시 앱을 실행해보니 이제 잘 됩니다! ToT 몇시간에 걸친 업그레이드가 간신히 끝났네요.

---

아이고 힘드네요..그래도 자동크기 조절되는 TextInput컴포넌트라던가 안드이로드 웹뷰에 대한 기능 추가 같은 것들을 놓치지 않기 위해서는 업그레이드가 꼭 필요했던것 같습니다. 각종 버그들을 피하기 위해서도 말이죠..

저처럼 헤매는 분들을 위해서 이 글이 도움이 되었으면 좋겠습니다.

ps. 글을 쓰는건 참 어렵네요;; 평소에 글 안써보다가 미디움을 시작하면서 글을 꾸준히 쓰기로 결심했는데, 자주하다 보면 늘겠죠?

출처:https://medium.com/@comgate3/react-native-0-19%EC%97%90%EC%84%9C-0-20%EB%A1%9C-%EC%97%85%EA%B7%B8%EB%A0%88%EC%9D%B4%EB%93%9C-436f8af3574f