1. Expo Cli 1) 설치 npm install expo-cli --global 2) 프로젝트 생성 단, blank 템플릿을 사용해주어야 한다. expo init rn-first-app 3) Expo Client 구글 플레이스토어 혹은 앱 스토어에서 'Expo Client'를 다운받고, 'npm start'를 통해 expo-cli에서 나온 바코드를 인식한뒤 다운받은 'Expo Client'로 개발한 앱을 확인할 수 있다. 4) Debugging 기본 오류 메시지 Expo-Cli console.log 크롬 개발자 모드를 이용한 디버깅 및 브레이크 포인트 사용 시뮬레이터 Toggle Inspector (UI Debugging) React Native Debugger 툴 사용 5) Device Devic..

1. TDD 1) TDD 단계 ReadMe Driven Development : 어떤 요구사항 어떤 결과가 예측되어야하는지 기술하는 단계 Make it fail : 테스트 코드만 작성하고 개발을 진행하지 않음 Make it green : 작성한 테스트 코드가 통과하도록 실제 코드를 작업하는 단계 Refactoring 2) React Native 해외에서 널리사용되고 개발자들이 선호하는 플랫폼이다. 너무 잦은 업데이트로 인한 어려움이 있다. 아직까지는 국내에서는 많이 사용하고 있지 않다. 3) 개발 환경 설정 JEST 라이브러리 : React-Native-Cli 로 하면 기본적으로 JEST가 포함되어있다. (1) Enzyme 라이브러리 : 에어비엔비에서 제공되며, 리액트 컴포넌트 테스트 라이브러리로 컴포넌..

1. Dimensions Dimensions의 경우 화면의 크기 정보를 받아오는데 유용하다. Dimensions는 주로 fontScale에 따른 예외처리를 할 때 사용된다. 극히 드물지만 사용자가 단말기 설정에서 디바이스 전체 폰트 스케일을 변경하는 경우, 개발한 앱이 이상해질 수 있기 때문이다. import { View, Text, StyleSheet, Platform, Dimensions } from 'react-native'; ... functionA = () => { if(Dimensions.get('window').fontScale === 1) { console.warn('Good') } else { console.warn('Error, The font scale must be 1') } } r..

1. Platform 지원하는 버전 확인과 Platform 별 스타일 및 출력 텍스트를 다르게 하는 방법은 다음과 같다. import React, { Component } from 'react'; import { View, Text, StyleSheet, Platform } from 'react-native'; import Supertext from './src/utils/supertext' class App extends Component { checkSupport = () => { if(Platform.OS === 'ios') { if(Platform.Version < 13.4) { return false; } } else { if(Platform.Version < 27) { return false;..

1. 재사용 가능한 Component 재사용이 가능한 Component는 다음과 같이 적용할 수 있다. 쉽게 말해, 기본 템플릿에 나만의 색상을 다르게 적용하는 느낌이다. 즉, 기본 템플릿을 사용할 수도 있고, 기본 템플릿에 개별적으로 스타일, 텍스트 등을 수정할 수 있는 재사용한 Component로 설계를 할 수 있다. import React, { Component } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import Supertext from './src/utils/supertext' class App extends Component { render() { return ( Hello World 1 Hello Worl..

1. Debugger Debugger는 개발한 코드를 디버깅(상태와 변수값을 확인 등등)할 때 사용하는 툴이다. 깃 허브(github.com/jhen0409/react-native-debugger)에서 설치가 가능하며 주의해야할 점으로는, React Native 버전이 0.61 이하일 경우 Debugger는 0.10, 0.62 이상일 경우 0.11 버전을 사용해야한다. 개발 된 앱과의 연결은 시뮬레이터에서 Debug 버튼으로 적용하면 된다. ※ 리덕스에 대한 개념을 잘 알고 있다면 더욱더 유용하게 활용할 수 있다.