SlideShare a Scribd company logo
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
감사합니다.

More Related Content

What's hot

Log design
Log designLog design
Log design
Soo-Kyung Choi
 
로그 기깔나게 잘 디자인하는 법
로그 기깔나게 잘 디자인하는 법로그 기깔나게 잘 디자인하는 법
로그 기깔나게 잘 디자인하는 법
Jeongsang Baek
 
채팅서버의 부하 분산 사례
채팅서버의 부하 분산 사례채팅서버의 부하 분산 사례
채팅서버의 부하 분산 사례
John Kim
 
Windows Registered I/O (RIO) vs IOCP
Windows Registered I/O (RIO) vs IOCPWindows Registered I/O (RIO) vs IOCP
Windows Registered I/O (RIO) vs IOCP
Seungmo Koo
 
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
Hyunjik Bae
 
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
Chanwoong Kim
 
svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드
Insub Lee
 
신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]
Yurim Jin
 
GIT_In_90_Minutes
GIT_In_90_MinutesGIT_In_90_Minutes
GIT_In_90_Minutes
vimukthirandika
 
[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유
[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유
[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유
Hyojun Jeon
 
AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)
AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)
AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)Brian Hong
 
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
Seongyun Byeon
 
API for Beginners
API for BeginnersAPI for Beginners
API for Beginners
Sébastien Saunier
 
대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)
대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)
대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)
Jaikwang Lee
 
게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치Seungjae Lee
 
REST API 설계
REST API 설계REST API 설계
REST API 설계
Terry Cho
 
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
Amazon Web Services Korea
 
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
Dan Kang (강동한)
 
데이터 분석 프로젝트 관리 방법론
데이터 분석 프로젝트 관리 방법론데이터 분석 프로젝트 관리 방법론
데이터 분석 프로젝트 관리 방법론
Dennis Lee
 
도메인 주도 설계 (Domain Driven Design)
도메인 주도 설계 (Domain Driven Design)도메인 주도 설계 (Domain Driven Design)
도메인 주도 설계 (Domain Driven Design)
Ashal aka JOKER
 

What's hot (20)

Log design
Log designLog design
Log design
 
로그 기깔나게 잘 디자인하는 법
로그 기깔나게 잘 디자인하는 법로그 기깔나게 잘 디자인하는 법
로그 기깔나게 잘 디자인하는 법
 
채팅서버의 부하 분산 사례
채팅서버의 부하 분산 사례채팅서버의 부하 분산 사례
채팅서버의 부하 분산 사례
 
Windows Registered I/O (RIO) vs IOCP
Windows Registered I/O (RIO) vs IOCPWindows Registered I/O (RIO) vs IOCP
Windows Registered I/O (RIO) vs IOCP
 
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
프라우드넷의 연결 유지 기능과 홀펀칭-윤현민
 
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
 
svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드
 
신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]
 
GIT_In_90_Minutes
GIT_In_90_MinutesGIT_In_90_Minutes
GIT_In_90_Minutes
 
[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유
[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유
[NDC18] 야생의 땅 듀랑고의 데이터 엔지니어링 이야기: 로그 시스템 구축 경험 공유
 
AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)
AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)
AWS와 함께 한 쿠키런 서버 Re-architecting 사례 (Gaming on AWS)
 
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
 
API for Beginners
API for BeginnersAPI for Beginners
API for Beginners
 
대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)
대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)
대용량 로그분석 Bigquery로 간단히 사용하기 (20170215 T아카데미)
 
게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치게임 애셋 스트리밍 패치
게임 애셋 스트리밍 패치
 
REST API 설계
REST API 설계REST API 설계
REST API 설계
 
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
 
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
[Play.node] node.js 를 사용한 대규모 글로벌(+중국) 서비스
 
데이터 분석 프로젝트 관리 방법론
데이터 분석 프로젝트 관리 방법론데이터 분석 프로젝트 관리 방법론
데이터 분석 프로젝트 관리 방법론
 
도메인 주도 설계 (Domain Driven Design)
도메인 주도 설계 (Domain Driven Design)도메인 주도 설계 (Domain Driven Design)
도메인 주도 설계 (Domain Driven Design)
 

Similar to React Native를 사용한
 초간단 커뮤니티 앱 제작

React 실무활용 이야기
React 실무활용 이야기React 실무활용 이야기
React 실무활용 이야기
철민 배
 
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
Tae-Seong Park
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
양재동 코드랩
 
react-ko.pdf
react-ko.pdfreact-ko.pdf
react-ko.pdf
ssuser65180a
 
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
React Hooks 마법. 그리고 깔끔한 사용기
React Hooks 마법. 그리고 깔끔한 사용기React Hooks 마법. 그리고 깔끔한 사용기
React Hooks 마법. 그리고 깔끔한 사용기
NAVER SHOPPING
 
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
Jiam Seo
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&Csys4u
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdf
Hyosang Hong
 
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
Young-Beom Rhee
 
