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

안녕하세요.

쌩광부입니다.

 

오늘부터 본격적인 코딩을 시작하도록 하겠습니다.

React Native(이하 RN)를 하나 하나 알려드릴 수는 없는 관계로 일단 바로 실전 코딩에 들어가겠습니다.

코딩을 하면서 필요한 사항들은 그때 그때 설명할테니 걱정 붙들어 매시고요.

 

앞으로 작성되는 소스는 https://github.com/topmining/topwallet 에서 다운받을 수 있습니다.

 

#2. Navigation 만들기

 

Navigation은 각각의 페이지간 이동을 관리하는 것을 의미합니다.

앱을 만들때 가장 우선 설계를 해야되는것이 이 Navigation입니다.

 

이제 본격적인 새로운 프로젝트를 생성합니다.

우리가 만들 지갑의 이름을 일단은 topwallet으로 하겠습니다.

 

C:\Users\YOUR_USERNAME> react-native init topwallet

 

Navigation은 직접 제작해도 되겠지만 저희는 미리 만들어져 있는 react-navigation 이라는 패키지를 사용합니다.

기존에 제공되는 패키지를 생성하기 위해서 NPM(Node Package Manager)을 이용합니다. 

 

C:\Users\YOUR_USERNAME> cd topwallet

C:\Users\YOUR_USERNAME\topwallet> npm --save install react-navigation

 

react-navigation가 정상적으로 설치되었을 것이고요.

 

자.. 그럼 이제 코딩에 들어갑니다.

 

먼저 index.js 파일을 보겠습니다.

 

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';

 

AppRegistry.registerComponent(appName, () => App);

 

위와 같은 내용이 있을 텐데요.

app.json 파일에 name을 appName으로 해서 Component로 등록한다 라고 생각하시면 됩니다.

그리고 그 Component는 App(확장자가 없으면 .js가 붙었다고 보면됨) 파일을 참조한다는 것이고요.

앞으로 이 파일은 전혀 손댈 필요가 없습니다.

 

다음 App.js 파일을 보겠습니다.

본격적인 앱의 시작이 App.js라고 보시면됩니다.

 

import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View} from 'react-native';

...

 

위와 같이 되어 있을텐데요.

다짜고짜 그냥 싹 지우고 아래와 같이 코딩합니다.

 

import React from 'react';

import { createStackNavigator } from 'react-navigation';

 

import WelcomeScreen from './src/screen/welcome';

 

const App = createStackNavigator({

  Welcome: { screen: WelcomeScreen },

},

{

  initialRouteName: "Welcome",

  cardStyle: { backgroundColor: '#FFFFFF' },

});

 

export default App;

 

첫번째 줄 import React from 'react'은 react 패키지를 읽어오는 것입니다.

import라는 명령어가 나오면 패키지를 읽어온다고 생각하시면 됩니다.

대부분 소스코드 파일 서두에서는 위와 같이 필요한 패키지를 읽어옵니다.

react 패키지를 읽어 React라는 오브젝트로 할당한다라고 말할 수 있겠네요.

저희는 RN을 이용하기 때문에 react를 필수적으로 읽어와야 합니다.

 

두번째 줄 import { createStackNavigator } from 'react-navigation'은 위에서 설치한 react-navigation을 읽고 그안에 createStackNavigator라는 오브젝트를 불러오는 것입니다.

위에 react를 불러오는것과 틀리게 { }를 사용하게 되면 그 패키지의 특정 오브젝트만 불러올때 이용합니다.

저희는 이 파일에서는 createStackNavigator만 사용합니다.

 

방금 설명한 내용은 NodeJS의 문법이라 더 상세한 설명은 NodeJS를 참고해주세요.

 

그 다음줄에 보시면 './src/screen/welcome'을 읽어들이라는 것인데요.

그렇습니다.

지금 저희는 Welcome 화면(초기 화면)을 만들려고 하는것이죠.

 

그 다음 줄에는 createStackNavigator 패키지를 이용해 Navigation에 등록하는 과정입니다.

