저는 Native Mobile App 개발을 경험해보지 못했습니다. 굳이 구분하자면 Web 개발자라고 하는 편이 맞을 것 같아요. 가끔 저도 멋진 Mobile App 을 만들어보고 싶다는 생각을 합니다. 요즘은 어쨋든 Mobile 이 대세니까요. 그러던 중 이녀석을 알게 되었습니다.
React Native
React Native
React Native 는 Facebook 에서 만든 Mobile App 개발을 위한 라이브러리 입니다. Facebook 은 정말 대단합니다. (저는 사용하지 않는 서비스지만요 ㅎㅎ)
React Native 는 Javascript 와 React 만을 사용해서 안드로이드와 IOS 모바일 앱을 한꺼번에 개발할 수 있게 합니다. 멋지지 않습니까? 저처럼 두 가지 환경을 각각 공부할 엄두가 나지 않는 사람에겐 아주 안성맞춤 솔루션인 것이죠 !!
Reference Page에 방문해보면 아래 4가지 특성을 강조하고 있습니다.
- Build native mobile apps using JavaScript and React
- A React Native app is a real mobile app
- Don't waste time recompiling
- Use native code when you need to
Javascript + React 로 Mobile Web App
이나 Hybrid App
이 아닌 Native App
을 개발할 수 있고 Hot Reloading 을 지원하며 필요한 때는 Native Code 를 사용할 수 있다는 것이죠.
React Native reference page : https://facebook.github.io/react-native
자 그럼 이제 App 을 개발해봅시다. Let's coding !!
이 아니라 일단 개발환경을 구축 해봅시다 ㅋ 참고로 저는 mac 을 사용합니다.
> brew install node
> brew install watchman
homebrew 가 설치되어 있지 않다면 homebrew 를 먼저 설치합니다. brew 는 mac 의 패키지 관리툴로 React Native 개발환경 때문이 아니더라도 사용하시기를 권유 드립니다. 정말 편리한 툴입니다.
node 와 watchman 을 설치해줍니다. watchman 역시 Facebook 에서 만든 툴로 파일 시스템 즉 소스코드 변경을 감지하기 위해 사용합니다.
> npm install -g react-native-cli
xcode 가 설치되어 있지 않거나 최신버전이 아닌 경우 설치해줍니다. 공식 가이드에서는 8 보다 높은 버전이면 괜찮다고 하지만 xcode 8을 사용하는 경우 최신 기존의 IOS 시뮬레이터를 사용할 수 없고 제 경우에는 빌드조차 되지 않았습니다. 꼭 최신 버전인 9.2 로 업데이트를 해주세요. Command Line Tools 도 마찬가지입니다.
모든 설치 과정이 잘 진행되었다면...
App 을 한 번 만들어봅시다 ~ 두둥 !!
react-native 라는 커맨드 라인 툴을 활용해서 스켈레톤 App 을 뚝딱 만들어낼 수 있습니다. --help 옵션을 줘서 무엇에 쓸 수 있는 도구인지 좀 더 자세히 확인해보면...
start, run-ios, run-android, new-library, bundle, eject, link, install, log-ios, log-android, info 등의 기능을 확인할 수 있네요. 어찌된 일인지 init 는 보이질 않는군요. 숨겨진 기능인 것인가? +______+;; help 에서는 확인할 수 없지만 아래처럼 init 기능을 사용할 수 있습니다.
> react-native init AwesomeProject
이렇게 init 을 하고 나면 AwesomeProject 디렉토리가 생성되고 최소한의 App 코드들이 자동으로 생성됩니다. 생성된 주요 디렉토리와 파일들의 내용을 살펴보면...
- ios : IOS App 을 위한 xcode 프로젝트
- android : Android App 을 위한 Java 프로젝트
- node_modules : node 모듈들 설치 경로
- tests : App.js 에 대한 테스트 코드가 생성된 경로
- App.js : App 의 React 코드
- index.js : react-native 모듈과 App.js 를 import 하고 있는 javascript index 파일
- app.json : app version 등을 관리하는 json
- package.json : node 모듈 의존성 관리를 위한 json
실제로 Android, IOS 각각을 위한 Native 코드들이 생성된 것이 확인되네요. 신박합니다. ㅎㅎ
그렇다면 ios 시뮬레이터를 구동해봅시다.
> cd AwesomeProject
> react-native run-ios
시뮬레이터를 보니 뭔가 꽁짜 폰이 하나 더 생긴 듯 기분이 좋습니다. 크ㅇ ㅏ!! 저는 iPhoneX 유저니 IOS 디바이스와 버전을 최신 것으로 변경해봅시다.
> cd ios
> open .
을 입력하면... 아래와 같은 finder 창이 열립니다. AwesomeProject.xcodeproj 를 클릭하면 xcode 에서 ios 프로젝트가 로딩됩니다.
좌측 상단에서 IOS 디바이스를 iPhone X 로 변경하고 다시 빌드 ( 좌측 최상단 > 버튼) 합니다.
iphone X 로 바뀐 시뮬레이터입니다. +______+
App.js 에서 코드를 수정한 후 [Command + R] 를 누르면 시물레이터가 새로고침 되는데요. 매번 단축키로 반영할 필요 없이 코드 수정시 자동으로 반영되도록 Hot Reload 를 설정해 봅시다.
시뮬레이터에서 [Command+D] 를 누르면 Developer Menu 가 아래에서 올라옵니다. Enable Hot Reloading
을 클릭해서 해당 기능을 활성화하고 App.js 코드를 수정해봅시다. 아래 GIF 에서 일련의 과정을 확인하실 수 있습니다.
React Native 로 스마트하게 App 을 개발할 수 있는 기본적인 환경이 구축된 것 같네요.
쉽게 잘 설명해 주시네요^^
댓글 감사합니다 ^^
저에게는 외계어네요 ㅠㅠ 개발자분들 파이팅!!
파이팅 ~ 감사합니다 !! ㅎㅎ
이걸 보니 또 맥을 사고 싶군여 ;; 하지만 맥을 쓸줄 모르는 것과... 반값이면 같은 사양을 살수 있는 노트북으로 어느정도 맘을 먹고 있는지라... ㅠㅠ .. brew 환경은 정말 탐나네요. 얼마나 편할까...
맥북 하나 지르세요 ㅋ
brew 뿐 아니라 개발하기엔 확실히 많이 편해요 처음엔 좀 낯설긴 한데 윈도로 돌아가진 못할 것 같아요 ㅋㅋ
윈도에도 비스무리한게 있다고 들었는데 리눅스 환경도 쓸수 있고... ㅠㅠ 그걸로 해볼까 합니당. 맥은 넘 비싸요 요새... 코인두 막 떨... ㅠㅠ
그래서 저는 맥 중고를 질렀드랬죠~~
재작년에 샀던가... ㅎㅎ 2013년 맥북 13인치 중급형인데..
그당시엔 100만원 정도 였는데~ 지금은 더 싸긴 하겠죠..??
근데.. 너무 좋습니다 아직.. ㅎㅎ
성능도 재미로 개발하는 것들 개발하기엔 전혀 문제가 없네요~ ㅎㅎ
저도 예전에 해킨토시 설치하겠다고 삽질 많이 했었는데 ~ 요즘은 좀 쉬워졌드려나 모르겠네요 ㅋ
지름지름지름...
안드로이드든 iOS든 하나의 소스코드로 올릴 수있다는 장점을 가지고 있긴 하죠 ^^
SNT도 이걸 올려서 개발중입니다. 다만 확실히 네이티브앱보다는 좀 무거워요.
https://github.com/status-im/status-react?files=1
tom333님의 수동보팅머신이 보팅해드립니다.
heejae님의 [700팔로워 기념 이벤트] 미산가 실팔찌 마감 & 추첨 완료! ( 페이아웃 전까지 당첨자분들 연락바랍니다!! )
700팔로워이벤트 때문에 연락드립니다! ㅎㅎㅎ 6번미산가 당첨자분이 연락이 안와서 당첨자변경으로 당첨되셧습니다! 글에 있는 카톡방에 들어와서 주소,연락처,성함 좀 남겨주세요~ ㅎㅎ
@heejae 댓글 남겼습니다!
좋은 이벤트 감사해요 ㅋ 대기순위 당첨이라 더 기쁘네요 ㅋㅋㅋㅋ
web app + android/ios 를 모두 고려한다면 괜찮은 플랫폼이긴 합니다만,
생각보다 수월하진 않더라고요.
어떤 어려움들을 겪으셨나요? 먼저 지나가신 분의 조언은 항상 큰 도움이 된다는 ~
Web app 을 만들어 놓고 모바일로 포팅하는 것을 고려했을때,
개념은 같지만 UI 관련 부분은 재작성 해야 합니다. Learn once write anywhere 라고 하지요.
expo 를 사용하면 ios/android 관련 통합된 환경을 제공하지만, 이 방법이 맞는 건지 잘 모르겠네요^^
그냥 순수한 react native 로 가기에는 부담이 좀 있는 편이고요...
네 ~ 결국 플랫폼 별로 ui optimizing 이 필요하다는 말씀이시군요 잘 참고하겠습니다 ^^
theuxyeti님의 SugarSteem - Final Home Page for Development
오홋!! 오늘 저도 웹개발자인데.. 앱을 만들어보고 싶다는 생각을 많이 했었습니다. 주신 정보를 보고 한번 해봐야겠네요. 감사합니다.
한번 해보세요 !! 일단 재미납니다 ㅋ
짱짱맨 부활!
호출감사합니다
부활감사합니다 !!
저는 네이티브 모바일 앱만 개발해봐서..
웹쪽은 문외한입니다. ㅠ 잘보고 갑니다~
RN 같은 경우에도 네이티브 개발자들이 더 쉽게 적응하신다 하더라구요 ~ 결국은 앱 개발이니까 ㅎㅎ
이거로 뭐 만드실건지 궁금합니다
스팀도 가즈아~!
뭐라도 만들어볼게요 ㅋ
ryh0505님의 [13시40분 시작 ] 받은 만큼 써야지. 캐치마인드 드루와 (상금 1스달)
hersnz님의 불금이다. 퀴즈 가즈아!!!!
shinternational님의 보팅 이벤트 154차 당첨자 발표
tom333님의 수동보팅머신이 보팅해드립니다.
tom333님의 수동보팅머신이 보팅해드립니다.
shinternational님의 보팅 이벤트 155차 당첨자 발표
역시 개발은 어려워.......
+______+
tom333님의 수동보팅머신이 보팅해드립니다.
theuxyeti님의 Sugar Steem - A more personalized Steem UI - MY PROFILE final
shinternational님의 보팅 이벤트 156차 당첨자 발표
tom333님의 수동보팅머신이 보팅해드립니다.
tom333님의 수동보팅머신이 보팅해드립니다.
hersnz님의 토요일 왜들 이리 축쳐져 퀴즈 가즈아 상금 1스달
shinternational님의 보팅 이벤트 157차 당첨자 발표
tom333님의 수동보팅머신이 보팅해드립니다.
tom333님의 수동보팅머신이 보팅해드립니다.
momoggo님의 [이벤트발표] 신청하신 두 분께 배너를 만들어 드립니다~!#8
shinternational님의 보팅 이벤트 158차 당첨자 발표
momoggo님의 [이벤트발표] 신청하신 두 분께 배너를 만들어 드립니다~!#8
tom333님의 수동보팅머신이 보팅해드립니다.
lalaflor님의 #78. 일요일 캐마 ! 상금 1스달 :)
This post received a 65% upvote from @krwhale thanks to @coffeex! For more information, click here!
이 글은 @coffeex님의 소중한 스팀/스팀달러를 지원 받아 65% 보팅 후 작성한 글입니다. 이 글에 대한 자세한 정보를 원하시면, click here!
sjchoi님의 [캐치마인드] 간만에 일요일 저녁 캐마 가즈아!!
thinky님의 무사히 주말을 보내며.. (@thinky 해킹사건 이벤트 마무리)
tom333님의 수동보팅머신이 보팅해드립니다.
sjchoi님의 [캐치마인드] 속죄의 쉬운 캐마 간다! ( feat. @glorias )
tom333님의 수동보팅머신이 보팅해드립니다.
menerva님의 [보상거절] 약속대로 글 보상 SBD 전액 기부했습니다
armdown님의 MB 구속 이벤트 결과 보고입니다 : 스팀잇의 미래는(futrure of steemit)?
tom333님의 수동보팅머신이 보팅해드립니다.
tom333님의 수동보팅머신이 보팅해드립니다.
ryh0505님의 [10시00분 시작 ] 받은 만큼 써야지. 캐치마인드 드루와 (상금 1스달)
tom333님의 수동보팅머신이 보팅해드립니다.
tom333님의 수동보팅머신이 보팅해드립니다.
boddhisattva님의 TOP 200 effective Steemit curators in KR category for the last week (2018.03.26-2018.04.01)
tom333님의 수동보팅머신이 보팅해드립니다.