Steem 모바일 지갑앱 만들기 #2

Design by @imrahelk 안녕하세요. 안피곤입니다. Steem 모바일 지갑앱 2번째 포스팅입니다. 지갑 개발에 필요한 기능을 하나씩 학습하면서 구현하고 있습니다. 그리고 그 개발 과정을 기록하고 있습니다. 시리즈글 ▪︎ [React Native] Steem 모바일 지갑앱 만들기 #1 * 개발환경 기분 좋게 expo로 Steem 모바일 지갑 개발...

Read

데이터 저장하기 : AsyncStorage와 SQLite, 그리고 Realm

Design by @imrahelk 안녕하세요. 안피곤입니다. 리액트 네이티브에서 데이터를 저장하고 사용할 수 있는 방법이 필요합니다. 그래서 AsyncStorage와 SQLite, 그리고 Realm에 대해서 살펴보았습니다. 그리고 각각의 API를 방법을 학습하면서 성능도 비교하였습니다. AsyncStorage와 database를 비교할 수는 없지만, 리액...

Read

인터렉티브한 애니메이션(Animations) 만들기

Design by imrahelk 이쁜 대문 이미지를 만들어주신 레이첼(imrahelk)님 감사합니다. 아직 대문 이미지가 없으신 분은 ☆축환갑☆ 환갑기념 대문장이 리턴즈에 이벤트 응모해보세요. * * * Lottie Lottie는 Airbnb에서 출시한 애니메이션 라이브러리입니다. 아래 화면과 같은 아름다운 애니메이션 효과를 만들 수 있습니다. 하지만 애...

Read

인증(로그인) 상태에 따라 화면 분기하기

React Navigation의 Authentication flows 문서를 참고하여 작성하였습니다. 참고: -flow.html Authentication flows 일반적인 인증 Flow은 다음과 같습니다. 사용자가 앱을 실행합니다. 앱의 인증(로그인) 상태를 체크합니다. 유효한 인증 상태에 따라 인증(로그인) 화면 또는 기본 화면이 보입니다. 사용자...

Read

Steem 모바일 지갑앱 만들기 #1

옛날에 이런 책이 있었습니다. 스팀잇에는 이 책을 기억하는 분들이 많을 것 같습니다. 저는 리액트를 공부한지 일주일이 훨씬 넘었는데 잘 할 수 있을까요? ㅋ 안녕하세요. 안피곤입니다. WDT(WHAN DEV TEAM)에 합류해서 올리는 첫 글이네요. WDT가 뭔지 잘 모르는 분들은, 뉴비존님이 작성한 [출범식] WDT(WHAN DEV TEAM) 공식 활동...

Read

카카오 책 검색 API 사용하기

안녕하세요. 안피곤입니다. 이전 글 국내 도서 검색 OPEN API 비교에서 책 검색 OPEN API를 조사했습니다. 그러나 제가 원하는 데이터를 모두 제공하는 API는 찾지 못했습니다. 그나마 Daum 책 검색 API가 가장 괜찮은 것 같습니다. 아니 이제는 Kakao 책 검색 API라고 해야하죠. 저는 당연히 온라인 서점에서 책 검색 OPEN API 서...

Read

FlatList으로 Infinite Scroll와 Pull Down Refresh 구현하기

microcode님의 리액트 네이티브 강의입니다. 이분은 말 한마디 없이 코딩만 하네요. React Native에서 제공하는 FlatList를 사용하여 무한 스크롤(Infinite Scroll)과 Pull Down Refresh 기능을 구현합니다. FlatList에 대한 자세한 내용은 공식 문서에서 확인하세요. 이번 예제를 위해서 snack를 이용하였습니...

Read

레트로 게임 UI 만들기

Illustration © Codeman38 어렸을 때 Final Fantasy와 같은 RPG 게임을 좋아했습니다. 옛날 레트로 느낌을 살려서, Final Fantasy UI 처럼 보이는 컨테이너를 만들어 봅니다. * * * 프로젝트 생성하기 expo-cli를 사용하여 프로젝트를 생성합니다. 프로젝트 명은 ffcontainer라고 하였습니다. $ expo...

