SlideShare a Scribd company logo
오픈소스 라이브러리를 활용한
네이티브 어플리케이션에서의
데이터 저장과 통신
추승우
네이버 PWE개발랩
Hello
• 추승우
• 네이버 PWE개발랩
• 네이버메일앱 개발
• E-Mail : sungwoo.choo@navercorp.com
kswchoo@gmail.com
오늘 다루는 것
NATIVE
언제 네이티브 앱을 만들어야 할까요?
VS
언제 네이티브 앱을 만들어야 할까요?
VS
디바이스 제어 (카메라 등)가 필요하다
오프라인 사용이 필요하다
플랫폼별로 최적 UI를 만들고 싶다
애니메이션 사용량이 많다
포맷 변경이 갑자기/자주 일어나지 않는다
내용 포맷 변경이 자주 있다
다양한 플랫폼에서 사용하고 싶다
심사를 기다리지 않고 업데이트해야 한다
네이티브앱 하이브리드앱
일부분만 웹뷰를 사용하여 만들기도 합니다
• 공지사항, 고객문의 등의 여러 앱에서 사용하는 공
통기능을 웹뷰로 만드는 경우
• 컨텐츠의 자유도가 너무 높아서 웹뷰를 사용하여
내용을 구현하는 경우 (E-book 등)
• 지불결제 서비스 등 타사 연동을 위한 경우
비행기 안에서 스마트폰 써 보셨나요?
많은 모바일 어플리케이션은
네트워크가 아주 불안정한 상황이거나
심지어 오프라인일때도
동작할 수 있도록 설계됩니다.
Facebook
Twitter
네이버 메일
잘못된 예
개인화도구 (할일, 메일, 캘린더, 메모, 녹음기…)나
유틸리티, 게임류의 어플리케이션은
가급적 오프라인모드에서도 동작해야 합니다.
Demo App “기획서”
…
영화목록 영화상세
여러분의 기획자가 이런걸 만들어달라고 합니다
• 최근 개봉한 순서대로 영화를 보여주세요.
• 영화 상세정보도 보여주세요.
• 오프라인 모드에서도 최근 데이터 기반으로 보여주세요.
• 앱 실행중 데이터에 번동이 있으면 바꿔 주세요.
• 데이터를 덜썼으면 좋겠어요
• 배터리 적게 썼으면 좋겠어요
• “ CGV앱”처럼 만들어주세요.
일반적인 네이티브 앱
View Logic
Request
Response
SQLite
Event
3G/LTE
WiFi
서버
화살표가 있는 구간에서 모두 해결해야 할 문제가 하나 이상씩 있습니다.
모바일 네트워크
• 분당에서 대구까지 KTX를 타고 이동했다. 과연 IP가 바뀔까?
• 단말기 전원을 껐다 켰다. IP가 바뀔까?
• 미국에 도착하여 비행기에서 내리자마자 로밍을 켰다. 미국에 할당된 IP를 받아올까?
• 데이터통신중에 전화가 걸려오면 통신중인 세션이 끊어질까?
(3G Fallback)
No
Maybe
No
No
이런 질문 해 보셨나요?
LTE 모바일 네트워크
단말기 기지국 패킷
게이트웨이
터널관리
인증
핸드오버
앵커PPP Tunnel
UE : User Equipment
eNodeB : Evolved Node B
S-GW : Servicing Gateway
PDN-GW : Packet Data Network GW
MME : Mobile Management Entity
HSS : Home Subscriber Server
PCRF : Policy and Charging Rule Function
ePDG : Evolved Packet Data Gateway
바퀴를 새로 발명할 필요는 없습니다.
오픈소스 라이브러리를 최대한 활용하면
안정적이면서도 빠른 네이티브 앱 개발이 가능합니다.
View Logic
Request
Response
SQLite
Event
3G/LTE
WiFi
서버
HTTP 통신 구간
서버로 향하는 통신을 수행하고,
그 결과를 사용하여 자바 객체를 생성하는 부분
필요시 이미지 다운로드
한국 무선 통계
0
50
100
150
LTE 3G WIFI
0
10
20
30
40
50
LTE 3G WIFI
DN (Mbps) UP (Mbps)
자료: 벤치비, 미래창조과학부
ms
Mbps
지연시간 (Latency)
전송속도
0
10
20
30
40
50
60
CDMA
3G
LTE
WIBRO
백만명 국내 무선통신 사용자 현황
“30%의 사용자는 아직도 3G망을 사용 중”
믿을만하지 못한 무선 네트워크 환경 + 믿을만하지 못한 HTTP 라이브러리 = ?!
안드로이드는 기본적으로 두 가지의 HTTP 클라이언트를 제공합니다.
Apache HTTP Client HttpURLConnection
• 아파치에서 만든 HTTP 클라이언트.
• 최신 버전으로 제공은 안됨.
• 사용하기 복잡하고 무거움.
• 안드로이드 버전별로 약간씩 다른 행동.
• 버그가 많음.
둘다 Deserialization을 안해주므로, 좀 더 쓰기 편리한
써드파티 오픈소스 라이브러리도 많이 있습니다.
Volley OkHttp+Retrofit
• 이미지 처리에 특히 장점을 가지고 있음
• Google IO 에서 발표되었으나, follow up이
원활하지 않음.
• NIO기반으로 비교적 빠른 성능
• SPDY 지원
• Google 공식 컨퍼런스 등에서 사용된
적이 없음.
주: 기타 많은 라이브러리가 있습니다. HelloWorld 블로그에 있는 비교 포스트도 참고하세요.
HTTP 라이브러리 3G 성능측정
0
2
4
6
8
10
12
14
16
시나리오 1 시나리오 2 시나리오 3
AsyncTask Volley Retrofit + OkHttp
(초)
KT 3G / LG Nexus 5 / HTTP+SSL
시나리오 1 : 목록 API 5회
시나리오 2 : 목록 API 5회 + 상세 API 30회
시나리오 3 : 목록 API 30회 + 상세 API 100회
서버를 확인하세요 : Gzip, TCP slow start (keepalive)
0
100
200
300
400
500
600
700
800
900
Non-gzip Gzip
kb API 응답 크기 TCP 성능 (Slow start, congestion avoidance)
서버를 확인하세요 : SPDY
자료: SIGCOMM 2013, “Towards a SPDY’ier Mobile Web?”
• Nginx : http://nginx.org/en/docs/http/ngx_http_spdy_module.html
• Apache : https://code.google.com/p/mod-spdy/
SPDY는 보다 적은 수의 컨넥션을 활용하여 더 많은 데이터를 처리합니다.
다량의 API 콜이 발생하는 경우, API 수정 없이도 더 빨라집니다.
Retrofit http://square.github.io/retrofit/
서비스 선언
Public interface MovieListService {
@GET(“/movielist”)
List<MovieList> movieList();
@GET(“/moviedetail/{id}”)
MovieDetail movieDetail(@Path("id") int id);
}
RestAdapter restAdapter = new RestAdapter.Builder()
.setEndpoint(
"https://.../movielistdemo")
.build();
MovieListService service = restAdapter.create(MovieListService.class);
서비스 호출
List<MovieList> movieList = service.movieList();
서비스 호출 (비동기)
public interface MovieListService {
...
@GET(“/moviedetail/{id}”)
void movieDetail(@Path("id") int id, Callback<MovieDetail> callback);
}
service.movieDetail();
Picasso http://square.github.io/picasso/
Picasso.with(context)
.load(url)
.resize(50, 50) // 메모리 사용 절약을 위해 리사이즈
.centerCrop() // 가운데로 크롭
.setIndicatorsEnabled(true) // 캐시 모드 표시
.placeholder(R.drawable.image_placeholder) // 다운받아지기 전에 보여줄 리소스
.error(R.drawable.image_error) // 오류발생시 보여줄 리소스
.into(view);
View Logic
Request
Response
SQLite
Event
3G/LTE
WiFi
서버
데이터 저장
받아온 데이터를 로컬에 저장하고
필요시 다시 불러올 수 있는 로직
난 데이터를 저장하고 불러들이고 싶었을 뿐인데…
android.database.sqlite.SQLiteException: database is
locked
android.database.sqlite.SQLiteException: unable to open
database file
...
SQLite를 잘 사용하는 것은 절대 쉽지 않습니다.
대부분의 모바일 앱에서 필요한 것은 복잡한 SQL이 아니라,
인스턴스를 저장했다 불러내는 기능입니다…
GreenDAO
TestDaoGenerator.java
public static void main(String args[]) throws Exception {
Schema schema = new Schema(3, "me.sungwoo.listdemo.dao");
Entity movieList = schema.addEntity(“MovieList");
movieList.addIdProperty();
movieList.addStringProperty("title");
movieList.addStringProperty("description");
new DaoGenerator().generateAll(schema, args[0]);
}
Generator 프로젝트를 만들어 준다.
build.gradle
apply plugin: 'application'
apply plugin: 'java'
mainClassName = 'me.sungwoo.listdemo.daogenerator.TestDaoGenerator'
outputDir = '../app/src/main/java-gen'
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'de.greenrobot:DaoGenerator:1.3.0'
}
task createDocs {
def docs = file(outputDir)
docs.mkdirs()
}
run {
args outputDir
}
id title descrip
tion
1
2
3
http://greendao-orm.com
GreenDAO
DaoSession 생성
DaoMaster.DevOpenHelper helper = new DaoMaster.DevOpenHelper(this,
“moviedb", null);
SQLiteDatabase db = helper.getWritableDatabase();
DaoMaster daoMaster = new DaoMaster(db);
daoSession = daoMaster.newSession();
그냥 사용하면 끝!
자료 조회 (Select)
MovieListDao movieListDao = daoSession.getMovieListDao();
MovieList movies = listDao.queryBuilder()
.where(MovieListDao.Properties.Id.eq(id))
.orderDesc(MovieListDao.Properties.Id)
.list();
자료 삽입 (Insert)
MovieList item = new MovieList(null, "은하수를 여행하는 히치하이커", “42");
movieListDao.insert(movieList);
자료 삭제 (Delete)
movieListDao.deleteByKey(id);
SQLite Tip
WAL 사용
SQLiteDatabase db = SQLiteDatabase.openDatabase(“db", cursorFactory,
SQLiteDatabase.CREATE_IF_NECESSARY, myDatabaseErrorHandler);
db.enableWriteAheadLogging();
• API 16 부터 지원
• 쓰기를 모아서 수행하여 Lock 시간을 감소
• E_SQLITE_LOCKED 볼 일을 줄여줍니다!
View Logic
Request
Response
SQLite
Event
3G/LTE
WiFi
서버
이벤트 처리
언제 완료될 지 모르는 작업들이 끝났을 때
어느 쓰레드에서 무엇을 갱신해줘야 할까?
Event Bus의 활용
목록
View
상세정보
View
Logic
• 비동기로 완료된 작업이 어디로 값을 돌려줘야 할까?
• 데이터가 갱신되었는데 callback을 빼먹어서 버그 발생?
Event bus
Internet
새로운 데이터데이터 갱신 요청
“비동기적으로 연속적으로 처리되어야 할 작업들을
‘이벤트’로 정의하여 보다 부드럽게 구현”
Otto http://square.github.io/otto/
공용 이벤트 버스 생성
bus = new Bus(); // 일반 이벤트 버스
mainBus = new Bus(ThreadEnforcer.MAIN); // Main thread로 불러지는 버스
이벤트 수신자 (Subscriber)
@Subscribe public void updateMovieList(MovieList list) {
// Do something
}
bus.register(this);
이벤트 던지기
bus.post(new MovieList(1, "Hi", "There"));
예제 앱 오픈소스 스택
View Logic
Request
Response
SQLite
Event
3G/LTE
WiFi
서버
Android SDK
RetroFit
OkHttp
OttoGreenDAO
SQLite
User View Logic
Otto
GreenDAO
RetroFit
One more thing : iOS
iOS용 라이브러리 몇 가지를 소개합니다
HTTP 통신
• AFNetworking (OkHttp + Picasso + Retrofit)
• FastImageCache (Picasso)
Event Delivery
• NSNotification
• Tolo (otto)
DB Storage
• Core Data
• 암호화가 필요한 경우 : SQLCipher
DEMO
Q&A
감사합니다

More Related Content

What's hot

장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초
Kwangyoun Jung
 
Why javaScript?
Why javaScript?Why javaScript?
Why javaScript?
Kim Hunmin
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
WebFrameworks
 
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
병대 손
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
NAVER D2
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
NAVER D2
 
iOS App 개발 with React Native + ClojureScript
iOS App 개발 with React Native + ClojureScriptiOS App 개발 with React Native + ClojureScript
iOS App 개발 with React Native + ClojureScript
Cheolhee Han
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
Sangmin Yoon
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
Kim Hunmin
 
Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기
JinKwon Lee
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
NAVER D2
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
Taegon Kim
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
Taegon Kim
 
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
DoHyun Jung
 
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
YoungSu Son
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
NAVER D2
 
Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기
성일 한
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
NAVER D2
 
Django beginning
Django beginningDjango beginning
Django beginning
Woojing Seok
 

What's hot (19)

장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초
 
Why javaScript?
Why javaScript?Why javaScript?
Why javaScript?
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
React 애플리케이션 아키텍처 - 아무도 알려주지 않아서 혼자서 삽질했다.
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
 
iOS App 개발 with React Native + ClojureScript
iOS App 개발 with React Native + ClojureScriptiOS App 개발 with React Native + ClojureScript
iOS App 개발 with React Native + ClojureScript
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
 
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
 
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
 
Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기Python 으로 Slackbot 개발하기
Python 으로 Slackbot 개발하기
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
 
Django beginning
Django beginningDjango beginning
Django beginning
 

Viewers also liked

DEVIEW2013: Automating Performance Tests for Android Applications
DEVIEW2013: Automating Performance Tests for Android ApplicationsDEVIEW2013: Automating Performance Tests for Android Applications
DEVIEW2013: Automating Performance Tests for Android Applications
Kyungmin Lee
 
121 벡터기반 지하철 노선도 렌더링 엔진
121 벡터기반 지하철 노선도 렌더링 엔진121 벡터기반 지하철 노선도 렌더링 엔진
121 벡터기반 지하철 노선도 렌더링 엔진NAVER D2
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
Mu-ik Jeon
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
NAVER D2
 
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
NAVER D2
 
MVP 패턴 소개
MVP 패턴 소개MVP 패턴 소개
MVP 패턴 소개
beom kyun choi
 
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
Manjong Han
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신
NAVER D2
 

Viewers also liked (8)

DEVIEW2013: Automating Performance Tests for Android Applications
DEVIEW2013: Automating Performance Tests for Android ApplicationsDEVIEW2013: Automating Performance Tests for Android Applications
DEVIEW2013: Automating Performance Tests for Android Applications
 
121 벡터기반 지하철 노선도 렌더링 엔진
121 벡터기반 지하철 노선도 렌더링 엔진121 벡터기반 지하철 노선도 렌더링 엔진
121 벡터기반 지하철 노선도 렌더링 엔진
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
 
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
 
MVP 패턴 소개
MVP 패턴 소개MVP 패턴 소개
MVP 패턴 소개
 
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
Flask, Redis, Retrofit을 이용한 Android 로그인 서비스 구현하기
 
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신
 

Similar to NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신

HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
Miyu Park
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
JeongHeon Lee
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
수보 김
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5
Jonathan Jeon
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용jinwook shin
 
이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012devCAT Studio, NEXON
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
Hankyo
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
NAVER D2
 
구글 앱 엔진의 활용(Google App Engine) 2부
구글 앱 엔진의 활용(Google App Engine) 2부구글 앱 엔진의 활용(Google App Engine) 2부
구글 앱 엔진의 활용(Google App Engine) 2부
mosaicnet
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
Wonsuk Lee
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
Wonsuk Lee
 
React native development
React native developmentReact native development
React native development
SangSun Park
 
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
Youngjae Kim
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
NAVER D2
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
ssuser0e53c8
 
Realtime Big data Anaytics and Exampes of Daum (2013)
Realtime Big data Anaytics and Exampes of Daum (2013)Realtime Big data Anaytics and Exampes of Daum (2013)
Realtime Big data Anaytics and Exampes of Daum (2013)Channy Yun
 
[경북] I'mcloud openlight
[경북] I'mcloud openlight[경북] I'mcloud openlight
[경북] I'mcloud openlight
startupkorea
 
[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)
[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)
[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)
Sang Don Kim
 
Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기
Inho Kwon
 

Similar to NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신 (20)

HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
 
이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
 
구글 앱 엔진의 활용(Google App Engine) 2부
구글 앱 엔진의 활용(Google App Engine) 2부구글 앱 엔진의 활용(Google App Engine) 2부
구글 앱 엔진의 활용(Google App Engine) 2부
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
React native development
React native developmentReact native development
React native development
 
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
[Azure bootcamp2017] Azure App Service로 서비스 탄탄하게 관리하기
 
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
 
Realtime Big data Anaytics and Exampes of Daum (2013)
Realtime Big data Anaytics and Exampes of Daum (2013)Realtime Big data Anaytics and Exampes of Daum (2013)
Realtime Big data Anaytics and Exampes of Daum (2013)
 
[경북] I'mcloud openlight
[경북] I'mcloud openlight[경북] I'mcloud openlight
[경북] I'mcloud openlight
 
[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)
[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)
[Td 2015]개발하기 바쁜데 푸시서버와 메시지큐는 있는거 쓸래요(김영재)
 
Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기
 

NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신

  • 1. 오픈소스 라이브러리를 활용한 네이티브 어플리케이션에서의 데이터 저장과 통신 추승우 네이버 PWE개발랩
  • 2. Hello • 추승우 • 네이버 PWE개발랩 • 네이버메일앱 개발 • E-Mail : sungwoo.choo@navercorp.com kswchoo@gmail.com
  • 4. 언제 네이티브 앱을 만들어야 할까요? VS
  • 5. 언제 네이티브 앱을 만들어야 할까요? VS 디바이스 제어 (카메라 등)가 필요하다 오프라인 사용이 필요하다 플랫폼별로 최적 UI를 만들고 싶다 애니메이션 사용량이 많다 포맷 변경이 갑자기/자주 일어나지 않는다 내용 포맷 변경이 자주 있다 다양한 플랫폼에서 사용하고 싶다 심사를 기다리지 않고 업데이트해야 한다 네이티브앱 하이브리드앱
  • 6. 일부분만 웹뷰를 사용하여 만들기도 합니다 • 공지사항, 고객문의 등의 여러 앱에서 사용하는 공 통기능을 웹뷰로 만드는 경우 • 컨텐츠의 자유도가 너무 높아서 웹뷰를 사용하여 내용을 구현하는 경우 (E-book 등) • 지불결제 서비스 등 타사 연동을 위한 경우
  • 8. 많은 모바일 어플리케이션은 네트워크가 아주 불안정한 상황이거나 심지어 오프라인일때도 동작할 수 있도록 설계됩니다.
  • 13. 개인화도구 (할일, 메일, 캘린더, 메모, 녹음기…)나 유틸리티, 게임류의 어플리케이션은 가급적 오프라인모드에서도 동작해야 합니다.
  • 14. Demo App “기획서” … 영화목록 영화상세 여러분의 기획자가 이런걸 만들어달라고 합니다 • 최근 개봉한 순서대로 영화를 보여주세요. • 영화 상세정보도 보여주세요. • 오프라인 모드에서도 최근 데이터 기반으로 보여주세요. • 앱 실행중 데이터에 번동이 있으면 바꿔 주세요. • 데이터를 덜썼으면 좋겠어요 • 배터리 적게 썼으면 좋겠어요 • “ CGV앱”처럼 만들어주세요.
  • 15. 일반적인 네이티브 앱 View Logic Request Response SQLite Event 3G/LTE WiFi 서버 화살표가 있는 구간에서 모두 해결해야 할 문제가 하나 이상씩 있습니다.
  • 16. 모바일 네트워크 • 분당에서 대구까지 KTX를 타고 이동했다. 과연 IP가 바뀔까? • 단말기 전원을 껐다 켰다. IP가 바뀔까? • 미국에 도착하여 비행기에서 내리자마자 로밍을 켰다. 미국에 할당된 IP를 받아올까? • 데이터통신중에 전화가 걸려오면 통신중인 세션이 끊어질까? (3G Fallback) No Maybe No No 이런 질문 해 보셨나요?
  • 17. LTE 모바일 네트워크 단말기 기지국 패킷 게이트웨이 터널관리 인증 핸드오버 앵커PPP Tunnel UE : User Equipment eNodeB : Evolved Node B S-GW : Servicing Gateway PDN-GW : Packet Data Network GW MME : Mobile Management Entity HSS : Home Subscriber Server PCRF : Policy and Charging Rule Function ePDG : Evolved Packet Data Gateway
  • 18. 바퀴를 새로 발명할 필요는 없습니다. 오픈소스 라이브러리를 최대한 활용하면 안정적이면서도 빠른 네이티브 앱 개발이 가능합니다.
  • 19. View Logic Request Response SQLite Event 3G/LTE WiFi 서버 HTTP 통신 구간 서버로 향하는 통신을 수행하고, 그 결과를 사용하여 자바 객체를 생성하는 부분 필요시 이미지 다운로드
  • 20. 한국 무선 통계 0 50 100 150 LTE 3G WIFI 0 10 20 30 40 50 LTE 3G WIFI DN (Mbps) UP (Mbps) 자료: 벤치비, 미래창조과학부 ms Mbps 지연시간 (Latency) 전송속도 0 10 20 30 40 50 60 CDMA 3G LTE WIBRO 백만명 국내 무선통신 사용자 현황 “30%의 사용자는 아직도 3G망을 사용 중”
  • 21. 믿을만하지 못한 무선 네트워크 환경 + 믿을만하지 못한 HTTP 라이브러리 = ?! 안드로이드는 기본적으로 두 가지의 HTTP 클라이언트를 제공합니다. Apache HTTP Client HttpURLConnection • 아파치에서 만든 HTTP 클라이언트. • 최신 버전으로 제공은 안됨. • 사용하기 복잡하고 무거움. • 안드로이드 버전별로 약간씩 다른 행동. • 버그가 많음. 둘다 Deserialization을 안해주므로, 좀 더 쓰기 편리한 써드파티 오픈소스 라이브러리도 많이 있습니다. Volley OkHttp+Retrofit • 이미지 처리에 특히 장점을 가지고 있음 • Google IO 에서 발표되었으나, follow up이 원활하지 않음. • NIO기반으로 비교적 빠른 성능 • SPDY 지원 • Google 공식 컨퍼런스 등에서 사용된 적이 없음. 주: 기타 많은 라이브러리가 있습니다. HelloWorld 블로그에 있는 비교 포스트도 참고하세요.
  • 22. HTTP 라이브러리 3G 성능측정 0 2 4 6 8 10 12 14 16 시나리오 1 시나리오 2 시나리오 3 AsyncTask Volley Retrofit + OkHttp (초) KT 3G / LG Nexus 5 / HTTP+SSL 시나리오 1 : 목록 API 5회 시나리오 2 : 목록 API 5회 + 상세 API 30회 시나리오 3 : 목록 API 30회 + 상세 API 100회
  • 23. 서버를 확인하세요 : Gzip, TCP slow start (keepalive) 0 100 200 300 400 500 600 700 800 900 Non-gzip Gzip kb API 응답 크기 TCP 성능 (Slow start, congestion avoidance)
  • 24. 서버를 확인하세요 : SPDY 자료: SIGCOMM 2013, “Towards a SPDY’ier Mobile Web?” • Nginx : http://nginx.org/en/docs/http/ngx_http_spdy_module.html • Apache : https://code.google.com/p/mod-spdy/ SPDY는 보다 적은 수의 컨넥션을 활용하여 더 많은 데이터를 처리합니다. 다량의 API 콜이 발생하는 경우, API 수정 없이도 더 빨라집니다.
  • 25. Retrofit http://square.github.io/retrofit/ 서비스 선언 Public interface MovieListService { @GET(“/movielist”) List<MovieList> movieList(); @GET(“/moviedetail/{id}”) MovieDetail movieDetail(@Path("id") int id); } RestAdapter restAdapter = new RestAdapter.Builder() .setEndpoint( "https://.../movielistdemo") .build(); MovieListService service = restAdapter.create(MovieListService.class); 서비스 호출 List<MovieList> movieList = service.movieList(); 서비스 호출 (비동기) public interface MovieListService { ... @GET(“/moviedetail/{id}”) void movieDetail(@Path("id") int id, Callback<MovieDetail> callback); } service.movieDetail();
  • 26. Picasso http://square.github.io/picasso/ Picasso.with(context) .load(url) .resize(50, 50) // 메모리 사용 절약을 위해 리사이즈 .centerCrop() // 가운데로 크롭 .setIndicatorsEnabled(true) // 캐시 모드 표시 .placeholder(R.drawable.image_placeholder) // 다운받아지기 전에 보여줄 리소스 .error(R.drawable.image_error) // 오류발생시 보여줄 리소스 .into(view);
  • 27. View Logic Request Response SQLite Event 3G/LTE WiFi 서버 데이터 저장 받아온 데이터를 로컬에 저장하고 필요시 다시 불러올 수 있는 로직
  • 28. 난 데이터를 저장하고 불러들이고 싶었을 뿐인데… android.database.sqlite.SQLiteException: database is locked android.database.sqlite.SQLiteException: unable to open database file ... SQLite를 잘 사용하는 것은 절대 쉽지 않습니다. 대부분의 모바일 앱에서 필요한 것은 복잡한 SQL이 아니라, 인스턴스를 저장했다 불러내는 기능입니다…
  • 29. GreenDAO TestDaoGenerator.java public static void main(String args[]) throws Exception { Schema schema = new Schema(3, "me.sungwoo.listdemo.dao"); Entity movieList = schema.addEntity(“MovieList"); movieList.addIdProperty(); movieList.addStringProperty("title"); movieList.addStringProperty("description"); new DaoGenerator().generateAll(schema, args[0]); } Generator 프로젝트를 만들어 준다. build.gradle apply plugin: 'application' apply plugin: 'java' mainClassName = 'me.sungwoo.listdemo.daogenerator.TestDaoGenerator' outputDir = '../app/src/main/java-gen' dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'de.greenrobot:DaoGenerator:1.3.0' } task createDocs { def docs = file(outputDir) docs.mkdirs() } run { args outputDir } id title descrip tion 1 2 3 http://greendao-orm.com
  • 30. GreenDAO DaoSession 생성 DaoMaster.DevOpenHelper helper = new DaoMaster.DevOpenHelper(this, “moviedb", null); SQLiteDatabase db = helper.getWritableDatabase(); DaoMaster daoMaster = new DaoMaster(db); daoSession = daoMaster.newSession(); 그냥 사용하면 끝! 자료 조회 (Select) MovieListDao movieListDao = daoSession.getMovieListDao(); MovieList movies = listDao.queryBuilder() .where(MovieListDao.Properties.Id.eq(id)) .orderDesc(MovieListDao.Properties.Id) .list(); 자료 삽입 (Insert) MovieList item = new MovieList(null, "은하수를 여행하는 히치하이커", “42"); movieListDao.insert(movieList); 자료 삭제 (Delete) movieListDao.deleteByKey(id);
  • 31. SQLite Tip WAL 사용 SQLiteDatabase db = SQLiteDatabase.openDatabase(“db", cursorFactory, SQLiteDatabase.CREATE_IF_NECESSARY, myDatabaseErrorHandler); db.enableWriteAheadLogging(); • API 16 부터 지원 • 쓰기를 모아서 수행하여 Lock 시간을 감소 • E_SQLITE_LOCKED 볼 일을 줄여줍니다!
  • 32. View Logic Request Response SQLite Event 3G/LTE WiFi 서버 이벤트 처리 언제 완료될 지 모르는 작업들이 끝났을 때 어느 쓰레드에서 무엇을 갱신해줘야 할까?
  • 33. Event Bus의 활용 목록 View 상세정보 View Logic • 비동기로 완료된 작업이 어디로 값을 돌려줘야 할까? • 데이터가 갱신되었는데 callback을 빼먹어서 버그 발생? Event bus Internet 새로운 데이터데이터 갱신 요청 “비동기적으로 연속적으로 처리되어야 할 작업들을 ‘이벤트’로 정의하여 보다 부드럽게 구현”
  • 34. Otto http://square.github.io/otto/ 공용 이벤트 버스 생성 bus = new Bus(); // 일반 이벤트 버스 mainBus = new Bus(ThreadEnforcer.MAIN); // Main thread로 불러지는 버스 이벤트 수신자 (Subscriber) @Subscribe public void updateMovieList(MovieList list) { // Do something } bus.register(this); 이벤트 던지기 bus.post(new MovieList(1, "Hi", "There"));
  • 35. 예제 앱 오픈소스 스택 View Logic Request Response SQLite Event 3G/LTE WiFi 서버 Android SDK RetroFit OkHttp OttoGreenDAO SQLite User View Logic Otto GreenDAO RetroFit
  • 36. One more thing : iOS iOS용 라이브러리 몇 가지를 소개합니다 HTTP 통신 • AFNetworking (OkHttp + Picasso + Retrofit) • FastImageCache (Picasso) Event Delivery • NSNotification • Tolo (otto) DB Storage • Core Data • 암호화가 필요한 경우 : SQLCipher
  • 37. DEMO
  • 38. Q&A