앞으로 저희가 페이지 하나 하나 만들때 마다 여기에 등록을 해줘야 합니다.

그래야 페이지간에 왔다 갔다 이동이 가능합니다.

자세한 설명은 아래 링크를 참고해 주세요.

https://reactnavigation.org/docs/en/stack-navigator.html

 

지금은 뭐가 뭔지 하나도 모르시겠지만 그냥 따라하시면 됩니다.

제가 강의 스타일이 처음에는 무작정 따라하자 입니다.

하나 하나 설명하는 것도 좋지만 따라하다 보면 나중에는 자연스럽게 '아 이게 이런 기능이구나!'하고 알게된다는 거죠.

 

Welcome: { screen: WelcomeScreen },

WelcomeScreen을 Walcome이라는 이름으로 등록한것이고요.

 

initialRouteName: "Welcome",

맨 첫 화면이 Welcome이라는 겁니다.

 

cardStyle: { backgroundColor: '#FFFFFF' },

배경화면은 하얀색으로 지정한것이고요.

 

export default App;

최종적으로 지금 만든 Component를 Export한다라고 이해하시면 되겠습니다.

Export...

직역하면 내보낸다인데요. 무엇 무엇을 정의한다의 의미입니다.

이 내용은 JS 문법이라 자세한 내용은 아래 링크를 참고하세요.

http://beomy.tistory.com/22

 

지금까지 제 설명에 보시면 Component(컨포넌트)라는 말이 자주 나오는데요.

앱 화면에 보이는 모든 것이 다 컨포넌트입니다.

버튼, 텍스트, 이미지 이런 모든 것을 통칭해서 컨포넌트라고 부르고 결국 앱은 이런 컨포넌트들의 조합이라고 보시면 되겠습니다.

이런 구조는 대부분의 프로그래밍이 다 그렇죠.

 

여기까지는 Navigation을 만드는 방법을 설명했는데요.

react-navigation라는 패키지가 있기 때문에 아주 편리하게 몇줄 안쓰고 Navigation을 만든것입니다.

앞으로도 저희는 여러가지 기본 패키지들을 추가적으로 사용할 것이고요.

 

그럼 이제 WelcomeScreen을 만들어 보겠습니다.

welcome.js 파일을 ./src/screen 폴더 안에 만듭니다.

그리고 아래와 같이 코딩합니다.

 

import React, { Component } from 'react';

import { View, Image } from 'react-native';

 

class WelcomeScreen extends Component {

  static navigationOptions =({navigation}) => ({

    title: "",

    headerTransparent: true

  });

 

  render() {

    return (

      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>

        <Image source={require('../img/ico-esn.png')} />

      </View>

    );

  }

}

 

export default WelcomeScreen;

 

맨 윗줄을 보시면 이전 파일과는 다르게 { Component }가 추가되었죠?

바로 react의 Component 오브젝트를 불러오는것입니다.

 

두번째 줄 import { View, Image } from 'react-native'은 react-native 패키지의 View, Image Object(Component)를 불러오는 것입니다.

Object는 Component를 포함하는 더 상위 개념을 의미합니다.

프로그래머 분들은 다 아시고 계시겠지만 저의 강의는 초급자 수준에 맞춰서 진행될 예정입니다.

 

