티스토리 뷰
안녕하세요. 오틸라 입니다.
에.... 이번에 리액트 네이티브를 시작해보려 합니다.
프로젝트명 "힐링" 이라는 앱과, 웹을 하나 만들려고 계획중인데, 그 프로젝트를 이번에는 리액트JS & 리액트 네이티브로 만들려고 생각하거든요.
웹사이트, Android, IOS 모두 다 돌아가게 하려고 고민하다보니, 페이스북이 보장하고 있는(?) react-native로 결정했습니다.
물론!!!
이 부분은 하나도 모릅니다 ㅋㅋ
뭐 그래도, 그놈이 그놈이겠지요....
한번 시작해 봅시다!!!!
나와 같이 리액트 네이티브를 시작해봅시다 ^^;
흔히, 리액트 네이티브를 시작하려면, IOS체제인 맥에서 설정들을 하시던데,
저는 windows에서 설정할 수 있도록 해봅니다.
1. 리액트 네이티브 홈페이지로 간다.
https://facebook.github.io/react-native/
Get Started를 누르면,
Quick Start와 Building Projects with Native Code 가 있는데,
우리는 Building Projects with Native Code로 하겠습니다.
(2017년 11월 현재, React Native버전은 0.49입니다.)
윈도우에서 할꺼니까 당연히
OS는 Windows이고, Target은 Android입니다.
IOS하고 싶으면 맥에서 하시면 됩니다 ^^;
우리는 Windows의 Android입니다.
일단 설명을 보니, Node, Python2, JDK가 필요하다고 하네요.
아...그전에
안드로이드 스튜디오를 사용하려면,
JDK 깔고, 환경변수 설정하고, 안드로이드 스튜디오 깔고...뭐 이러한 일련의 과정이 있습니다.
그것은 강좌가 인터넷에 많이 있으니, JDK는 깔고 오세요.
URL은 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 입니다.
물론, 현재 페이지에서
chocolatey를 다운받으면 이거 다 설치해줍니다. ㅎㅎ
위의 링크를 클릭하시면 chocolatey 홈페이지로 이동해서 Install Chocolatey Now버튼을 클릭하시면 됩니다.
또다른 방법으로 cmd창에서 바로 설치하는 방법도 안내하고 있는데요.
우리는 이 방법을 사용해볼까 합니다.
왜냐!
react-native에서는 cmd창을 좀 많이 써야 할거 같거든요.
익숙해졋야 IOS 버전에서도 커맨드창을 좀 잘 쓰겠죠?
자 위 명령어를 복사하셔서
cmd창을 엽니다.
윈도우 바탕화면에서 Shift를 누르고 마우스 우클릭을 하시면
여기서 명령창 열기가 있습니다.
필요한 디렉토리로 이동 안해줘도 되니, 간편한 방법입니다.
그럼 cmd를 엽니다.
그리고, 아까 복사한 명렁을 붙여서 실행해 줍니다.
여기까지 하셧으면,
기본적으로 node깔리고, python2깔리고, JDK깔리고, npm도 깔렸을 겁니다.
npm이 뭐냐구요?
아 react native실행하는놈입니다. ;;;;; 거기까지만 알아둡시다!
node는 뭐고? python2는 뭐냐구요?
음...
이거 궁금하면 안되는데...
그냥, 개발언어이고....더 간단히하면..... react native 하는 놈입니다 ;;;; 거기까지만 알아둡시다!!
자 이제 react native 설치를 시작합니다.
위 화면에서처럼 npm install -g react-native-cli를 cmd창에서 실행해줍니다.
실제 react-native에 필요한 파일들은
사용자\Appdata\Roaming\npm 이라는 폴더에 깔리게 됩니다.
그냥 npm install만 쳐버리면, cmd가 열려있는 디렉토리에 바로 설치하게 되고,
npm install -g 를 붙이면, 사용자\Appdata\Roaming\npm 폴더에 설치하게 됩니다.
복잡한가요?
그냥 npm install -g react-native-cli 만 입력해요 그럼 ;;;
자, 그럼 기본적인거 다 깔렸고, 안드로이드 스튜디오 설치합니다.
마찬가지로 react-native 홈페이지에 링크 있으니 클릭해주시면 됩니다.
저 같은 경우는 아래와 같이 기존께 있는데 삭제하고 설치할꺼냐?를 묻습니다.
음...
저는 안드로이드 앱을 개발중에 있어서 기존게 설치되어 있죠. 2.3.3 이었습니다.
왠만하면 업데이트 안하고 싶지만
3.0으로 버전이 크게 바뀌었네요.
그래서 내친김에 한번 바꿔봅니다.
(여담입니다만, 요즘 오픈소스나, 오픈API등등 거의 모든것들이 버전이 워낙에 자주 바껴서 괜시리 업데이트 잘못하거나, 또한 오랫동안 업데이트를 안하거나 하면, 뻑하면 deprecate니 어쩌니 하면서 실행안됩니다.
그래서 안드로이드 계열은 자주 안하면 금방 오류가 잘 납니다 ;;;;)
환경설정 파일은 이전꺼 쓸거냐 물어보네요.
마찬가지로 처음 설치하시는분은 이런거 안나옵니다.
오, 실행해보니 메인로고도 바뀌고, UI도 좀 바꼈네요.
성능도 많이 괜찮아 졌으면 좋겠습니다.
또 여담입니다만,
예전에 이클립스 시절부터, 안드로이드 스튜디오 1버전때 초창기에는
AVD 즉, 가상 에뮬레이터가 겁나게 느렸거든요.
디버깅 한번할려면 세월아 네월아~~~
그래서 대체용으로 지니모션이라던가, 녹스라던가....다른 에뮬레이터를 많이 쓰셨는데...
뭐 요즘은 AVD도 성능이 꽤 좋아지고 빨라져서 가끔씩 쓰는편인데 큰 부담없네요. 좋아졌어요 ^^
아..
계속해서
react-native 홈페이지를 계속 내리시면서 보시면
안드로이드 스튜디오를 설치한 이후에 몇가지 install할게 있습니다.
아래 그림처럼 화면 상단에 sdk manager를 클릭합니다.
먼저 SDK Platform쪽에서 제가 선택해놓은것들을 install합니다.
저는 기존에 설치되어있던게 있어서 installed랑 update available이라고 뜨는것도 있지만,
신규로 설치하시는 분들은 모두 not installed 라고 나올겁니다.
모두 선택해서 apply눌러 설치합니다. ok눌러 설치해도 됩니다만 창 닫힙니다.
다음은 SDK Tools탭에서 제가 선택한 부분을 체크해서 설치합니다.
이제 거의 다 왔습니다. 힘내세요!!!
다시 react-native홈페이지로 돌아가봅니다.
이제 가상머신을 실행해서 최초의 프로젝트를 실행해보는 단계까지 왔습니다.
드디어,
개발자의 첫관문
Hello World의 막이 열리는 순간이죠!
(지겨워요 Hello World)
저는 아래와 같이
안드로이드 스튜디오를 3.0으로 바꾸니, gradle을 업데이트해라
Build Tool을 업그레이드해라...말이 많네요
이런거 업데이트 잘못하면 예전 안드로이드 소스 안돌아가는 경우가 많은데 ㅋㅋ
아..싫어요 업데이트!!!
뭐 일단 전부다 설치해줍니다.
어쨌든, 안드로이드 스튜디오로 돌아와서
아까 상단 메뉴에 SDK Manager 있던곳에서 왼족으로 두칸만 보시면, AVD Manager라고 있습니다.
그걸 누르면, Your Virtual Devices창이 뜹니다.
저같은 경우는 테스트를 위해 3개를 미리 만들어둔게 뜨는데,
처음 설치하시면 하나도 없을 겁니다.
팝업창 하단에 Create Virtual Device를 눌러 하나 만들어 줍니다.
이때, API Level26을 골라서 만들어 주세요.
저 같은 경우는 API Level 27 에뮬레이터를 실행해서 동작시켜봤더니
각종 에러가 막 뜨면서 안됩니다.
이게 안드로이드 스튜디오 업그레이드 해서 그런가 놀래서
개발중인 프로그램 하나 돌려봅니다.
"바다낚시 올블루" 입니다. (PPL!!)
잘 돌아가네요.
그럼 안드로이드 스튜디오는 문제가 없는데 왜 안되느냐!
제가 아까 API Level 26으로 만들라고 했죠?
그래서 저도 다시 API Level 26 에뮬레이터를 돌립니다.
일단 에뮬레이터를 실행하신 후에
명령창으로 돌아갑니다.
react-native init AgmProject라고 저는 명령창에 입력했습니다.
이제 바탕화면에 AgmProject라고 폴더가 만들어지고 프로젝트 파일이 만들어집니다.
다음 cd AgmProject 라고 입력해서 폴더로 이동한 다음
react-native run-android를 입력해서 실행해줍니다.
아까와는 다르게 새로운 cmd창이 열리면서 node가 돌아가고....
에뮬레이터상에 AgmProject라는 아이콘이 생겼네요.
클릭해봅시다!!!
react-native 홈페이지에 있는 그 화면이 드디어 실행이 됐네요.
다시 홈페이지로 돌아와 보니,
"index.js파일을 열어서 내용을 수정하고, 에뮬레이터상에서 R키를 두번 파팍! 눌러주면 새로고친내용을 볼수 있을거다"라고 하네요.
index.js파일 열었는데, 아무것도 없네요;;;;;;;
뭐 이런식이에요!
뭔가 기능을 바꿨거나, 업데이트가 되었거나 하면 말이죠! 메뉴얼도 업데이트를 해주던가!
홈페이지 리뉴얼도 자주하고, 기능도 자주 변경하면서
메뉴얼은 빨리빨리 안 고쳐준단 말이죠!
그래서 사람들이 홈페이지에서 가르쳐준대로 설치를 해도 항상 에러가 나고 안깔린단 말이에요!!!!
더 웃긴건 뭔지 아세요?
공식 홈페이지 설명에는 index.js를 수정하라고 하죠!
근데 실행된 앱화면 캡쳐에는 index.android.js를 수정하라고 합니다!
가장 충격적인건
제가 설치한 화면을 보시면, App.js 파일을 수정하라고 나옵니다.
으흐흐흐
멋지죠?
결론은 App.js입니다 ;;;;
App.js파일을 열어보니, Welcome 어쩌고가 이제 보이네요 ㅠㅠ
Hello World 지겨우니, Hello AgmProject라고 합시다. (그게 그건가...)
그리고, 에뮬레이터 화면에서 R버튼을 두번 따닥! 눌러주면 화면이 변환됩니다.
자!
이렇게 Windows에서 react-native 개발을 위한 환경구축이 완료 되었습니다.
다음번엔 저도 뭔가를 또 만들어 나가면서 같이 만들기를 해봐요~~~
이상 오틸라였습니다.
건강하세요.
