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
댓글 14

List of Articles
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
공지 땡글 닷컴 스티커 나눔 이벤트!! (~11/14) 17 file 14 700
ESN경매
2019.11.08
공지 로그인이 안되시는 분은 문의해주시기 바랍니다. 4 4 2371
땡글개발자
2019.08.21
1704 개발 [긴급속보] Parity 개발팀이 비잔티움 하드포크에 관하여 연속적인 버그 발생으로 하드포크를 2주간 딜레이 시켜야 한다고 주장하고 있습니다 https://www.reddit.com/r/ethereum/comments/76d97i/fork_should_be_postponed_until_2_w_of_no_bugs_as/dod6ece/   DAO 사태 이후 최대의 위기 같습니다.   Parity 팀이 4일 연속으로 Bug fix 된 클라이언트를 내놓... 42 17 38981
인텔지원
2017.10.15
1703 개발 이더리움은 인터넷을 지배하게 될까요? 아마도 땡글의 많은 분들은 이더리움으로 대박이 나셨고, 이더리움으로 큰 손실도 입으신 것으로 압니다.   이더리움은 비교적 최근까지도 땡글 내의 가장 인기있는 채굴 코인이었으며, 여전히 땡글의 많은 회원 분들... 16 8 38178
ethminer
2019.07.17
1702 개발 IPFS 따라해보기 IPFS(InterPlanetary File System)란 무엇인가? IPFS는 차세대 웹 3.0에 필수 요소의 하나라고 일컫을 수 있을만한 분산 저장소 구현중의 하나입니다.   기존 웹의 가장 큰 단점이라 할 수 있는 것 중 하나는 바로 &quot;... 19 9 32445
ethminer
2019.07.20
1701 개발 이더리움 작동원리의 이해(1)-동영상 -땡글 블록체인 강의 https://youtu.be/ddZ4wBfHGIo 주최 : 땡글 암호화폐 커뮤니티 후원 : 제너크립토(주) 해외거래소 이더리움 작동원리의 이해(워터마크).pdf ------------------------------------- 꼬리말 * 게시글 내용 삭제시 레벨... 23 file 29 26686
쌍둥아빠
2017.11.03
1700 개발 클레이튼 소스 코드 간단 분석 소스분석이랄것까지는 없습니다만   현재 공개되어 있는 클레이튼 소스코드를 간단히 점검하는 기분으로 살펴보았습니다.   공개된 클레이튼 노드 소스코드 https://github.com/klaytn/klaytn   1. 클레이튼 노드의 ... 18 6 26486
ethminer
2019.07.10
1699 질문 서버 이전중에 코인이 싹 사라졌습니다. 코인은 라이트코인 포크로 만든 새로운 코인이구요.. 서버 이전이 있어서 (A --&gt; B)   1. A 서버에서 계정들과 코인수량 다 확인하고 2. B 서버에서 데몬 실행, 정상적으로 블록이 쌓이는 거 확인 후 종료 3. wallet.... 13 2 25852
비폭력무저항
2019.06.14
1698 질문 암호화폐/주식 교육 사이트를 만들고 있는데 PG,결제연동사가 허락을 안해주네요; 다른 동영상 강의 사이트들은 PG연동에 문제가 여태 없었는데   암호화폐랑 주식은 안된다고 거품물고 반대 하네요; (도서는 된다고 하는데.. 클라이언트가 책은 생각이 없다고 해서..)   그런 이유로 골머리를 앓고 ... 9 1 25617
딥러닝은개뿔
2019.06.11
1697 개발 주식 자동 매매 프로그램 이번 주는 많이 바빴습니다. 회사 업무도 있었지만, 프로그램 만드는 일도 몇 일 걸렸습니다. ETF(Exchange Traded Fund) 자동 매매 프로그램입니다. 저가에 매수하고, 고가에 매도하는 전략이고, 단기적으로는 손실... 28 file 11 25430
drjoon
2014.11.21
1696 개발 사달라 자동매매봇 업데이트 했습니다.     안녕하세요. 마루마루 입니다. 이전에 트레이딩봇 관련해서 테스트 버젼을 올렸었습니다.   이전글 참조 [ https://www.ddengle.com/traders_free/11193656 ]   당분간 유료화 예정이 없어 기본사용자 제한인 1인... 1 3 25364
마루마루
2019.07.05
1695 질문 자동 코인 거래를 위한 시스템? 을 개발하고 있습니다.   봇에 거래소 API 키 및 코인, 금액을 세팅하고 활성화 시키면 24시간 해당 코인의 가격을 보다가    지정된 가격에 도달하면 매수/매도를 걸게 되고, 동시에 라인 및 텔레그램으로 알람을 보내주는 형태입니다.   ... 12 0 25256
몬스터에너지
2019.07.13
1694 개발 이더리움 블록체인과 영지식 증명 스터디원을 모집합니다^^   안녕하세요. 철학자입니다.   이더리움 블록체인 스터디그룹인 D-lab의 &lt;Awesome ZKP&gt;분과에서 공부 같이하실 스터디원을 모집합니다^^   &lt;Awesome ZKP&gt; 분과는 현업 이더리움 블록체인 개발자 다섯분으로 이루어져... 1 25001
철학자
2019.06.07
1693 개발 이더리움 트랜젝션 처리속도를 25 TPS라고 하는 이유 이더리움의 초당 트랜젝션 처리 가능 회수는 15 TPS라고 알려져있습니다. 그러나 좀 더 찾아보면 20~25 TPS라는 내용도 나오긴 하는데 이에 대해서 간단히 살펴보도록 하겠습니다. 현재의 이더리움 네트워크의 블록 ... 3 file 4 24752
ethminer
2019.07.08
1692 개발 룸네트워크의 메인넷 소스코드 공개 룸네트워크를 들어보신 분 많으실겁니다. 룸네트워크의 Loom 토큰이 업비트에도 상장되어 있으며, DPoS 컨센서스 기반의 룸네트워크 메인넷, 일명 &quot;플라즈마체인&quot;(Plasma Chain)으로 유명하고, (DPoS는 EOS에서도 사... 4 file 3 24699
ethminer
2019.07.12
1691 개발 이더리움 노드 소스 (go-ethereum) 버전 1.9.0 릴리스 7월 10일 날짜로, 이더리움 코어 소스코드 (go-ethereum) 버전 1.8.0이 나온 2018년 2월 14일 이후로 1년 5개월여만에 1.9.0 버전이 나왔습니다! 간단 요약 - full/fast/archive sync 성능 향상 (속도 향상 / 저장용... 1 file 3 24509
ethminer
2019.07.12
1690 개발 이런 코인있으면....   로그인 할때마다 코인자동으로 지급해주는 코인 어떨까요 웹싸이트들 대부분 수익모델이 제로입니다 이걸 로그인코인이 보상해주는 거조 채굴보상대신 로그인마다 코인을 주는거죠 그러면 수익때문에 좋은 서비스 ... 1 1 24448
독수리
2019.06.11
1689 질문 현재 EOS 풀노드 용량이 얼마나 되는지요?         현재 EOS 풀노드 용량이 얼마나 되는지요?               3 0 24354
김대박
2019.07.09
1688 질문 후오비 API 원화마켓     안녕하세요,   고수분들의 조언이 필요합니다...   후오비 API 로 원화마켓 가격을 가져오고 싶은데 symbol에 KRW를 넣으면 respose가 없네요.   예) usdt는 잘 작동하는 https://api.huobi.pro/market/depth?sym... 2 0 24346
lkjdf
2019.07.11
1687 질문 Geth, smart contract 해킹 관련해서 질문드립니다.   Private key 가 탈취당한 것 같습니다. 잠재적인 해킹 위험으로부터 해커가 움직이기전에 먼저 손을 쓰고싶습니다.   예를 들면 신규 지갑으로 자산 전체 이동 Private key 변경? (이건 불가능할 것 같구요)   스마... 3 0 24190
Larcenciel
2019.07.10
1686 개발 C#용 비트맥스 API WRAPPER 추천좀 부탁드립니다. https://github.com/BitMEX/api-connectors 위 링크에서 테스트하면 signature not valid 오류가 나네요..                   ------------------------------------- 꼬리말 * 게시글 내용 삭제시 레벨 강등 * 질문... 4 0 24156
AAKQ
2019.06.05
1685 질문 이더리움 블록데이터 동기화 관련되어 질문있습니다.   리믹스를 통해 컨트랙트를 배포하는 중에 이더리움 노드가 아래와 같이 에러문을 출력하여 다시 재 실행 시켰습니다.  다시 재실행하고 동기화 상태를 체크해보니 사진과 같이    currentBlock이 startingBlock 숫... 3 file 0 24096
나비잠
2019.06.13
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 86 Next
/ 86
PC debug / slots = 2 / size = 0 / random = 0