ReactNative: 8081 port 서버 없이 빌드하기 (react-native bundle)



(글 작성한 시점의 최신 ReactNative ver: 0.40)

일반적으로 ReactNative를 사용하며 개발 시에는 react-native run-android 명령어로 빌드하며 8081 포트를 띄우거나 react-native start 명령어로 바로 포트를 띄워서, script 파일을 인터넷 연결을 통해 가져오게 되어있다.
5.0 버전 이상에서는 adb reverse tcp:8081 tcp:8081 명령어로 붙고 5.0 미만 버전에서는 pc와 동일한 wifi에 붙은 뒤 ip 설정을 해주는 방식으로 서버에 붙는다.

- 해당 내용에 대한 ReactNative doc의 설명
On Android 5.0+ devices connected via USB, you can use the adb command line tool to setup port forwarding from the device to your computer:
adb reverse tcp:8081 tcp:8081
Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.



그러나 릴리즈 할 때는 이 방법을 사용할 수 없기 때문에 script 파일을 ①외부 server에 업로드하여 접근하거나 ②프로젝트 내부에 ReactNative bundle을 포함시켜야 한다.

이 포스팅에서는 ②프로젝트 내부에 ReactNative bundle을 포함시키는 방법으로 빌드할 것이다.

  1. 일단 curl 명령어를 사용해야 하기 때문에 cURL이 설치가 되어있어야 한다. (다운로드 페이지) 일반적으로는 다운로드 페이지에서 curl executable > OS 선택 > Generic 선택 > Unspecified 선택 > (Win64라면 이 단계에서 cpu도 선택한다. x86_64 선택) > 그리고 나오는 다운로드 페이지에서 선택해서 다운 받으면 된다. (최상위 .7z 선택)
  2. cmd를 켜서 cd 프로젝트_루트 명령어로 프로젝트로 이동한 뒤, 만약 8081 포트가 실행되고 있지 않으면 react-native start 명령어를 통해 가동시켜 준다.
  3. app/src/main 위치에 assets 폴더를 생성해준다. : app/src/maih/assets 
  4. cmd에서 curl "http://localhost:8081/index.android.bundle?platform=android" -o "app/src/main/assets/index.android.bundle" 명령어를 통해 assets 폴더에 index.android.bundle을 다운 받아 준다. (나같은 경우엔 프로젝트 루트에 바로 app 폴더가 있었지만  android/app/... 으로 들어가는 경우도 있으니 assets 폴더 경로 입력에 주의해서 써야함.

그 뒤로는 그냥 빌드든, 릴리즈 apk 생성이든 원래 방식대로 자유롭게 하면 된다. 포트 연결을 해제하거나 network 유실 여부에 상관없이 script가 뜨는 것을 볼 수 있다.


현재 최신인 4.0 기준으로는 해당 방법이 ReactNative Doc 에 잘 나와있지 않은 관계로 (...) 매우 쉬운 절차임에도 불구하고 많은 개발자들이 헤매고 있다. ㅠㅠ 심지어 찾아보면 2015년 하반기가 되어서야 ReactNative 개발자들이 android 에도 오프라인 번들 사용을 지원하고 doc을 만들어줘야겠다며 생각하고 있다. (그러나 그 doc은 아직도 만들어지지 않았다고한다..)

댓글

댓글 쓰기

이 블로그의 인기 게시물

5년차의 슬럼프

이미지
2-3년 전까지만해도 꿈을 이뤘다고 생각했다. 매 해 더 어렵고 까다로운 일들을 맡게되고, 또 그것을 잘 해내면서 인정을 받을 때 마다 내가 성장하고 있다고 믿었다. 내가 성장할 때마다 인정을 받았고, 인정 받을 때마다 난 성장했다. 쌓이는 신뢰도와 높은 인사평가의 점수가 곧 나의 자질이며 실력이라고도 생각했다. 내 목표의식은 항상 successful result에 있었기 때문에 그에 따르는 성취감과 업무 만족도는 비례했으며, 따라서 회사의 발전이 곧 나의 발전이었다. 덕분에 프로젝트들을 주도할 기회가 점차 많이 주어지게 되었고, 그 과정 속에서 솔직히 만족스러웠다기보단 회사의 비전을 고민하게 되는 계기가 되었다. 두세개의 프로젝트를 병행하면서도 나은 결과를 위해 신체적으로나 심리적으로 많이 무리했었고, 물리적으로 불가능한 일정을 해보겠다고 사무실에 남아 새벽까지 일하다보면 어떤 날들에는 막역한 부담감이 너무 무거워 하염없이 눈물이 나기도 했다. 같이 일하는 팀원들은 다들 이미 힘들고 지친 나머지 프로젝트의 완성도를 높이는 작업에는 여력이 없는 모습들을 보며, 나도 점차 지쳐갔다. 내 열성을 다른 사람에게까지 강요할 수는 없는 노릇이었으니까. 개발 과정에서 아무리 time complexity와 design에 대해서 이야기해도, 반론을 제기하며 논쟁 했던 사람이 없다. 심지어 이미 개발을 다 끝낸 코드에 이슈를 제기했을 때도 상대방은 바로 수긍하며 다시 짜겠다고했다. 이상하게도 그 모습을 보며 화가 났다. 고민하지 않고 작성한 덕분에 쉽게 지워버릴 수 있는, 자존감이 없는 코드에 화가 났고, 그렇게 짜올 동안 누가 지적 한번 해준 적 없다는 상황이 화가 났다. 무엇보다 더 나은 방법이 있는지 찾아보지 않고 내 말 곧이 곧대로 수정하는 모습이 결국 등을 돌리는 계기가 되었다. 내게 필요했던건 워라밸도, 높은 연봉도 아니라 최소한 나와 비슷한 열정을 가진 사람들이었다. 내가 더 이상 이 회사에 남아 있어야 할 이유가 없었다. 남아서 더 배워야할 우리
자세한 내용 보기

10대 여고생이 만난 프로그래밍 - 마이크로소프트웨어 31주년 컨퍼런스

이미지
마이크로소프트웨어 31주년 컨퍼런스에서 "10대 여고생이 만난 프로그래밍"이라는 주제로 컨퍼런스를 진행했다.  내가 어떻게 프로그래밍을 시작하게 되었는지, 그리고 어떤 노력을 했었는지와 프로그래밍을 향한 나의 열정(?)에 대해 했다. 발표하는 동안 많은 분들이 내 이야기를 경청해주고 공감해주셔서 그래도 끝에 가선 긴장이 많이 풀린 것 같다ㅠㅠ 많이 긴장했었고 또 많이 미숙했었지만 나를 주제로 한 이야를 누군가 앞에서 이야기할 수 있어 좋았고, 더군다나 다른 발표자분들이 정말 대단하신 분들로만 모여있어서 이 자리에 섰다는 것 자체가 황송할 따름이었다...ㅎㅎ 관련 링크 :  http://onoffmix.com/event/34936
자세한 내용 보기

About Me

S tella Kim (a.k.a. Cowkite) T wenty two years old (was born 1996) K orean C hristian F emale P rogrammer S nowboarding N o excessive, No achieve H ope to developing every beautiful things '어떠한 사람이 되어야지', '이런 길을 걸어야지' 하며 늘 거창한 뜻을 품고선, 그 모든 포부를 뜨거운 냄비안에 우겨넣고는 마냥 진취적으로만 꿈을 꿨었다. 그러나 내 작은 냄비 안에 담긴 꿈들은 늘 금새 넘쳐 흘러 버렸고, 뜨거웠던 만큼 또 금방 식기도 했다. 모든 사람은 일면적이기만 할 수 없다. 난 개발을 좋아하고 또 개발자이며 더 위대한 개발자가 되고 싶지만, 사실 그림 그리는 것이나 피아노 치는 것도 좋아하고 보드 타는 것을 즐기며 누군가를, 혹은 무엇을 사랑하게 될 때에 진정 내가 살아있으며 행복함을 느낀다. 내가 학생일 때 누군가가 나에게 꿈을 묻는다면 늘 주저 없이 'easily customizable platform developer'라고 대답을 했지만, 이제는 플랫폼 개발자보단 세상의 모든 아름다운 것들을 개발하는 개발자가 되고싶다. 약간 노란 캔버스 위에는 커다란 나무를, 머릿속에는 마법사들이 뛰어노는 호그와트를, 가족들에게는 내 모든 감사함을, 그리고 까만 에디터 위에는 세상을 더 편리하게 할 코드들을. 숨이 다 할 때까지 개발하고, 연주하며, 사랑하고 싶다.
자세한 내용 보기