develop custom_top_html:no
default debug random = 1 / type = READ / detected = READ / doc_Srl = 10223649

안녕하세요.

쌩광부입니다.

 

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

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
  • ?
    nadana 2018.11.14 19:58
    이번것을 성공할수 있을지 심히 걱정이 되는 파트네요. ^^
  • profile
    쌩광부 2018.11.14 20:02
    @nadana
    힘네세요. ^^
  • ?
    펩틴 2018.11.14 21:25
    허.. 벌써 머리가 아파오지만... 도전하고 있습니다ㅋㅋㅋ
    재밌네요
  • ?
    nadana 2018.11.14 21:32
    ㅜㅜ... Apps.js 파일을 보겠습니다. 라고 되어 있는데 보는 방법을 못찾고 있어요. ㅜㅜㅜ
    cmd창에서 help 눌러 무슨 명령어로 볼 수 있는지 보는데도 찾지 못하고 있어요.
    초초보인듯 합니다. ㅎㅎ
  • profile
    ddengle BOT 2018.11.14 21:32
    @nadana
    nadana님 축하합니다. 7 보너스 캐시에 당첨되셨습니다.!!
  • profile
    쌩광부 2018.11.14 21:38
    @nadana
    그 다음은 탐색기를 열고
    C:₩사용자₩이름₩topwallet을 보시면 됩니다.
    사용자 대신 Users로 표시될수도 있고요.
    이름 대신 자신의 계정 이름으로 표시됩니다.
    js파일은 메모장으로 열어도 되고요.
    Atom 같은 개발용 에디터를 사용하시면 편합니다.
  • profile
    ddengle BOT 2018.11.14 21:38
    @쌩광부
    쌩광부님 축하합니다. 10 보너스 캐시에 당첨되셨습니다.!!
  • ?
    nadana 2018.11.14 21:48
    @쌩광부
    아하.....역시 저는 초초급인듯합니다.
  • profile
    young69 2018.11.14 21:51
    갈수록 흥미 진진해지네요 ^^
  • profile
    인간45 2018.11.15 00:59
    헉 하나 만들어봐야겠군요!
  • profile
    abcoin 2018.11.15 01:56
    정말 흥미 진진합니다..... %^^%
  • ?
    존버중 2018.11.15 08:33
    좋은 정보 늘 감사합니다.
  • ?
    AppA 2018.11.15 11:02
    정성 가득한 글 고맙습니다~~
  • ?
    김상가 2018.11.23 10:30
    좋아요~ 눌렀어요`ㄹㄴㅁ

List of Articles
번호 분류 제목 추천 수 조회 수 글쓴이 날짜
공지 로그인이 안되시는 분은 문의해주시기 바랍니다. 1 update 2 680
땡글개발자
2019.08.21
공지 개인 정보 유출에 따른 사과문 50 updatefile 6 2195
땡글개발자
2019.08.21
공지 짤/유머 게시판을 오픈합니다. 5 file 6 380
땡글운영위
2019.08.10
1689 개발 허접하지만 알뜰한 기능의 채굴기 모니터링 프로그램입니다 기능 -채굴기 1set의 평균온도와 해쉬 -모든 그래픽카드들의 온도와 해쉬 -온도와 해쉬의 수치별 색상변화 -각 set별 혹은 그래픽카드별 설정수치시 알람 발생(sms 문자발생, 다수인원 가능) -설정 시간마다 표현된 ... 23 file 93 8145
503
2017.08.12
1688 개발 모니터링 프로그램 ver 0.82 업데이트 안녕하세요. 남자별입니다.   어제 하루 잠시 시간이 비어서 0.8 업데이트에 몇몇 기능 개선을 추가했습니다. 주요 업데이트 내용은 다음과 같습니다. 자세한 설명은 압축파일 안에 Readme.txt 를 읽어주세요   1) 기... 106 file 92 11727
남자별
2018.03.20
1687 개발 다중 수천대 가능 무료 원격조정 모니터링 알람 제어 ( 꽁짜 )     천리님 글  1. 마이너 컨픽 파일 수정2. 컨픽 파일 일괄 업로드3. 마이너 재시작4. 컴퓨터 리부팅5. 마이너 버전 업데이트 시 파일 일괄 업로드6. 마이닝 프로그램 일괄 변경 (ex. Claymore에서 xmr로)6-1 마이... 35 file 76 5649
다롱잉임
2018.04.08
1686 개발 오버클럭을 손쉽게! 이지 오버클럭을 릴리즈 합니다. 안녕하세요, 땡글을 통해 여러가지 도움을 얻고 있는 괴발개발 입니다.   애프터 버너는 좀 무겁고, 옵션이 너무많아 다루기가 쉽지 않습니다. 또한, 여러 그래픽카드의 정보를 한눈에 보기 어려운데요,   이것을 한... 70 file 73 6367
괴발개발
2018.04.20
1685 개발 모니터링 프로그램 ver 0.8 업데이트 안녕하세요. 남자별입니다.   0.7 업데이트 이후로 빠르게 업데이트 해드릴려고 했으나 여러 사정이 겹쳐서 이제서야 업데이트 했습니다. 이런저런 문의/요청사항에 대해서 추가 작업 및 명절이 낀게 좀 컸네요 ㅜㅜ ... 61 file 66 6433
남자별
2018.03.16
1684 개발 누구나 따라할 수 있는 ETN 마이닝 풀 구축 가이드 입니다. 일렉트로니움 마이닝풀 운영을 위한 설치 가이드 입니다.   ETN 마이닝 풀 서버 설치를 해보려고 했는데 node 버전 문제로 여러번의 실패로 우분투를 재설치하면서 여러번의 삽질을 하여 성공하고 작성한 설치 가이드... 60 60 11281
번트마이너
2018.02.11
1683 개발 모니터링 프로그램 ver 0.6 업데이트 안녕하세요. 남자별입니다.   최근에 개인일이 바빠져서 모니터링 프로그램 업데이트를 당분간 보류할 생각이었으나 갑자기 핫해진 모네로 관련으로 문의가 많으셔서 -_-a 급하게 땜빵 수정했습니다.   주요 수정사항... 75 file 60 16588
남자별
2017.08.28
1682 개발 오픈소스 거래소 깃헙 공개하였습니다. 안녕하세요 몇일전 거래소 오픈소스로 깃헙에 공개하겠다고한 coinext 개발자입니다. 좀더 리팩토링이나, 보완할걸 하고 공개하려고 했는데, 전반적으로 크게 문제는 없어보여 선공개합니다. 시간이 허락한다면, 리팩... 42 56 17662
coinext
2017.12.20
1681 개발 모니터링 프로그램 ver 0.7 업데이트 안녕하세요. 남자별입니다.   최근에 몇몇 분들이 개인적으로 Bminer 지원을 요청하시기에 api 분석만 하고 바로 적용했습니다. Bminer 지원 이외에 다른 수정사항은 아직 적용하기전이라 Bminer를 안쓰시는 분들은 ... 84 file 53 14496
남자별
2018.01.08
1680 개발 안녕하세요. 오픈소스로 자동 트레이딩+알림 봇 공유합니다.   파이썬3로 제작되었고요.   1. 텔레그램에서 문자인증 받고 자동으로 로그인하는 기능. 2. 텔레그램에서 해당 채널의 메시지를 자동으로 읽는 기능. 3. 읽은 메시지를 정규표현식으로 분석해서 어떤 코인을 사야하... 23 file 47 22329
소프트
2018.01.12
1679 개발 모니터링 프로그램 ver 0.4 업데이트 안녕하세요. 남자별입니다. 이번 업데이트는 좀 늦었습니다. 개인적인 사정과 회사프로젝트가 바빠져서 그랬습니다.   더이상 미루기 힘들어 몇시간정도 뚝딱 거려봤습니다. 저번에 요청오신 기능중 3가지 정도 촛점... 71 file 47 18207
남자별
2017.07.19
1678 개발 모니터링 프로그램 ver 0.5 업데이트 안녕하세요. 남자별입니다. 이번 업데이트는 기존 요청사항들중 편의성 부분으로 개별 설정할 수 있도록 수정했습니다.   ver 0.5  업데이트                 monitor.ini 설정 추가. 기본 배포된 ini 이외에 수정하... 61 file 44 12646
남자별
2017.08.11
1677 개발 전세계 실시간 챠트/시세를 원화로 모아서 볼수 있는 사이트를 만들었습니다 전세계 3048개 코인, 648종 가상화폐를 실시간 차트/시세를 원화로 모아서 볼수 있는 사이트를 만들었습니다.   암호화폐 실시간 차트및 시세를 각국 통화로 암호화폐별, 거래소별, 관심코인으로 모아서 볼수 있는 사... 33 file 42 4574
그냥초보
2018.04.10
1676 개발 SMT 토큰 이중지불 해킹에 대한 설명과 대비책   안녕하세요. 온더의 철학자입니다.   SMT라는 ERC20토큰의 토큰 이중지불 해킹이 일어났습니다. 이 해킹건에 대해 설명이 필요한 것 같아 긴급하게 글을 남깁니다.   Ethereum Transaction 0x1abab4c8db9a30e703114... 21 file 41 2847
철학자
2018.04.25
1675 개발 이더리움과 스마트 컨트랙(2) - 30분만에 ICO 하기 30분만에 ICO하기   안녕하세요. 오늘은 조금 자극적인 제목을 가지고 와봤습니다. 요즘 ICO 많이들 참여하시고,  직접 하시는 분들도 많이 계신데요. ICO에 필요한 토큰을 단 30분 만에 발행하는 방법을 소개해볼까 ... 28 file 40 8379
파이리
2018.02.22
1674 개발 채굴 관리프로그램 MINE ASSIST 베타버전 공개 안녕하세요. 저는 S전자에서 개발자로 일하다가 지금은 작은 스타트업을 하고 있는 파이리입니다.   얼마 전에 채굴기 관리 프로그램을 개발하고 있다고 글을 올린적이 있었는데, 베타 테스트에 적합한 시점이 된 것 ... 180 file 39 14858
파이리
2017.06.17
1673 개발 단순 콘솔 모니터링 프로그램 ver 0.2 배포   안녕하세요. 지난번에 올린 모니터링 프로그램에 요청사항들이 있으셔서 수정했습니다. 이하는 개발노트입니다. 보안 관련으로 걱정하시는 분들도 계셔서 소스코드도 같이 첨부합니다. ver 0.1     개요 :        ... 44 file 38 8777
남자별
2017.06.26
1672 이더리움 데브콘4 참관기 1 이더리움 데브콘4 참관기 1 2018년 프라하에서 열린 이더리움 데브콘4에 참석했었습니다. 행사 참석 기사를 위해 썼던 내용을 정리해보았습니다.   데브콘4에서 가장 인상깊었던 내용   세션하나만을 뽑기는 좀 어렵... 24 file 34 2783
atomrigs
2018.11.18
1671 개발 예스빗부스터 무료배포(ver 0.0.1)   예스빗매니저 오픈베타서비스에 참여해주신 분들의 요청으로 윈도우 최적화 프로그램(예스빗부스터)을 배포합니다. 앞으로도, 요청사항을 검토하여, 지속적인 업데이트를  진행할  예정입니다. 현재 적용되어 있는 ... 22 file 34 3701
예스빗
2018.07.09
1670 [강좌] 쌩광부의 모바일 지갑 만들기 #4. 이더리움 계열 지갑 만드는 방법 안녕하세요. 쌩광부입니다.   이번 시간에는 RN에 대한 설명을 잠시 접어두고 이더리움 계열 코인의 지갑 구조에 대해서 설명하도록 하겠습니다.   #4. 이더리움 계열 지갑 만드는 방법   1. Private Key, Public Key... 16 30 1153
쌩광부
2018.11.21
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 85 Next
/ 85

개인 정보 유출에 따른 안내

개인정보 유출에 따른 사과문

https://www.ddengle.com/board_free/11420106

8월20일 땡글 해킹사고 경과 보고

https://www.ddengle.com/board_free/11420345

로그인이 안되시는 분

https://www.ddengle.com/board_free/11420465
8월18일~20일 해커에 의해 땡글 사이트에서 땡글 회원님들의 아이디 및 비밀번호가 유출되고 있음을 발견하였습니다.
더이상 피해가 발생하지 않도록 조치된 상태이나 일부 사용자의 개인정보가 유출되었으며, 해커는 추가적으로 사용자 정보를 불법적으로 공개하겠다고 합니다.
  • 최근에 접속한 사용자의 경우 ID와 비번이 유출되었을 가능성이 높습니다. 비번을 꼭 바꿔주시기 바랍니다.
  • 최근에 접속하지 않은 사용자의 경우에도 해커는 사용자 정보를 입수하여 그 일부 정보를 불법적으로 공개하였습니다.
  • 해커에 의한 사용자 도용을 방지하고자, 최근 수개월간 비번 변경을 하지 않은 약 1만8천명의 사용자를 이용정지시켰습니다.
이 글을 보시는 땡글 유저분은 자신이 계정이 정지된 상태라면 [email protected] 혹은 [email protected] 으로 메일주셔서 자신임을 간단히 인증하여 다시 계정을 활성화시키는 해킹 안내메일을 받으시기 바라며, 혹은 기존 계정 삭제 요청을 해주시기 바랍니다.
Close