React native 개발 및 javascript 기본
React native 개발 및 javascript 기본React native 개발 및 javascript 기본
React native 개발 및 javascript 기본
Tj .
 
Spring boot DI
Spring boot DISpring boot DI
Spring boot DI
Hyosang Hong
 
Klaytn Developer Meetup_20191022
Klaytn Developer Meetup_20191022Klaytn Developer Meetup_20191022
Klaytn Developer Meetup_20191022
Klaytn
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
 
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
병대 손
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
HyungKuIm
 
[JS] Function.prototype.bind
[JS] Function.prototype.bind[JS] Function.prototype.bind
[JS] Function.prototype.bind
Jinhyuck Kim
 

Similar to React Native를 사용한
 초간단 커뮤니티 앱 제작 (20)

React 실무활용 이야기
React 실무활용 이야기React 실무활용 이야기
React 실무활용 이야기
 
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
 
react-ko.pdf
react-ko.pdfreact-ko.pdf
react-ko.pdf
 
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
(스프링프레임워크 강좌)스프링부트개요 및 HelloWorld 따라하기
 
React Hooks 마법. 그리고 깔끔한 사용기
React Hooks 마법. 그리고 깔끔한 사용기React Hooks 마법. 그리고 깔끔한 사용기
React Hooks 마법. 그리고 깔끔한 사용기
 
Modern android
Modern androidModern android
Modern android
 
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
[자마린교육/자마린실습]자바,스프링프레임워크(스프링부트) RESTful 웹서비스 구현 실습,자마린에서 스프링 웹서비스를 호출하고 응답 JS...
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&C
 
Javascript 교육자료 pdf
Javascript 교육자료 pdfJavascript 교육자료 pdf
Javascript 교육자료 pdf
 
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
Javascript 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context), Lexical En...
 
React native 개발 및 javascript 기본
React native 개발 및 javascript 기본React native 개발 및 javascript 기본
React native 개발 및 javascript 기본
 
Spring boot DI
Spring boot DISpring boot DI
Spring boot DI
 
Klaytn Developer Meetup_20191022
Klaytn Developer Meetup_20191022Klaytn Developer Meetup_20191022
Klaytn Developer Meetup_20191022
 
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
 
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
 
Eclipse RCP 1/2
Eclipse RCP 1/2Eclipse RCP 1/2
Eclipse RCP 1/2
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
 
[JS] Function.prototype.bind
[JS] Function.prototype.bind[JS] Function.prototype.bind
[JS] Function.prototype.bind
 

More from Taegon Kim

FE로 취업 전에 알았으면 좋았을 것들
FE로 취업 전에 알았으면 좋았을 것들FE로 취업 전에 알았으면 좋았을 것들
FE로 취업 전에 알았으면 좋았을 것들
Taegon Kim
 
프론트엔드 코딩 컨벤션 자동화 도구
프론트엔드 코딩 컨벤션 자동화 도구프론트엔드 코딩 컨벤션 자동화 도구
프론트엔드 코딩 컨벤션 자동화 도구
Taegon Kim
 
Universal Rendering
Universal RenderingUniversal Rendering
Universal Rendering
Taegon Kim
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
Taegon Kim
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
Taegon Kim
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
Taegon Kim
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
Taegon Kim
 
Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시
Taegon Kim
 
진화하는 소셜 큐레이션 서비스와 관련 기술
진화하는 소셜 큐레이션 서비스와 관련 기술진화하는 소셜 큐레이션 서비스와 관련 기술
진화하는 소셜 큐레이션 서비스와 관련 기술
Taegon Kim
 
XpressEngine : 보드에서 CMS로
XpressEngine : 보드에서 CMS로XpressEngine : 보드에서 CMS로
XpressEngine : 보드에서 CMS로
Taegon Kim
 
jQuery Trend
jQuery TrendjQuery Trend
jQuery Trend
Taegon Kim
 

More from Taegon Kim (11)

FE로 취업 전에 알았으면 좋았을 것들
FE로 취업 전에 알았으면 좋았을 것들FE로 취업 전에 알았으면 좋았을 것들
FE로 취업 전에 알았으면 좋았을 것들
 
프론트엔드 코딩 컨벤션 자동화 도구
프론트엔드 코딩 컨벤션 자동화 도구프론트엔드 코딩 컨벤션 자동화 도구
프론트엔드 코딩 컨벤션 자동화 도구
 
Universal Rendering
Universal RenderingUniversal Rendering
Universal Rendering
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 
패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션패스트캠퍼스 프론트엔드 강의 오리엔테이션
패스트캠퍼스 프론트엔드 강의 오리엔테이션
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시Fiddler: 웹 디버깅 프록시
Fiddler: 웹 디버깅 프록시
 
진화하는 소셜 큐레이션 서비스와 관련 기술
진화하는 소셜 큐레이션 서비스와 관련 기술진화하는 소셜 큐레이션 서비스와 관련 기술
진화하는 소셜 큐레이션 서비스와 관련 기술
 
