ignite

다 태워버려라. 아하핫!

이프리트가 생각나는 아침입니다. 아, 물론 이 포스트가 아침에 딜리버리 될꺼란 보장은 없습니다.

오늘 소개해 드릴 프로젝트는 “React-Native” 를 할 건데 좋은 샘플 혹은 boilerplate를 찾는 개발자에게는 아주 좋은 소식입니다!

2016/06/26 Editor’s choice

infinitered/ignite
_ignite - The unfair starting CLI, Generator, and more for React Native_github.com

설치해 봅시다

npm을 이용해서 먼저 글로발 커맨드로 지정합니다.

$npm install -g react-native-ignite

그리고 나서

$ignite new MyApplication

을 해 주면 훌륭하게 프로젝트가 생성이 됩니다.

중간중간 프로젝트를 다운로드를 하면서 다운로드 시간은 1분 이하, 빌드시간은 30초 이하 뭐 이런 거짓부렁을 시전합니다. 최근 Mac 프로에 LTE네트워크에서 3분,1분 정도 더 걸린거 같습니다.

asciinema. 아래 링크를 클릭하셔야 됩니다. 아래 링크를

Asciinema 결과
_Recorded by keen_asciinema.org

일련의 과정이 마무리 되고 나면 ignite 앱이 완성이 됩니다.

$cd MyApplication

해서 폴더에 들어간 뒤

$react-native run-ios

해 주시면

이런 훌륭한 화면을 볼 수 있습니다.

왜 좋은 boilerplate 일까요?

제가 react-native를 개발하면서 어려움을 겪었던 부분 중에 하나가 테스트 프레임워크와 애니메이션등의 부분인데 이 프로젝트의 dependency를 확인하면 이런 가려운 부분들을 잘 버무려 놓았을 거 라는 일말의 기대감을 갖게 합니다.

react-native-mock 과 reactotron등은 조만간 한번 다뤄봐야 할 거 같고, AVA 같은 test-runner 도 확인을 해 보고 리뷰해야 할 거 같네요.

다음은 FullButton의 테스트 코드 입니다.

import test from 'ava'  
import React from 'react'  
import FullButton from '../../App/Components/FullButton'  
import { shallow } from 'enzyme'

test('component structure', t =\> {  
const wrapper = shallow(<FullButton onPress={() =\> {}} text='hi' /\>)

t.is(wrapper.name(), 'TouchableOpacity') // the right root component  
t.is(wrapper.children().length, 1) // has 1 child  
t.is(wrapper.children().first().name(), 'Text') // that child is Text  
})

test('onPress', t =\> {  
let i = 0 // i guess i could have used sinon here too... less is more i guess  
const onPress = () =\> i++  
const wrapper = shallow(<FullButton onPress={onPress} text='hi' /\>)

t.is(wrapper.prop('onPress'), onPress) // uses the right handler  
t.is(i, 0)  
wrapper.simulate('press')  
t.is(i, 1)  
})

By Keen Dev on June 26, 2016.

Exported from Medium on May 31, 2017.