React Native를 사용한
초간단 커뮤니티 앱 제작
김태곤 | http://taegon.kim

Who am I?
@taggon
http://taegon.kim
NHN NEXT

이런 앱을 만들겁니다.
오늘 발표에서는
http://youtu.be/fRaC9jECxCg 참고

30분만에 만듭니다.
이런 앱을

< 발표자
20:05 0
대박!! 누구나 30분만에
앱을 만들 수 있다는 건가요?
2015년 5월 6일 수요일
20:06
... 그럴리가요? 저도
다 외워서 하는 겁니다.
20:06

개발환경
우선
을 구성합니다.

개발환경
1. Xcode는 당연히 필수입니다.
2. node, watchman, flow를 설치합니다.
3. React Native 클라이언트 도구를 설치합니다.
4. 프로젝트를 생성합니다.
brew install node 필수. iojs로 대체 가능
brew install watchman 권장. 파일 변경 감시
brew install flow 선택. 정적 타입 체커
npm install -g react-native-cli
react-native init TidevProject

개발환경
프로젝트 폴더 및 파일 구성
TidevProject/
TidevProject.xcodeproj
TidevProjectTests/
iOS/
main.jsbundle
AppDelegate.h
AppDelegate.m
...
node_modules/
react-native/
...
index.ios.js
package.json
프로젝트 파일
iOS용 주요 파일
앱 JS 파일 번들
nodeJS 모듈
앱 시작 JS 파일

개발환경
5. react-native-icons, underscore 패키지를 설치합니다.
6. 패키지 서버를 실행합니다.
7. 작성된 패키지 파일은 웹을 통해 접근할 수 있습니다.
npm install react-native-icons underscore --save
npm start
open "http://localhost:8081/index.ios.bundle"

React Native의 특징
본격 코딩에 앞서
을 살펴봅시다.

React Native의 특징
1. React와 같은 방식으로 컴포넌트를 만듭니다.
2. React 컴포넌트 특수 메소드와 속성도 그대로 동작합니다.
https://facebook.github.io/react/docs/component-specs.html 참고
3. NodeJS처럼 require를 통해 다른 모듈을 참조합니다.
var ComponentName = React.createClass({
render: function() {
return (
<View>
<Text>Hello, {name}</Text>
</View>
);
}
});
미리 정의된 네이티브 컴포넌트 사용
var React = require('react-native');

4. 일부 ES6, ES7 기능을 사용할 수 있습니다. (계속)
// Destructuring Assignment
var React = require('react-native');
var { View, Text } = React;
// var View = React.View, Text = React.Text; 와 같다.
// 클래스
class Component extends React.Component {
render() {
return <View />;
}
}
// 간편 메소드 선언
var Component = React.createClass({
render() {
return <View />;
}
});
컴포넌트 공통 처리를
직접 해야 해서 권장하지 않음
React Native의 특징

4. 일부 ES6, ES7 기능을 사용할 수 있습니다. (계속)
// Arrow function : 더 간결한 코드 + this 유지
/* (a, b) => this.method(a, b)
(function(a, b){ return this.method(a, b); }).bind(this)
arg => { this.method(arg) }
(function(arg){ this.method(arg); }).bind(this)
*/
var Component = React.createClass({
onSelect(event, switch) {
...
},
render() {
return <View onPress={(e) => this.onSelect(e,true)} />;
}
});
// 템플릿 문자열 (멀티라인도 가능)
var who = 'world';
var str = `Hello ${who}`;
React Native의 특징

4. 일부 ES6, ES7 기능을 사용할 수 있습니다.
https://facebook.github.io/react-native/docs/javascript-environment.html 참고
5. AppRegistry를 통해 시작 컴포넌트를 설정해야 합니다.
// Promise 객체
Promise.resolve(3)
.then(data => {
...
})
.catch(reason => {
console.log(reason);
});
var {AppRegistry} = require('react-native');
...
AppRegistry.registerComponent('Tidev', () => App);
React Native의 특징

6. 스타일은 객체처럼 만들고 프로퍼티로 전달합니다.
https://facebook.github.io/react-native/docs/style.html 참고
var styles = StylesSheet.create({
titleContainer: {
flex: 1,
flexDirection: 'row'
},
title: {
fontSize: 16,
color: 'white'
}
});
...
<View style={styles.titleContainer}>
<Text style={styles.title}>Hello</Text>
<Text>World</Text>
</View>
React Native의 특징