Read

커스텀 폰트 사용하기

리액트 네이티브(React Native)에서 사용자 글꼴(Custom Fonts)를 사용하는 방법입니다. 출처: -native-training/react-native-custom-fonts-ccc9aacf9e5e * * * Assets에 글꼴 파일 복사하기 글꼴(Fonts) 파일을 루트에 있는 assets/fonts 폴더에 복사합니다. Package.j...

Read

이더리움 모바일 지갑(Ethereum Mobile Wallet) 만들기 #7

이더리움 지갑 만들기 마지막 강좌입니다. 이번에는 지갑키로 전자서명을 수행합니다. 그리고 테스트넷에서 이더를 출금(송금)합니다. 아래는 완성된 앱 동작 화면입니다. 지갑에 필요한 기본적인 기능(지갑 생성, 입금, 출금)이 모두 구현되어 있습니다. * * * 전자서명 화면 만들기 아래와 같이 전자서명을 수행하는 화면을 만듭니다. ConfimTxScreen....

Read

이더리움 모바일 지갑(Ethereum Mobile Wallet) 만들기 #6

이번에는 이더리움 출금 화면을 만들어 봅니다. 하지만 이더리움을 출금하기 위해서는 지갑에 이더(Ether)가 있어야 합니다. 구현하기 전에 Ropsten Testnet Faucet 사이트에 접속합니다. 그리고 이더(Ether) 요청을 하여 받아보겠습니다. 테스트넷 이더 받기 아래 사이트를 이용하면 테스트넷의 이더(Ether)을 받을 수 있습니다. 이더리움...

Read

쌩광부님의 이더리움 모바일 지갑 만들기 강좌 소개

“리액트 네이티브 이더리움 모바일 지갑 만들기”가 잘 정리되어 있는 블로그가 있어서 소개합니다. 관련 자료를 찾다 보니 저보다 먼저 이더리움 지갑 만들기 포스팅을 올리신 분이 있었네요. 초보자가 쉽게 따라 할 수 있도록 쉽게 잘 정리되어 있습니다. 쌩광부님의 모바일 지갑 만들기 강좌 [강좌] 쌩광부의 모바일 지갑 만들기 (프롤로그) [강좌] 쌩광부의 모...

Read

동킹콩 모바일 게임 만들기

이번에는 리액트 네이티브로 모바일 게임을 만들어 보겠습니다. 이미 잘 만들어진 게임 샘플 코드를 가져와서 빌드하는 과정이라서 어렵지는 않습니다. 매우 간단합니다. 최근에 출시되는 모바일 게임은 대부분 unity로 개발되어 있습니다. 하지만 리액트 네이티브로도 모바일 게임 개발이 가능합니다. react-native-game-engine를 설치하면 리액트 네이...

Read

이더리움 모바일 지갑(Ethereum Mobile Wallet) 만들기 #5

이번에는 이더리움 지갑 상세 화면과 입금 화면을 만들 것입니다. 지갑 상세 화면 만들기 지갑 상세 정보를 보여줄 화면을 만듭니다. 지갑 상세 화면에는 이더리움 잔액과 입금/출금 버튼을 보여 줄 것입니다. components/WalletInfoScreen.js 파일을 생성합니다. import React, { Component } from 'react'; i...

Read

이더리움 모바일 지갑(Ethereum Mobile Wallet) 만들기 #4

이번에는 생성한 지갑키를 Storage에 저장합니다. 우리는 React Native의 Secure Storage를 사용하여 지갑키를 저장 할 것입니다. Secure Storage는 iOS/Android의 Keychain/Keystore를 이용하여 데이터를 안전하게 저장합니다. Secure Storage를 사용하면, 지문인증과 같은 생체인증도 이용할 수 있습...

Read

이더리움 모바일 지갑(Ethereum Mobile Wallet) 만들기 #3

