traders_free custom_top_html:no
default debug random = 0 / type = READ / detected = READ

안녕하세요.

쌩광부입니다.

 

드디어 쌩광부의 모바일 지갑 만들기 제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

 

DownloadNodeJS.png

 

현재 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

 

DownloadJDK.png

 

1-3. Python 2 설치

 

RN이 Python2를 사용한다고하니 저희는 Python 2.7.15버전을 다운로드하여 설치합니다.

설치 과정은 Next, Next, Next .... Finish하면 됩니다.

 

https://www.python.org/downloads/

 

InstallPython2.png

 

InstallPython2_2.png

 

헉헉~~ 숨차시죠?

아직 갈길이 멀어요.

 

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

 

DownloadAdk.png

 

 

그 다음 나오는 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 버튼을 클릭합니다.

 

ClickAVD.png

 

Create Virtual Device를 클릭합니다.

거기서 적절한 가상 장치를 선택하면 되는데 기본으로 선택되어 있는 Nexus 5X를 선택하고 Next

그 다음 안드로이드 운영체제는 가장 최신버전인 Pie를 선택하고 Next버튼을 누릅니다.

만약 가상 머신의 시스템 이미지가 다운로드 되지 않았다면 Download 링크가 보여지는대 그것을 클릭해 다운로드하시면 됩니다.

생각보다 용량도 크고 시간도 오래 걸립니다. 인내심이 필요합니다. ㅠㅠ

 

그러고 나면 가상 장치가 생성되는데요.

우측에 실행버튼(삼각형)을 클릭하여 가장 장치를 실행합니다.

이때도 시간이 좀 소요됩니다. 가상 장치를 새로 설치하는 과정입니다.

이 과정이 끝나고 나면 멋지구리한 화면이 나옵니다.

두둥~~

 

AVDScreen.png

 

저는 성능 관계상 다른 버전의 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

 

AVDScreen2.png

 

물론 아무런 코딩도 하지 않았기 때문에 하얀 화면에 간단한 텍스트만 나오겠죠.

 

이렇게 해서 첫번째 강좌를 마치도록 하겠습니다.

궁금하신 사항은 댓글로 물어봐 주시고요.

 

다음 강좌에서는 본격적으로 RN 코딩에 들어가도록 하겠습니다.

 

참고로 RN 코딩을 위해서 메모장을 사용하셔도 되지만 좀더 편한 개발전용 편집기를 사용하시면 좋겠죠.

Atom이나 Visual Studio Code를 추천합니다.

https://atom.io/

https://code.visualstudio.com/

 

그럼 다음 강좌 기대해주세요. ^^


[알림: 이 게시글은 관리자에 의해 ''에서 '트레이더스'로 이동되었습니다]
31,274

쌩광부님의 서명

댓글 35
default debug random = 0 / type = READ / detected = READ