7. XMLHttpRequest, Fetch API를 통해 통신합니다.
https://facebook.github.io/react-native/docs/network.html 참고
fetch('https://site.com/path', options)
.then( response => response.text() )
.then( responseText => {
console.log(responseText);
})
.catch( error => {
console.warn(error);
});
React Native의 특징

Flexbox
레이아웃을 정하는
에 대해 알아봅시다.

Flexbox
1. 부모 컨테이너와 자식 노드의 관계로 정의합니다.
2. 자식 노드를 배치하는 방법은 컨테이너가 정합니다.
3. 자식 노드가 차지하는 영역의 크기는 자식 노드가 정합니다.
.container {
flex-direction: row;
}
.children {
flex: 1;
}
<div class="container">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
축(axis)을 설정.
따라서 자식은 가로로 배열됨
형제 Flexbox와의 비율 +
영역에 맞춰 늘거나 줄도록 설정

Flexbox
1. 부모 컨테이너와 자식 노드의 관계로 정의합니다.
2. 자식 노드를 배치하는 방법은 컨테이너가 정합니다.
3. 자식 노드가 차지하는 영역의 크기는 자식 노드가 정합니다.
1 11

Flexbox
1 11
.container {
flex-direction: row;
}
.children {
flex: 1;
}

Flexbox
1 12
.container {
flex-direction: row;
}
.children {
flex: 1;
}
.children:first-child {
flex: 2;
} 첫 번째 자식 노드는
2의 비율을 차지함.

Flexbox
1 1100px
.container {
flex-direction: row;
}
.children {
flex: 1;
}
.children:first-child {
width: 100px;
}
첫 번째 자식 노드가 100px 고정폭으로
표현되고 나머지 영역을 Flexible box가
비율대로 나누어 가짐.

Flexbox
1 1100px
.container {
flex-direction: row;
align-items: flex-start;
}
.children {
flex: 1;
}
.children:first-child {
width: 100px;
}

Flexbox
1 1100px
.container {
flex-direction: row;
align-items: flex-start;
}
.children {
flex: 1;
}
.children:first-child {
width: 100px;
}
flex-end;

Flexbox
1 1100px
.container {
flex-direction: row;
align-items: flex-start;
}
.children {
flex: 1;
}
.children:first-child {
width: 100px;
}
center;

Flexbox
1 1100px
.container {
flex-direction: row;
align-items: flex-start;
}
.children {
flex: 1;
}
.children:first-child {
width: 100px;
}
stretch;

Flexbox
1
1
100px.container {
flex-direction: row;
align-items: flex-start;
}
.children {
flex: 1;
}
.children:first-child {
width: 100px;
}
stretch;
column;
height: 100px;

Flexbox
• A Complete guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Flexbox Playground
https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground
• React Native: Flexbox
https://facebook.github.io/react-native/docs/flexbox.html
• W3C: CSS Flexible Box Layout Module Level 1
http://www.w3.org/TR/css-flexbox-1/

코딩
이제부터
을 시작합니다.

코딩
TidevProject/
TidevProject.xcodeproj
TidevProjectTests/
iOS/
node_modules/
index.ios.js
package.json
프로젝트 폴더 및 파일 구성
App/
App.js
TopicList.js
TopicListItem.js
TopicView.js
TopicMixin.js
contentTemplate.js

코딩
프로젝트 폴더 및 파일 구성
App/
App.js
TopicList.js
TopicListItem.js
TopicView.js
TopicMixin.js
contentTemplate.js

코딩
프로젝트 폴더 및 파일 구성
App/
App.js
TopicList.js
TopicListItem.js
TopicView.js
TopicMixin.js
contentTemplate.js
<WebView />

회고를 해보자면...
개발 과정에 대해

회고
1. React를 알면 빠르게 만들 수 있다.
= 모르면 학습 시간이 필요하다.
2. Flexbox 레이아웃과 CSS 비슷한 스타일링은 편하다.
3. 아직 다소 불안정하다.
- 여전히 수정해야 할 버그가 많다.
- 다행히 상당히 빠르게 패치가 되고 있다.
- 크롬 디버거 연결에 안정성 좀... ㅠ_ㅠ
4. 네이티브를 아예 모르면 힘들다.
- 확장 기능을 사용하려해도 알아야 한다.
- Objective-C에 대한 눈치 정도라도 있어야 한다.
- 많이는 몰라도 된다.

오픈 소스로 공개되어 있습니다.
오늘 코드는
http://github.com/taggon/tidev

감사합니다.