이번에는 니모닉으로 지갑키(PrivateKet)와 지갑주소를 생성합니다. 지갑주소는 공개키(PublicKey)에서 계산됩니다. * * * ethereumjs-util 라이브러리 설치 이더리움 주소를 계산하기 위해 아래 라이브러리를 설치합니다. $ npm install --save ethereumjs-util 이더리움 지갑키와 주소 계산에 필요한 라이브러리...

Read

이더리움 모바일 지갑(Ethereum Mobile Wallet) 만들기 #2

이번에는 이더리움 지갑 생성 및 복구에 필요한 니모닉(Mnemonic)을 생성합니다. 니모닉이란 지갑을 복구하기 위한 데이터입니다. 보통 12개의 영어 단어로 구성됩니다. 니모닉 생성 규칙은 BIP-39에 정의되어 있습니다. 니모닉은 아래와 같은 형태입니다. kidney neglect bomb balcony leaf gun spy narrow total r...

Read

이더리움 모바일 지갑(Ethereum Mobile Wallet) 만들기 #1

오래 전 멀고 먼 블록체인 저편에... 암호화폐는 암흑의 시기이다. 하지만, 네드 베이더는 물리쳤고, 스티미디언 부대들은 스팀 얼라이언스 기지를 구축했다. 이번에는 리액트 네이티브로 이더리움 모바일 지갑을 만들어 봅니다. 리액트 네이티브로 암호화폐 지갑을 만드는 과정이 쉽지는 않을 것입니다. 개발하기 앞서 자신의 시스템 환경을 꼭 체크하기 바랍니다. No...

Read

무한 스크롤(infinite scroll) 만들기

이번에는 무한 스크롤(infinite scroll)를 구현합니다. [React Native] 인스타그램 UI 만들기 시리즈의 개발환경을 그대로 사용합니다. 그리고 아래 블로그 내용을 참고 하여 구현하였습니다. 참고: -infinite-scroll-in-react-native-e717602553f8 라이브러리 설치하기 무한 스크롤을 구현하기...

Read

Redux와 Thunk Middleware 사용하기

이번에는 Redux와 Thunk Middleware를 사용해서 프로젝트의 전체적인 구조를 다시 잡아 보겠습니다. [React Native] 인스타그램 UI 만들기 시리즈의 개발환경을 그대로 사용합니다. 라이브러리 설치하기 먼저 리덕스를 구현하는 필요한 라이브러리를 설치합니다. Redux 라이브러리는 이전 글 Redux로 Counter 앱 만들...

Read

스팀커넥트(Steemconnect) 로그인 만들기

이번에는 리액트네이티브로 스팀커넥트 로그인을 구현합니다. 저는 스팀커넥트를 선호하는 편은 아닙니다. 하지만 편리함 때문에 사용하고 있습니다. [React Native] 인스타그램 UI 만들기 시리즈를 이어서 로그인까지 구현해보도록 하겠습니다. 이전에 작성했던 개발환경을 그대로 사용합니다. 로그인 화면 만들기 ./Components/LoginSc...

Read

인스타그램 UI 만들기 #5

리액트 네이티브(React Native)로 인스타그램 UI를 구현하는 다섯번째 강의입니다. 이번에는 프로필 화면의 블로그 영역을 구현합니다. 이 포스팅은 아래 무료 동영상 강의를 참고하여 작성하였습니다. 동영상 강의는 이번이 마지막 입니다. ProfileTab에 세그먼트 버튼 만들기 ProfileTab.js 를 수정합니다. 프로필 화면에 버튼 4개를 만...

Read

인스타그램 UI 만들기 #4

리액트 네이티브(React Native)로 인스타그램 UI를 구현하는 네 번째 강의입니다. 이번에는 프로필 화면을 구현합니다. 이 포스팅은 아래 무료 동영상 강의를 참고하여 작성하였습니다. 상단바 수정하기 탭 화면마다 상단바가 다르기 때문에 수정해야합니다. 현재는 모든 탭 화면에서 같은 상단바가 보입니다. 먼저 MainScreen.js 파일을 수정합니다....

