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

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

제가 유용하게 사용하고 있는 개발 도구를 하나씩 소개할까 합니다. 저는 코딩할 때 주로 VS Code를 사용합니다. 그래서 VS Code에 설치하여 사용하면 좋은 확장(Extensions) 프로그램을 두 가지를 소개합니다. 저는 도구를 잘 사용하면 작업 효율이나 능률을 200% 이상 올릴 수 있다고 생각합니다. 나만 알고 있는 유용한 프로그램을 스팀잇에 소개해보세요.

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

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

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

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

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

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

2019년 새해 소원 릴레이 바톤을 넘겨주신 @codingart 님께 감사드립니다. 바톤을 받은 지 나흘이나 지났네요. 저는 개인적인 소망보다는 스팀잇에 바라는 점을 적어볼까 합니다. codingart님 말씀대로 저는 kr-dev 자리를 꾸준히 지켜보고 있습니다. 더 많은 분들이(비 개발자를 포함하여) 코딩에 관심을 가졌으면 좋겠어요. 그래서 스팀잇에 더 많은

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

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

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

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

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

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

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

기존에는 macOS용 패키지 관리자인 Homebrew를 사용하여 Node.js를 설치하여 사용했습니다. 그런데 Node.js를 버전 별로 관리할 필요성이 있어서 찾게 되었습니다. Node.js 버전을 관리해주는 도구는 대표적으로 nvm과 n이 있습니다. 저는 nvm을 사용합니다. NVM 설치하기 nvm 설치 방법은 NVM 설치 문서를 참고하였습니다. nvm은

Heroku Heroku는 간단하게 사용할 수 있는 가벼운 클라우드 서버입니다. 참고로, 우리가 많이 사용하고 있는 busy.org가 Heroku에서 호스팅 되고 있습니다. 게다가 무료 가격 정책도 있습니다. 무료는 매월 550시간 사용이 가능합니다. 신용카드 정보를 추가로 입력하면 매월 1000시간 사용이 가능합니다. 그리고 30분 동안 사용하지 않으면 자동으로

맥(Mac)에는 기본적으로 Python 2가 설치되어있다. Python 2를 그대로 두고, Python 3를 설치하여 사용하고 싶다면, 가상환경을 구성해서 Python 3를 사용할 수 있다. Virtualenv Virtualenv는 분리된 Python 환경을 만들어 주는 도구이다. 이 도구를 이용하면 개별 환경에 각각 다른 Python 버전을 구성할 수 있다.