List of Articles
번호 제목 추천 수 조회 수 글쓴이 날짜
22538 KBS 파노라마 비트코인 가상화폐의 도전   국가가 그 나라 법정화폐를 보장한다고 하지만 아르헨티나 처럼 국가가 엉망상태가 되면 국가가 발행한 화폐는 누가 보장해줄 수 있습니까? 다시 말하면, 법정화폐는 국가가 보장해주지만 그 국가는 누가 보장해줍... 42 file 30 9977
비초이
2017.12.31
22537 사토시 나카모토의 철학. 니들이 지금 맘대로 해봐라~~~   https://trustcoinmining.com/bbs/board.php?bo_table=notice&amp;wr_id=8   -------------- 비트코인의 철학에 대한 고려.   내가 생각하는 비트코인, 블록체인 철학.   비트코인의 철학을 이해 함에 있어서는 가... 13 30 6916
안씨아저씨
2017.12.16
22536 누가 이번 주말 사태를 이렇게 해석을 했네요. 상당히 조리있게 내용을 써서 공감이 가는 부분이 많습니다.    https://coinpan.com/free/13302768   http://snulife.com/best/123045512   lunatik 님       비트코인 캐시 사태 분석글입니다.   11월 12일 비트코... 33 30 13083
초보초보
2017.11.14
22535 튤립과 코인이 다른점 20가지 언론과 인터넷에 자꾸 코인과 튤립 버블을 비슷하다고 말씀하시는 분들이 많아 한번 진지하게 비교해보았습니다. 과연 지금 코인이 튤립 버블과 비슷할까요?  아래 내용은 지극히 개인적인 생각입니다. 제가 잘못 알... 21 30 8943
여수
2017.09.17
22534 가두리의 예시 어떤 돈 많은 고래가 있다고 치죠.   #1 22만원에 1만이더 매수 주문을 넣어놓고 23만원에 1만이더 매도 주문을 넣어 놓습니다. 다른 개미 매수자들은 이 1만이더 매수주문을 보고 &quot;아 22만 아래로는 못 내려오겠구나... 50 30 9242
꿀맨
2017.07.15
22533 지금 많이들 하실법한 생각... *** 답변 댓글이 있을 때 글 내용 삭제시 경고 없이 계정이 정지됩니다. *** *** 개인정보가 포함된 경우 혹은 불법적인 요소의 수정은 가능합니다.*** -----------------------------------------------------------... 45 file 30 11048
채굴가즈아
2017.07.11
[강좌] 쌩광부의 모바일 지갑 만들기 #1. React Native 설치하기 안녕하세요. 쌩광부입니다.   드디어 쌩광부의 모바일 지갑 만들기 제1강을 시작하겠습니다. 짜잔~~!! 오늘은 본격적인 개발에 앞서 필요한 패키지들을 설치해보겠습니다.   앞으로의 모든 설명은 윈도우 10 (64bit)... 35 file 29 2721
쌩광부
2018.11.13
22531 코인 트레이딩 해서 계좌에 1억 만드는 방법.     2억으로 시작한다.             ------------------------------------- 꼬리말 * 게시글 내용 삭제시 레벨 강등 * 질문은 각 주제별 게시판에.   비트코인 암호화화폐 커뮤니티 땡글~ 땡글~ -------------------... 38 29 7795
그리움
2018.02.10
22530 기대와는 다른 실명제 시행   오늘 농협에 입출금 통장을 개설하기 위해 갔습니다. 코인원이 농협이기 때문이죠   허나 굉장히 까다롭고 급여이체를 동반한 통장개설이 아닌이상은 현실적으로 입출금 통장개설이 않된다고봐야합니다. 은연중에 ... 68 29 9638
아주공갈염
2018.01.29
22529 이더리움 확장성 진수! 거래소 없는 거래소<카이버네트워크>가시화~! 작성자 삭제  29 29 8687
Mr앤더슨
2018.01.27
22528 아이오타가 왜 타 거래소에 상장안되는지 그이유를 조금 알것같습니다. 반갑습니다 회원여러분 코인 매매를 시작한지 1년도 안된 코린이입니다. 코인원에서 아이오타를 매매해오다 최근에서야 출금이 허용되어서 월렛도 첨으로 만들어보고 설렌 맘으로 출금신청을 했습니다. 땡글 눈팅으로... 20 file 29 14424
구현
2018.01.20
22527 이 정부는 코인시장 공공의 적인 듯. 앞으로 들릴 비명 소리는 자기들 몫이 아니겠지   법무부 장관의, 조율되지도 않은 기자간담회에서 던진 거래소 폐쇄 말 한마디가 결국 금감위의 추임새, 여기 저기 소스도 없이 받아 적은 기사들 덕에 오늘의 폭락장까지 이어졌네요.   이 정부 관계자들은 좋겠네... 11 29 3509
leftsword
2018.01.16
22526 쓰레기코인들이 승승장구하네요 비캐에 이어서 아인슈타이늄, 이제는 리플까지 ㅋ 현대차+포스코+네이버 주식을 다 팔아도 리플을 다 못사네요 ㅋㅋ 리플은 그냥 사기업이 발행하는 도토리 2세대 같은 건데 이게 무슨 투자가치가 있는지 설명 해주실... 89 29 10967
올로파놀
2018.01.02
22525 [가상화폐 직불 카드 비교] 센트라, 모나코, 텐엑스(페이) 비교- 무엇이 가장 우월한가?   최근에 가상화폐 직불 카드 브랜드가 많이 나오고 있는 추세인데요. 그래서 최근 뜨고 있는 암호화폐, 가상화폐 직불 카드 브랜드를 비교해보는 글을 작성해보았습니다. 제 주관이 많이 들어있는 만큼 이해하고 읽... 13 file 29 15549
조ᆞ
2017.12.24
22524 2017년 암호화폐시장은 어디로 향하고 있는가 (상)   다른 커뮤니티에 한번 올린 글인데 땡글에도 한번 보시라고 올립니다.     쓰다보니 길어져서 상/하로 나눠 올리겠습니다. 편의상 존칭은 생략하겠습니다. 상편 1. 2017년에는 무슨 일이 있었나 2. 고평가된 알트코... 35 29 13931
김냐옹
2017.10.13
22523 BCC는 우지한이 공짜로 주는 선물이 아닙니다. *** 답변 댓글이 있을 때 글 내용 삭제시 경고 없이 계정이 정지됩니다. *** *** 개인정보가 포함된 경우 혹은 불법적인 요소의 수정은 가능합니다.*** -----------------------------------------------------------... 27 29 20147
하루.
2017.07.24
22522 해커들이 네이버로 빗썸 해킹하는 방법 1. 네이버 전자화폐 관련 카페에서 사냥감을 찾는다.  - 타겟찾는법 : 글 쓴사람 아이디 클릭해서 블로그 들어가보면 전체 아이디가 노출되는데 아이디가 abcd 라면 해당 타겟의 이메일은 abcd@naver.com 이다.   2. ... 44 29 39014
침팬치
2017.06.22
22521 미스트지갑에서 DAO 컨트랙과 토큰 보기(사용하기) THE DAO 코인 구매는 미스트 지갑에서 DAO 컨트랙 주소로 이더를 보내면 됩니다. DAO  컨트랙 주소: 0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413 보낼 때 절대로 거래소 지갑은 사용하지 말아주세요. 거래소에서 별... 24 file 29 10878
atomrigs
2016.05.02
22520 한국 코린이 트레이더들이 알기 어려운 사실 한가지. 코인시장은 대부분 비트코인으로 결제를 합니다. 유독 한국시장에서만 KRW 원화로 결제를할 뿐입니다.     그래서 한국시장에서는,  비트코인이냐 알트코인이냐? 선택의 기로에 서지만...   해외 시장에서는  비트코... 21 28 4691
불바다
2019.06.17
22519 3칸의법칙 전제&gt;   - 주식시장: 소문에 사서 뉴스에 팔아라                       소문에 팔고 뉴스가 터지면 사라   - 암호화폐: 소문에 사고 뉴스에 더산다.                       FUD에 팔고 뉴스에 마저 판다.   그냥 재... 44 file 28 1883
굿터치
2018.12.04
목록
Board Pagination Prev 1 ... 5 6 7 8 9 10 11 12 13 14 ... 1136 Next
/ 1136
default debug random = 0 / type = READ / detected = READ