Read

인스타그램 UI 만들기 #3

리액트 네이티브(React Native)로 인스타그램 UI를 구현하는 세 번째 강의입니다. 이번에는 홈 화면에 스토리 헤더를 구현합니다. 이 포스팅은 아래 무료 동영상 강의를 참고하여 작성하였습니다. 인스타그램 UI 코딩 동영상 강의는 총 5편입니다. 이제 앞으로 2편 남았네요. 이번 강의 내용은 저번보다 조금 짧습니다. ㅎ 스토리 헤더 만들기 ./Co...

Read

인스타그램 UI 만들기 #2

리액트 네이티브(React Native)로 인스타그램 UI를 구현하는 두 번째 강의입니다. 이번에는 홈 화면에 피드 목록을 구현합니다. 이 포스팅은 아래 무료 동영상 강의를 참고하여 작성하였습니다. CardComponent 만들기 Components 폴더 아래에 CardComponent.js 파일을 생성합니다. CardComponent는 우리가 앞으로 구...

Read

인스타그램 UI 만들기 #1

이번에는 리액트 네이티브(React Native)로 인스타그램 UI을 구현하는 포스팅입니다. 다른 앱을 따라 만들어 보는 것은 굉장히 재미있습니다. 구글에서 인스타그램 클론 코딩 강의를 찾아보니, 다른 개발자들이 올린 동영상 강의를 몇 개 찾을 수 있었습니다. Udemy 강좌: React-Native + Redux + Redux-Saga + INSTAGR...

Read

Redux로 Counter 앱 만들기

Redux 와 NativeBase 를 사용하여 카운터 앱을 만들어 봅니다. NativeBase를 사용하니 컴포넌트 UI가 좀더 수려해졌습니다. 그리고 복잡한 앱을 구현할 때에는 Redux가 필수입니다. 리덕스(Redux)를 사용하지 않을 때와 사용할 때의 차이점은 아래 그림이 잘 표현하고 있습니다. 필요한 모듈 설치하기 expo-cli가 설치되어 있지 않으...

Read

NativeBase UI 컴포넌트 라이브러리 사용하기

같이 읽으면 좋은 글 2019년에 알아야 할 React Native UI 컴포넌트 라이브러리 NativeBase는 React Native를 위한 크로스 플랫폼 UI 컴포넌트 오픈 소스이다. 현재 버전 v2.7.0까지 릴리즈 되었다. 그리고 KitchenSink에서 NativeBase로 구현된 샘플 앱과 예제 소스를 확인할 수 있다. NativeBase 처...

Read

리액트 네이티브에서 steem-js 사용하기

React Native에서 steem-js 라이브러리를 설치하여 사용하는 방법입니다. React Native에는 standard node modules이 포함되어 있지 않습니다. 그래서 제가 안내하는 방법으로 설치해야 React Native에서 steem-js 사용이 가능합니다. * * * React Native 프로젝트 생성과 steem-js 설치 Re...

Read

TO-DO 앱 만들기 #5

리액트 네이티브(React Native)로 할 일 관리앱(To-Do App)을 만들기 마지막 강좌입니다. 이번에는 로컬 스토리지에 데이터를 저장하고 불러오는 기능을 구현하고, 앱 배포하는 방법을 알아봅니다. 이전 강좌에서 계속 이어지는 내용입니다. [React Native] TO-DO 앱 만들기 #1 [React Native] TO-DO 앱 만들기 #2...

Read

TO-DO 앱 만들기 #4

리액트 네이티브(React Native)로 할 일 관리앱(To-Do App)을 만들기입니다. 이전 강좌에서 계속 이어지는 내용입니다. [React Native] TO-DO 앱 만들기 #1 [React Native] TO-DO 앱 만들기 #2 [React Native] TO-DO 앱 만들기 #3 이번 강좌에서는 할 일을 체크하는 기능과 삭제 기능을 구현합니...