XpressEngine : 보드에서 CMS로
XpressEngine : 보드에서 CMS로XpressEngine : 보드에서 CMS로
XpressEngine : 보드에서 CMS로
 
jQuery Trend
jQuery TrendjQuery Trend
jQuery Trend
 

React Native를 사용한
 초간단 커뮤니티 앱 제작

  • 1. React Native를 사용한
 초간단 커뮤니티 앱 제작 김태곤 | http://taegon.kim
  • 3. 이런 앱을 만들겁니다. 오늘 발표에서는 http://youtu.be/fRaC9jECxCg 참고
  • 5. < 발표자 20:05 0 대박!! 누구나 30분만에
 앱을 만들 수 있다는 건가요? 2015년 5월 6일 수요일 20:06 ... 그럴리가요? 저도 다 외워서 하는 겁니다. 20:06
  • 7. 개발환경 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
  • 8. 개발환경 프로젝트 폴더 및 파일 구성 TidevProject/ TidevProject.xcodeproj
 TidevProjectTests/
 iOS/ main.jsbundle AppDelegate.h AppDelegate.m ... node_modules/ react-native/ ...
 index.ios.js
 package.json 프로젝트 파일 iOS용 주요 파일 앱 JS 파일 번들 nodeJS 모듈 앱 시작 JS 파일
  • 9. 개발환경 5. react-native-icons, underscore 패키지를 설치합니다.
 6. 패키지 서버를 실행합니다.
 7. 작성된 패키지 파일은 웹을 통해 접근할 수 있습니다. npm install react-native-icons underscore --save npm start open "http://localhost:8081/index.ios.bundle"
  • 10. React Native의 특징 본격 코딩에 앞서 을 살펴봅시다.
  • 11. 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');
  • 12. 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의 특징
  • 13. 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의 특징
  • 14. 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의 특징
  • 15. 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의 특징
  • 16. 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의 특징
  • 18. 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와의 비율 + 영역에 맞춰 늘거나 줄도록 설정
  • 19. Flexbox 1. 부모 컨테이너와 자식 노드의 관계로 정의합니다. 2. 자식 노드를 배치하는 방법은 컨테이너가 정합니다. 3. 자식 노드가 차지하는 영역의 크기는 자식 노드가 정합니다. 1 11
  • 20. Flexbox 1 11 .container { flex-direction: row; } .children { flex: 1; }
  • 21. Flexbox 1 12 .container { flex-direction: row; } .children { flex: 1; } .children:first-child { flex: 2; } 첫 번째 자식 노드는
 2의 비율을 차지함.
  • 22. Flexbox 1 1100px .container { flex-direction: row; } .children { flex: 1; } .children:first-child { width: 100px; } 첫 번째 자식 노드가 100px 고정폭으로
 표현되고 나머지 영역을 Flexible box가 비율대로 나누어 가짐.
  • 23. Flexbox 1 1100px .container { flex-direction: row; align-items: flex-start; } .children { flex: 1; } .children:first-child { width: 100px; }
  • 24. Flexbox 1 1100px .container { flex-direction: row; align-items: flex-start; } .children { flex: 1; } .children:first-child { width: 100px; } flex-end;
  • 25. Flexbox 1 1100px .container { flex-direction: row; align-items: flex-start; } .children { flex: 1; } .children:first-child { width: 100px; } center;
  • 26. Flexbox 1 1100px .container { flex-direction: row; align-items: flex-start; } .children { flex: 1; } .children:first-child { width: 100px; } stretch;
  • 27. Flexbox 1 1 100px.container { flex-direction: row; align-items: flex-start; } .children { flex: 1; } .children:first-child { width: 100px; } stretch; column; height: 100px;
  • 28. 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/
  • 30. 코딩 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
  • 31. 코딩 프로젝트 폴더 및 파일 구성 App/ App.js
 TopicList.js TopicListItem.js TopicView.js TopicMixin.js contentTemplate.js
  • 32. 코딩 프로젝트 폴더 및 파일 구성 App/ App.js
 TopicList.js TopicListItem.js TopicView.js TopicMixin.js contentTemplate.js <WebView />
  • 34. 회고 1. React를 알면 빠르게 만들 수 있다.
 = 모르면 학습 시간이 필요하다. 2. Flexbox 레이아웃과 CSS 비슷한 스타일링은 편하다. 3. 아직 다소 불안정하다.
 - 여전히 수정해야 할 버그가 많다.
 - 다행히 상당히 빠르게 패치가 되고 있다.
 - 크롬 디버거 연결에 안정성 좀... ㅠ_ㅠ 4. 네이티브를 아예 모르면 힘들다.
 - 확장 기능을 사용하려해도 알아야 한다.
 - Objective-C에 대한 눈치 정도라도 있어야 한다.
 - 많이는 몰라도 된다.
  • 35. 오픈 소스로 공개되어 있습니다. 오늘 코드는 http://github.com/taggon/tidev