안녕하세요.
쌩광부입니다.
드디어 쌩광부의 모바일 지갑 만들기 제1강을 시작하겠습니다. 짜잔~~!!
오늘은 본격적인 개발에 앞서 필요한 패키지들을 설치해보겠습니다.
앞으로의 모든 설명은 윈도우 10 (64bit)기반으로 설명하겠습니다.
아무래도 윈도우 유저가 많을테니까요. ^^
빌드하는 것은 일단은 Android 용으로 설명을 하고요.
강좌의 맨 마지막에 iOS에 대해서도 간략하게 설명하도록 하겠습니다.
다들 아시겠지만 아쉽게도 iOS 개발은 Mac에서만 가능합니다.
#1. React Native 설치하기
React Native(이하 RN)를 사용하기 위해서는 NodeJS, JDK,Python2, Android Studo, Android SDK를 설치해야합니다.
좀 많죠? 어쩔 수 없습니다. 우리 개발자들은 이런 수고로움을 견딜 수 있어야 합니다. 죈장 ㅠㅠ
전체적인 설치를 위해서 대략 20GB 이상의 디스크 여유 공간이 필요합니다.
또한 HDD를 사용하신다면 SSD로 교체하실것을 권장합니다.
HDD로 하신다면 아마도 인내심의 한계를 느끼실 것입니다. ㅠㅠ
1-1. NodeJS 설치
RN을 사용하기 위해서는 우선 NodeJS를 설치하여야 합니다.
간단하게 NodeJS 홈페이지에서 설치 파일을 다운받을 수 있습니다.
설치 과정은 Next, Next, Next .... Finish하면 됩니다.
https://nodejs.org/ko
현재 NodeJS 10.13.0 LTS 버전이 올라와 있는데요.
NodeJS가 버전이 다양한데요. 간혹 빌드할때 버전 충돌이 날수도 있습니다.
그래서 저는 8.12.0 버전을 사용하기도 합니다.
오픈소스로 되어 있는 것들은 제작자가 각자 다 틀리기 때문에 호환성이 완벽하다고 볼수는 없습니다.
항상 버전 충돌에 대비해야합니다. 신버전 나왔다고 무턱대고 업데이트하시면 큰코 다치는 수가 있습니다.
여기서 잠깐!
오픈소스를 대하는 우리의 자세
하나! 오픈소스는 내려받아 사용하는 사람에게 그 책임이 있다.
하나! 어떤 문제가 있어도 절대로 오픈소스를 올린 사람을 욕하지 말자.
하나! 오픈소스로 공개해준것에 감사하자.
하나! 오픈소스는 절대로 완벽하고 볼 수 없다. 언제든 버그가 나올 수 있다.
1-2. JDK 설치
JDK는 Java 개발 도구인데요.
NodeJS에서도 사용하고 Android Studio에서도 필수로 사용됩니다.
Java SE Development Kit 8u191를 설치합니다.
원래 최신 버전은 11이지만 저는 8을 설치했습니다.
Accept License Agreement를 체크하시고 dk-8u191-windows-x64.exe을 클릭하여 다운로드할 수 있습니다.
설치 과정은 Next, Next, Next .... Finish, Close하면 됩니다.
중간에 Java 저작권에 관한 내용이 나오는데 확인 누르면 됩니다.
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
1-3. Python 2 설치
RN이 Python2를 사용한다고하니 저희는 Python 2.7.15버전을 다운로드하여 설치합니다.
설치 과정은 Next, Next, Next .... Finish하면 됩니다.
https://www.python.org/downloads/
헉헉~~ 숨차시죠?
아직 갈길이 멀어요.
1-4. Android Studio 및 Android SDK 설치하기
모바일 빌드와 디버깅을 위해 Android Studio와 Android SDK를 설치합니다.
Android Studio를 설치하게 되면 Android SDK 설치는 손쉽게 할수 있습니다.
아래 경로에서 다운받을 수 있습니다.
약관 동의 알아서 하시고요.
설치 과정은 마찬가지로 Next, Next, Next .... 하면 됩니다.
맨 마지막에 Start Android Studio가 체크된 상태로 Finish를 하시면 되겠네요.
https://developer.android.com/studio/?hl=ko
그 다음 나오는 Import Studio settings from 은 Do not import settings가 체크되어 있는 상태로 OK 버튼을 누릅니다.
기본 설정값을 읽어오겠냐는 것인데 처음 설치한 경우 Do not import settings로 하면 되겠죠.
그러고 나면 Android Studio가 실행됩니다.
잠시 자동으로 다운로드를 하게되고요.
Android Studio Setup Wizard가 실행됩니다.
기본값으로 하시고 Next, Next ... Finish 하시면 되지만 Select UI Theme에서 저는 Darcula를 선택합니다.
저는 검정 화면을 좋아하니까요. ^^. 아마 많은 프로그래머 분들이 검정화면을 선택할듯 하네요.
이후 정말 오랜 시간 동안 자동으로 다운로드와 설치가 반복됩니다.
Android SDK가 설치되는 과정이지요.
담배 피우시는 분들은 한대 피우고 오셔도됩니다.
SDK 설치가 완료되면 프로젝트 선택창이 나오는데요.
Start a new Android Studio Project를 클릭합니다.
이후 Next, Next ... Finish 클릭하시면 됩니다.
사실 이 과정은 중요한 과정은 아닙니다만 저희가 필요로 하는 안드로이드 가상 장치를 실행하기 위해서 아무 프로젝트나 만드는 것입니다.
물론 이렇게 하지 않아도 되긴 하지만 저희는 배우는 입장이니까 그냥 그렇게 하시면 편합니다.
이제 Android Studio 우측 상단에 AVD Manager 버튼을 클릭합니다.
Create Virtual Device를 클릭합니다.
거기서 적절한 가상 장치를 선택하면 되는데 기본으로 선택되어 있는 Nexus 5X를 선택하고 Next
그 다음 안드로이드 운영체제는 가장 최신버전인 Pie를 선택하고 Next버튼을 누릅니다.
만약 가상 머신의 시스템 이미지가 다운로드 되지 않았다면 Download 링크가 보여지는대 그것을 클릭해 다운로드하시면 됩니다.
생각보다 용량도 크고 시간도 오래 걸립니다. 인내심이 필요합니다. ㅠㅠ
그러고 나면 가상 장치가 생성되는데요.
우측에 실행버튼(삼각형)을 클릭하여 가장 장치를 실행합니다.
이때도 시간이 좀 소요됩니다. 가상 장치를 새로 설치하는 과정입니다.
이 과정이 끝나고 나면 멋지구리한 화면이 나옵니다.
두둥~~
저는 성능 관계상 다른 버전의 OS를 설치했습니다.
자 이제 저희는 안드로이드 폰이 없어도 가상 장치로 안드로이드 개발이 가능합니다.
앞으로의 강의에서 앱을 실행시킨다 라고 하면 이것을 미리 실행시켜놓아야 합니다.
아마도 앱 개발 과정에서는 항상 가상 장치를 화면에 띠우고 하셔야 될것 같네요.
그래야 바로 바로 테스트해볼수 있을테니까요. ^^
이 화면이 떠있는 상태에서 다음 설치를 진행합니다.
1-5. ANDROID_HOME 환경변수 등록
제어판>시스템 및 보안>시스템>고급 시스템 설정>고급>환경변수
화면을 열어서 시스템 변수를 추가합니다.
시스템 변수에서 새로 만들기를 눌러 아래 항목을 추가합니다.
ANDROID_HOME
c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
위에 YOUR_USERNAME은 자신의 컴퓨터 계정입니다.
정확한 위치를 모르면 디렉터리 찾아보기를 눌러서 찾을 수 있습니다.
아시겠지만 AppData 폴더가 숨긴 폴더이기 때문에 탐색기 메뉴에서 숨긴 폴더 및 파일 보기 옵션을 활성화하여만 표시됩니다.
왜 그딴곳에 SDK를 설치하는지는 모르겠네요. 찾기 힘들게 시리..
1-6. React Native 설치하기
드디어 RN을 만나보겠습니다.
앞으로는 그래픽하나 없는 Command 모드에서 진행하게 됩니다.
윈도우 Command(명령 프롬프트) 모드를 실행시키세요.
명령 프롬프트 모드 실행방법을 모르신다면 아래 링크를 추천합니다.
시원한 설현님이 기다리고 계십니다.
http://editorizer.tistory.com/200
Command 모드에서 react-native-cli를 설치합니다.
NodeJS를 설치하면 NPM(Node Package Manager)이 자동으로 설치되는데요.
그 NPM을 이용해 RN을 설치하는 과정입니다.
여기서 부터 주의사항!!
앞으로 모든 강좌에서 별도로 설명하지 않으면 모두 Command 모드입니다.
또한 JS 하시는 분들은 다 아시겠지만 대소문자 꼭 맞춰야 합니다.
C:\Users\YOUR_USERNAME> npm install -g react-native-cli
이제 RN 설치가 완료되었습니다.
결국 위에 사전 설치파일이 많고 과정이 복잡할 뿐 실제 RN 설치는 몇 초도 안걸립니다.
완전 허무하지만 그게 다 오픈소스의 힘(?)입니다.
자.. 이로서 RN을 사용하기 위한 설치작업이 모두 완료되었고요.
간단하게 RN으로 샘플앱을 만들어봅시다.
C:\Users\YOUR_USERNAME> react-native init SampleProject
위와 같이 입력하면 뭔가 한참 설치를 합니다.
바로 SampleProject를 위해 필요한 파일들을 자동으로 다운로드하여 설정합니다.
완료되면 SampleProject라는 폴더가 생성되며 그 아래 자동으로 프로젝트를 생성해줍니다.
한번 확인해볼까요?
C:\Users\YOUR_USERNAME> cd SampleProject
C:\Users\YOUR_USERNAME\SampleProject> dir
2018-11-13 오전 01:35 <DIR> .
2018-11-13 오전 01:35 <DIR> ..
2018-11-13 오전 01:34 60 .babelrc
2018-11-13 오전 01:34 114 .buckconfig
2018-11-13 오전 01:34 2,307 .flowconfig
2018-11-13 오전 01:34 16 .gitattributes
2018-11-13 오전 01:34 793 .gitignore
2018-11-13 오전 01:34 2 .watchmanconfig
2018-11-13 오전 01:39 <DIR> android
2018-11-13 오전 01:34 1,126 App.js
2018-11-13 오전 01:34 63 app.json
2018-11-13 오전 01:34 179 index.js
2018-11-13 오전 01:34 <DIR> ios
2018-11-13 오전 01:35 <DIR> node_modules
2018-11-13 오전 01:35 383,824 package-lock.json
2018-11-13 오전 01:35 493 package.json
위와 같이 android, ios 관련 파일을 포함해 필요한 모든 파일을 자동으로 생성해줍니다.
이제 위에 설명한 안드로이드 가상 장치를 뛰웁니다. (이미 실행되어 있다면 패쓰~~)
그리고 아래와 같이 입력하면 방금 만든 SampleProject를 실행해볼수 있습니다.
C:\Users\YOUR_USERNAME> react-native run-android
물론 아무런 코딩도 하지 않았기 때문에 하얀 화면에 간단한 텍스트만 나오겠죠.
이렇게 해서 첫번째 강좌를 마치도록 하겠습니다.
궁금하신 사항은 댓글로 물어봐 주시고요.
다음 강좌에서는 본격적으로 RN 코딩에 들어가도록 하겠습니다.
참고로 RN 코딩을 위해서 메모장을 사용하셔도 되지만 좀더 편한 개발전용 편집기를 사용하시면 좋겠죠.
Atom이나 Visual Studio Code를 추천합니다.
https://atom.io/
https://code.visualstudio.com/
그럼 다음 강좌 기대해주세요. ^^