Read

TO-DO 앱 만들기 #3

리액트 네이티브(React Native)로 할 일 관리앱(To-Do App)을 만들기입니다. 이전 강좌에서 계속 이어지는 내용입니다. [React Native] TO-DO 앱 만들기 #1 [React Native] TO-DO 앱 만들기 #2 이전 강좌에서 할 일을 새로 추가하는 기능을 구현했습니다. 이번에는 추가된 할 일을 목록 화면에 출력해봅니다. *...

Read

TO-DO 앱 만들기 #2

이전 강좌에서 이어지는 내용입니다. 이번에는 To-Do앱에서 할 일을 등록하는 기능을 구현합니다. * * * App.js 수정하기 App 컴포넌트 클래스에 state를 추가한다. export default class App extends React.Component { // state 추가함. state = { todos: [] } s...

Read

TO-DO 앱 만들기 #1

이번 강좌에서는 리액트 네이티브(React Native)로 단순한 할 일 관리앱(To-Do App)을 만들어 봅니다. * * * expo-cli 설치 이전에는 create-react-native-app 도구를 사용해서 리액트 네이티브 프로젝트를 생성했다. 하지만, 지금은 expo-cli를 사용하여 프로젝트를 생성한다. 아래와 같이 expo-cli를 설치하자...

Read

리액트 네이티브 날씨앱 만들기 #4

리액트 네이티브로 날씨앱 만들기 네번째 강좌 리액트 네이티브를 사용하여 날씨앱을 만드는 네번째 강좌입니다. 이번에는 styles를 이용하여 화면을 이쁘게 디자인합니다. 이전글 [React Native #1] 리액트 네이티브 시작하기 [React Native #2] 리액트 네이티브 날씨앱 만들기 #1 [React Native #3] 리액트 네이티브 날씨앱...

Read

리액트 네이티브 날씨앱 만들기 #3

리액트 네이티브로 날씨앱 만들기 세번째 강좌 리액트 네이티브를 사용하여 날씨앱을 만드는 세번째 강좌입니다. 이번에는 날씨 API 데이터를 이용해서 화면을 구현합니다. 이전글 [React Native #1] 리액트 네이티브 시작하기 [React Native #2] 리액트 네이티브 날씨앱 만들기 #1 [React Native #3] 리액트 네이티브 날씨앱 만...

Read

리액트 네이티브 날씨앱 만들기 #2

리액트 네이티브로 날씨앱 만들기 두번째 강좌 리액트 네이티브를 사용하여 날씨앱을 만드는 두번째 강좌입니다. 이번에는 GPS위치정보로 날씨API를 조회합니다. 이전글 [React Native #1] 리액트 네이티브 시작하기 [React Native #2] 리액트 네이티브 날씨앱 만들기 #1 날씨 조회 API 서비스 가입하기 날씨 정보를 조회하기 위해서 op...

Read

리액트 네이티브 날씨앱 만들기

리액트 네이티브로 날씨앱 만들기 리액트 네이티브를 사용하여 날씨앱을 만드는 첫번째 강좌입니다. 간단하게 현재 위치(GPS좌표)를 읽어 날씨를 조회하여 보여줄 것입니다. 기능을 하나씩 천천히 구현하면서 진행하겠습니다. 이전글 [React Native #1] 리액트 네이티브 시작하기 리액트 네이티브 프로젝트 생성 $ create-react-native-app...

Read

리액트 네이티브 시작하기

리액트 네이티브란? 리액트 네이티브(React Native)는 iOS와 안드로이드 앱 개발을 위한 라이브러리이다. 자바스크립트로 구현된 기존의 모바일앱들은 웹뷰를 이용한 하이브리드 방식이었다. 하지만 리액트 네이티브는 자바스크립트로 개발하지만, 화면 인터페이스는 네이티브 위젯으로 컴파일하여 빌드된다. 리액트 네이티브는 네이티브 UI를 사용하여 빠른 사용자...

Read