로메오의 블로그

Appcenter란? react native나 cordova 같은 hybrid 앱을 재설치 없이 원격으로 업데이트 할 수 있습니다. Appcenter 가입 https://appcenter.ms/ microsoft appcenter 가입합니다. appcenter-cli 설치 $ npm install -g appcenter-cli appcenter 로그인 $ appcenter login 브라우저가 열리면 Authentication 코드를 복사합니다. Access code를 붙여넣기 합니다. App project 생성하기 $ appcenter apps create -d FirstProject -o Android -p React-Native $ appcenter apps create -d FirstProject..

props가 적용된 화면 개발하기 App.js import React, { Component } from 'react'; import { StyleSheet, View, } from 'react-native'; import Props from './src/Props' export default class App extends Component { render() { return ( ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); src/Props.js import React, { Compone..

서버에서 받을 데이터를 Mock 데이터로 테스트 해보겠습니다. 데이터는 Facebook의 react-native 레퍼지토리에 있는 json 파일을 이용해 보겠습니다. 주소는 http://facebook.github.io/react-native/movies.json { "title": "The Basics - Networking", "description": "Your app fetched this from a remote endpoint!", "movies": [ { "id": "1", "title": "Star Wars", "releaseYear": "1977" }, { "id": "2", "title": "Back to the Future", "releaseYear": "1985" }, { "id":..

화면에 Element가 있는지 없는지를 테스트 합니다. 화면 코딩 /src/Element.js import React, { Component } from 'react'; import { View, TextInput, } from 'react-native'; export default class Element extends Component { render() { return ( ); } } Test Code 작성하기 /__test__/Function-test.js import 'react-native'; import React from 'react'; import Element from '../src/Element'; import renderer from 'react-test-renderer'; // e..

화면 코딩 /src/State.js import React, { Component } from 'react'; import { View, } from 'react-native'; export default class State extends Component { constructor() { super() this.state = { data: 0 } } // test 할 함수 multiple(x) { // state를 변경한다. this.setState({ data: x * 2 }) } render() { return ( ); } } Test Code 작성하기 /__test__/State-test.js import 'react-native'; import React from 'react'; import S..

화면 코딩 /src/Function.js import React, { Component } from 'react'; import { View, } from 'react-native'; export default class Function extends Component { // Test 할 function을 만든다. // 입력된 숫자의 *2를 반환한다. multiple(x) { return x * 2 } render() { return ( ); } } Test Code 작성하기 /__test__/Function-test.js import 'react-native'; import React from 'react'; import Function from '../src/Function'; import rend..

화면 코딩하기 /App.js import React, { Component } from 'react'; import { StyleSheet, Text, View, } from 'react-native'; export default class App extends Component { render() { return ( Hello ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); Build 하기 $ react-native run-android Test Code 작성 /__test__/App-tes..

Android Studio에서 안드로이드 에뮬레이터를 실행하는데, Android Studio를 실행하지 않고 터미널에서 command로 Android Emulator를 실행하는 방법입니다. emulator 버전확인하기 $ emaulator -verison AVDS 목록확인하가 $ emulator --list-avds emulator 실행하기 $ emulator -avd Nexus_6_API_25 옵션 사용하기 https://developer.android.com/studio/run/emulator-commandline