로메오의 블로그

화면에 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

예제로 사진갤러리에서 사진을 선택하는 plugin을 사용해 보겠습니다. react-native-image-picker 설치하기 $ cd /my/project/path/ $ cd firstProject $ npm install --save react-native-image-picker 라이브러리 등록하기 $ react-native link react-native-image-picker react-native-image-picker 제거하기 라이브러리 등록해제하기 $ react-native unlink react-native-image-picker 플러그인 삭제하기 $ npm uninstall --save react-native-image-picker

React 목록 React Native Cli 설치하기 $ sudo npm install -g react-native-cli React Native Project 생성하기 $ cd /my/project/path/ $ react-native init firstProject Build 하기 $ cd firstProject $ react-native start --reset-cache Android Build 하기 react-native start 한 터미널을 그대로 두고 새로운 터미널을 엽니다. $ cd /my/project/path/firstProject $ react-native run-android socket 통신 오류가 날경우 $ react-native run-android --port=8081 i..

$ node --inspect-brk index.js --inspect-brk 옵션을 사용하면 크롬 devtools가 실행되기 전까지 서버는 대기하게 됩니다. 크롬에서 chrome://inspect/#devices 엽니다. inpect를 누릅니다. break 상태로 devtools가 실행되면 디버깅을 할수 있습니다.