class WelcomeScreen extends Component {

WelcomeScreen 클래스를 생성하는데 Component 오브젝트를 상속 받는다는 의미입니다.

RN의 구성요소들은 거의 대부분이 Component를 상속 받아서 만들어진다고 보시면 됩니다.

결론적으로 WelcomeScreen이 Component를 상속 받았기 때문에 WeclomeScreen도 Component 인거죠.

 

static navigationOptions =({navigation}) => ({

  title: "",

  headerTransparent: true

});

Navigation의 속성을 지정합니다.

WelcomeScreen의 타이틀(상단 제목 표시줄)이 필요없기 때문에 공백으로 지정하고 투명하게 해서 화면에 표시하지 않도록합니다.

 

render() {

Component를 상속받은 경우 꼭 이 render 함수를 사용해야합니다.

이 render 함수내에 있는 내용이 실제 화면에 출력되기 때문이지요.

출력할 내용이 없더라도 render함수는 꼭 존재하여야하며 결과값을 리턴해야 합니다.

함수 안쪽에 return ( ... ) 이런 코딩이 없다면 RN은 오류 발생시킵니다.

 

return (

  <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>

    <Image source={require('../img/ico-esn.png')} />

  </View>

);

화면에 View를 하나 만들고 Image를 출력합니다.

보시면 희한하게 함수 안쪽에 난데없이 HTML이 출현하지요?

React가 웹을 위한 도구이기 때문에 JS에서 바로 HTML을 쓸수 있도록 되어 있습니다.

기특하죠!

React 내부적으로는 실제 HTML로 처리되는것이 아니라 HTML을 다시 JS로 변경해주게끔 설계되어 있습니다.

 

<View ...>

그런데 원래 HTML에는 View나 Image라는 Tag가 없죠?

RN에서는 HTML 테그 대신에 Component가 들어가는겁니다.

즉, 위에 import한 View, Image를 HTML Tag로 처럼 사용한다는 것이죠.

바로 이것이 RN의 가장 큰 특징인데요.

Component로 상속받은 모든 것들은 HTML 형태로 코딩할 수 있습니다.

웹 개발자들의 접근성을 위해서 그런 방식을 취한듯 합니다.

 

export default WelcomeScreen;

맨 마지막에 최종적으로 WelcomeScreen을 export합니다.

 

마지막으로 오늘 강의의 소스가 있는 github로 이동하여 ico-esn.png파일을 다운받아 ./src/img 폴더에 넣습니다.

https://github.com/topmining/topwallet/tree/master/src/img

 

자 그럼 다시 Command 모드로 가서 앱을 실행해 볼까요?

당연히 지난 강좌에서 설명한 가상 장치를 먼저 실행시켜야 하고요.

 

C:\Users\YOUR_USERNAME\topwallet> react-native run-android

 

짜잔~~!

아래와 같이 나온다면 성공!!

 

welcome.png

 

그렇습니다.

오늘 강좌에서는 ESN 로고가 나오는 Welcome 화면을 만들었네요.

 

그럼 오늘은 여기서 마무리 하겠습니다.

이전 강좌를 보고 싶으시면 제 블로그를 방문해주세요.

https://www.ddengle.com/@TopMining

좋아요 많이 주시고요. ^^


[알림: 이 게시글은 관리자에 의해 ''에서 '개발'로 이동되었습니다]
28,847

쌩광부님의 서명

채굴풀은 더 이상 운영하지 않습니다.

 

칼리스토(CLO) 채굴풀 (Pool fee 0.5%)

https://clo.topmining.co.kr

메타버스(ETP) 채굴풀 (Pool fee 0.5%)

https://etp.topmining.co.kr

 

디스코드 https://discord.gg/sjwKhaS

페이스북 https://www.facebook.com/topmining.co.kr

트위터 https://twitter.com/TopMining

Attachment
첨부 '1'
댓글 14
default debug random = 0 / type = READ / detected = READ

List of Articles
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
공지 TokenWatch 텔레그램 봇 베타 서비스 안내 newfile 3 82
관리자
2021.07.23
1451 개발 BTC와 이더리움 전송에 관한 데이터를 수집해보았습니다. *** 답변 댓글이 있을 때 글 내용 삭제시 경고 없이 계정이 정지됩니다. *** *** 개인정보가 포함된 경우 혹은 불법적인 요소의 수정은 가능합니다.*** -----------------------------------------------------------... 3 file 8 621
Null_name
2018.11.25
1450 [강좌] 이더소셜 PHP API 서버 만들기 - 프롤로그 안녕하세요. 쌩광부 입니다.   제가 진행하고 있는 &quot;모바일 지갑 만들기&quot;를 완성하기 위해서는 API 서버가 필수적으로 필요하게 되는데요. 기존 API로는 부족한 것이 조금 있기 때문에 별도의 API 서버를 제작해 보도... 8 19 2888
쌩광부
2018.11.24
1449 질문 Python Dataframe 고수님들께 질문드립니다. 여기가 한국의 stackoverflow 군요!   저는 파이썬으로 알고리즘 매매 개발 중인 자동차 설계 엔지니어입니다.   앞으로 이곳에서 열심히 활동할 수 있을 것 같아 의욕이 활활 타오르네요!       각설하고, MACD를 살... 2 0 393
축당첨
2018.11.24
1448 [강좌] 쌩광부의 모바일 지갑 만들기 #5. React Native AsyncStorage 안녕하세요. 쌩광부입니다.   이번 시간에는 RN에서 데이터를 파일로 저장하는 방법을 배워 보겠습니다. 간단하게 파일 입출력 함수를 이용해서 데이터를 저장할 수도 있겠지만 모바일에서는 보안 관련 문제가 많기 ... 5 15 1430
쌩광부
2018.11.24
1447 질문 마이닝 리워드 트랜잭션에서의 주소의 의미 안녕하세요 블록체인 고수님들께 질문이 있어 처음 글 올려봅니다.   현재 litecoin-core를 베이스로 재미삼아 알트코인을 만들어 보고 있습니다. (만들다긴 보단 파라미터만 변경하는 수준;;)   빌드까지는 성공해서... 3 0 287
숫소
2018.11.23
1446 블록체인에서 쓰이는 스마트 컨트랙트란 어떤 기능일까? ETC_01         우리는 살면서 많은 계약을 하며 살아갑니다. 스마트폰을 하나 사더라도 여러 계약서에 서명을 해야 합니다. 계좌 만들 때, 보험 가입 할때, 자동차를 사거나 부동산을 매매할 때 이 모든 것은 계약으로 진행... 16 file 18 914
풀트리
2018.11.22
1445 블록체인 강의 03 - P2P 블록체인과 P2P에 대한 강의입니다. 블록체인을 밑바닥부터 완벽하게 알필요까지는 없으신 분은 패스해도 됩니다. 편집 기술이 전혀 없어서 그냥 대충 잘라서 넣은 점 양해 부탁드립니다. !!!!! 혹시라도 제가 틀린 ... 9 15 866
쌍둥아빠
2018.11.22
1444 질문 비트코인 월렛 개발중입니다. BIP44에 대해 질문드립니다. ㅠㅠ 안녕하세요. 비트코인 BIP44 2가지 질문 드립니다.   m / purpose' / coin_type' / account' / change / address_index 일단 bip44 path를 남깁니다.   1. 밸런스 스캔   리미트 갭을 20개라고 명시해 놨던데 이 말뜻... 7 0 953
dugong
2018.11.22
1443 [강좌] 쌩광부의 모바일 지갑 만들기 #4. 이더리움 계열 지갑 만드는 방법 안녕하세요. 쌩광부입니다.   이번 시간에는 RN에 대한 설명을 잠시 접어두고 이더리움 계열 코인의 지갑 구조에 대해서 설명하도록 하겠습니다.   #4. 이더리움 계열 지갑 만드는 방법   1. Private Key, Public Key... 16 30 1434
쌩광부
2018.11.21
1442 블록체인 강의 02 - 총론-트랜잭션, 블록, 블록체인의 구조 블록체인, 블록, 트렌젝션에 대한 총론입니다. L* 기업 개발팀을 교육한 실제 강의 영상입니다. 편집 기술이 전혀 없어서 그냥 대충 잘라서 넣은 점 양해 부탁드립니다. !!!!! 혹시라도 제가 틀린 부분이나 부족한 부... 3 12 741
쌍둥아빠
2018.11.21
1441 질문 지갑은 ERC 토큰을 받았음을 어떻게 알 수 있나요?   ESN 계정을 가지고 있고, 해당 계정으로 누군가 땡글 토큰을 보냈다고 가정할때 지갑은 전달 받은 내역이 땡글 토큰임을 어떻게 확인하나요?   일반 거래와 토큰 거래의 다른점이 금액을 0으로 하고, input data에 ... 9 0 519
AppA
2018.11.21
1440 블록체인 교육 실제 강의 유튜브 영상 L* 기업 개발팀을 교육한 실제 강의 영상입니다. 필요한 말만 다시 모아서 편집하려니 시간이 상당히 많이 걸리네요. 총 16시간 교육했으며 조금씩 잘라서 계속 유튜브에 올리겠습니다. 오늘은 첫 강의라 주의집중하... 20 25 1242
쌍둥아빠
2018.11.20
1439 개발 플라즈마(Plasma) 리서치 월드 맵 - 이더리움 확장성 솔루션 플라즈마 연구자료   이 글은 온더의 박정원(Aiden) 연구원님의 미디엄 글[https://medium.com/onther-tech/plasma-world-map-kr-9c1eec16859e]을 옮긴 것으로, 이더리움의 확장성 솔루션인 플라즈마의 연구내역들을 한눈에 살펴보도록 ... 3 file 4 790
철학자
2018.11.20
1438 개발 업비트 거래량 관련 개발문의요..       1. 업비트의 btc 마켓의 모든 코인의 거래량을 엑셀 또는 한곳으로 가져옴 2. 그중 10초 거래량이 이전 5분 평균 거래량보다 X% 많으면 해당코인 표시 3. 30초 거래량이 이전 5분 평균 거래량보다 X% 많으면 해... 6 0 668
몰라용
2018.11.19
1437 개발 웹 마이닝 모니터링 자작   자동 트레이딩 봇 프로그램 개발 중 막혀서 진척이 안되는 구간이 있어서 주말 이틀 동안 마이닝 모니터링 페이지 좀 만들어 봤네요. Ajax jQuery로 만들었습니다. 간단 명료하게 GPU 온도는 그냥 색깔로 표시했어... 3 file 3 2150
bestbester
2018.11.19
1436 개발 웹 모니터링 - CCMINER, Claymore's Dual(Ethash), EWBF miner(Ethash), xmr-stak-*(Cryptonight), claymore's -XMR   안녕하세요.   조용히 운영중인 사이트 오랜만에 소개 합니다.   마이닝허브 모니터링 사이트에서    기존 지원 모니터링 툴 CCMINER, Claymore's Dual(Ethash), EWBF miner(Ethash), xmr-stak-*(Cryptonight), cla... 14 12 1302
stigma8326
2018.11.19
1435 이더리움 데브콘4 참관기 1 이더리움 데브콘4 참관기 1 2018년 프라하에서 열린 이더리움 데브콘4에 참석했었습니다. 행사 참석 기사를 위해 썼던 내용을 정리해보았습니다.   데브콘4에서 가장 인상깊었던 내용   세션하나만을 뽑기는 좀 어렵... 24 file 34 2849
atomrigs
2018.11.18
1434 질문 빗썸 all ticker는 미래에서 온걸까요? 파이썬을 이용해 가격을 끌어왔는데 1542430950.476311 1542430951.405 위가 time.time()을 이용한현재 시간이고 아래가 빗썸 all ticker의 date입니다. 빗썸 티커가 1초 더 미래네요;; 1초 후 미래의 가격을 알 수 ... 3 0 591
Mist.B
2018.11.17
1433 질문 삭제한 글입니다 삭제한 글입니다 0 444
빗하이
2018.11.15
[강좌] 쌩광부의 모바일 지갑 만들기 #2. Navigation 만들기 안녕하세요. 쌩광부입니다.   오늘부터 본격적인 코딩을 시작하도록 하겠습니다. React Native(이하 RN)를 하나 하나 알려드릴 수는 없는 관계로 일단 바로 실전 코딩에 들어가겠습니다. 코딩을 하면서 필요한 사항들... 14 file 27 1518
쌩광부
2018.11.14
Board Pagination Prev 1 ... 13 14 15 16 17 18 19 20 21 22 ... 90 Next
/ 90
default debug random = 0 / type = READ / detected = READ