Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
Droidknighs2020에서 유튜브로 발표한 슬라이드입니다.
https://www.youtube.com/watch?v=gTYou3Ru1QM
[Speaker소개]
안드로이드 개발 7년차, Flutter 개발 2년차 개발자입니다. 현재 스타트업 Lawfully에서 182개국 약 7만명의 유저가 사용중인 글로벌앱을 개발/관리 하고 있습니다. 프론트엔드 개발에 관심이 많아 그 외에 React 프로젝트도 참여하였고, 각 플랫폼과 언어의 장단점을 잘 녹여서 개발에 적용중입니다.
이번 발표는 Flutter에 관심이 있는 개발자, 혹은 Flutter앱을 처음 런칭하시는 분들이 참고하시면 좋은 내용으로 준비했습니다.
[이런 분이 들으시면 좋습니다]
Flutter 관심 있으신분. Flutter로 앱을 출시하고 싶으신분. Native Platform 앱과 Flutter 앱을 비교해보고 싶으신분.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개if kakao
황민호(robin.hwang) / kakao corp. DSP개발파트
---
최근 Spring Cloud와 Netflix OSS로 MSA를 구성하는 시스템 기반의 서비스들이 많아지는 추세입니다.
카카오에서도 작년에 오픈한 광고 플랫폼 모먼트에 Spring Cloud 기반의 MSA환경을 구성하여, API Gateway도 적용하였는데 1년 반 정도 운영한 경험을 공유할 예정입니다. 더불어 MSA 환경에서는 API Gateway를 통해 인증을 어떻게 처리하는지 알아보고 OAuth2 기반의 JWT Token을 이용한 인증에 대한 이야기도 함께 나눌 예정입니다.
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
Droidknighs2020에서 유튜브로 발표한 슬라이드입니다.
https://www.youtube.com/watch?v=gTYou3Ru1QM
[Speaker소개]
안드로이드 개발 7년차, Flutter 개발 2년차 개발자입니다. 현재 스타트업 Lawfully에서 182개국 약 7만명의 유저가 사용중인 글로벌앱을 개발/관리 하고 있습니다. 프론트엔드 개발에 관심이 많아 그 외에 React 프로젝트도 참여하였고, 각 플랫폼과 언어의 장단점을 잘 녹여서 개발에 적용중입니다.
이번 발표는 Flutter에 관심이 있는 개발자, 혹은 Flutter앱을 처음 런칭하시는 분들이 참고하시면 좋은 내용으로 준비했습니다.
[이런 분이 들으시면 좋습니다]
Flutter 관심 있으신분. Flutter로 앱을 출시하고 싶으신분. Native Platform 앱과 Flutter 앱을 비교해보고 싶으신분.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개if kakao
황민호(robin.hwang) / kakao corp. DSP개발파트
---
최근 Spring Cloud와 Netflix OSS로 MSA를 구성하는 시스템 기반의 서비스들이 많아지는 추세입니다.
카카오에서도 작년에 오픈한 광고 플랫폼 모먼트에 Spring Cloud 기반의 MSA환경을 구성하여, API Gateway도 적용하였는데 1년 반 정도 운영한 경험을 공유할 예정입니다. 더불어 MSA 환경에서는 API Gateway를 통해 인증을 어떻게 처리하는지 알아보고 OAuth2 기반의 JWT Token을 이용한 인증에 대한 이야기도 함께 나눌 예정입니다.
마이크로서비스 스타일로 만들어진 시스템을 모노리틱 스타일로 이관한 사례와 함께 스프링을 이용해 모듈형 모노리스(modular monoliths)를 만든 경험을 바탕으로 모노리틱/마이크로서비스 보다 본질적인 문제를 제기하고, 문제 해결을 위한 생각을 공유합니다.
https://github.com/arawn/building-modular-monoliths-using-spring
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
관계형 인공지능 챗봇을 만드는 Scatterlab(https://pingpong.us/)에서 출시한 일상대화 챗봇 '드림이' 제작과 관련된 내용입니다.
- 카카오 챗봇 '드림이봇'을 제작한 과정과 그 과정에서 고려한 기획 요소들을 간단하게 공유합니다.
- 카카오 챗봇 '드림이' 사용해보기: https://pf.kakao.com/_SgLqj
- 애자일 선언문의 원칙들
- 애자일의 오해
- 스크럼(Scrum)
- User Story
- Estimation
- XP(eXtreme Programming)
- XP Practice #1 – TDD와 테스트 자동화
- XP Practice #2 – Refactoring, CI
- 애자일 사례 소개
Hamcrest is a library for creating matchers for usage in unit tests, mocks and UI validation. This talk gives a brief introduction to using and writing Hamcrest matchers.
The topics covered:
* Basic introduction to Hamcrest
* Using Matchers in assertions
* Using Matchers with Mockito
* Writing custom matchers
* Ad-hoc matchers
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버Heungsub Lee
NDC14에서 발표한 "[야생의 땅: 듀랑고] 서버 아키텍처" 세션의 슬라이드입니다.
슬라이드에 설명이 많지 않은데, 디스이즈게임에서 발표 내용을 잘 정리해주었습니다. 기사도 함께 보시면 좋을 것 같습니다.
http://www.thisisgame.com/webzine/news/nboard/4/?n=54955
마이크로서비스 스타일로 만들어진 시스템을 모노리틱 스타일로 이관한 사례와 함께 스프링을 이용해 모듈형 모노리스(modular monoliths)를 만든 경험을 바탕으로 모노리틱/마이크로서비스 보다 본질적인 문제를 제기하고, 문제 해결을 위한 생각을 공유합니다.
https://github.com/arawn/building-modular-monoliths-using-spring
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
관계형 인공지능 챗봇을 만드는 Scatterlab(https://pingpong.us/)에서 출시한 일상대화 챗봇 '드림이' 제작과 관련된 내용입니다.
- 카카오 챗봇 '드림이봇'을 제작한 과정과 그 과정에서 고려한 기획 요소들을 간단하게 공유합니다.
- 카카오 챗봇 '드림이' 사용해보기: https://pf.kakao.com/_SgLqj
- 애자일 선언문의 원칙들
- 애자일의 오해
- 스크럼(Scrum)
- User Story
- Estimation
- XP(eXtreme Programming)
- XP Practice #1 – TDD와 테스트 자동화
- XP Practice #2 – Refactoring, CI
- 애자일 사례 소개
Hamcrest is a library for creating matchers for usage in unit tests, mocks and UI validation. This talk gives a brief introduction to using and writing Hamcrest matchers.
The topics covered:
* Basic introduction to Hamcrest
* Using Matchers in assertions
* Using Matchers with Mockito
* Writing custom matchers
* Ad-hoc matchers
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버Heungsub Lee
NDC14에서 발표한 "[야생의 땅: 듀랑고] 서버 아키텍처" 세션의 슬라이드입니다.
슬라이드에 설명이 많지 않은데, 디스이즈게임에서 발표 내용을 잘 정리해주었습니다. 기사도 함께 보시면 좋을 것 같습니다.
http://www.thisisgame.com/webzine/news/nboard/4/?n=54955
1.일렉트론이란? + NW.js vs. Eelectron
2.중요점
3.설명
4.선행요구사항
5.구조
6.Main Process
7.Renderer Process
8.쉽게 이해하기
9.IPC
10.전체적인 흐름
11.Package
12.시작하기
13.참고
14.THANK YOU
2022년 11월 18일 코엑스에서 개최한 공공솔루션마켓에서 발표한 강연 자료입니다.
디지털 전환이 가속화됨에 따라 더욱 중요해진 디지털 경험 모니터링과 장애 및 병목 등 성능을 개선한 실 사례를 공유드립니다.
생생한 강연 영상으로 확인해 보세요!
https://youtu.be/_Cdms2TxO3M
TestExplorer 소개 - Android application GUI testing toolhyunae lee
TestExplorer is 100% automated testing solution for Android application based on GUI which is available in entire development process from development and verification.
- A dynamic GUI testing tool for detecting the abnormality of the application by running the event (Touch, Click, Swipe, Back Space, Rotate, etc.)
- 100% automated GUI testing tool in entire development process (App building with source, Installing App, Running App on target device, GUI Exploring, Generating GUI tree, Generating test script, Running test script and Reporting)
TestExplorer 소개 - Android application GUI testing toolhyunae lee
TestExplorer is 100% automated testing solution for Android application based on GUI which is available in entire development process from development and verification.
- A dynamic GUI testing tool for detecting the abnormality of the application by running the event (Touch, Click, Swipe, Back Space, Rotate, etc.)
- 100% automated GUI testing tool in entire development process (App building with source, Installing App, Running App on target device, GUI Exploring, Generating GUI tree, Generating test script, Running test script and Reporting)
2. 가장 큰 5가지
1. 같은 코드로 iOS 릴리즈 가능하다.
2. Hot Reload 지원 => 개발 시간을 획기적으로 단축.
3. Dart 언어를 사용 (Javascript, Java를 섞어버린)
4. 안드로이드 스튜디오 외에 VS Code로 개발 가능하다. (가볍고 쾌적하
다.)
5. Android는 OS가 그리는 반면, Flutter는 Skia엔진이 그린다.
차이점
16. 1. 크래시가 나지 않는다.
Firebase에서 Crashes 필터 -> Non-Fatal로 바꾸면,
위젯이나, 로직 등에서 발생한 에러의 File & Line을 볼 수 있다.
17. 1. 크래시가 나지 않는다.
•장점: 사용자가 앱 사용하다가, 특정 Screen(Page)에 문제가 있어도
백버튼을 누르고, 계속 이용이 가능하다.
•“크래시가 나지 않을때”의 장단점.
•단점:
- 금융앱 처럼 보안 절차를 철저히 해야하는 앱에서 Assert를 미리
설계하지 않으면, 크래시가 나지 않은채로 의도하지 않은 동작 가능하다.
- 앱화면에 빨간 에러코드는, 유저들에게 불안이나 잘못되었다는 느낌을
줄 수 있고, 앱을 지울 우려가 있다. => 빠르게 파악 => Hotfix가 필요하다
19. 2. 획기적인 화면 사이의 정보 통신
- Android에서는…
Activity - OnActivityForResult
- ListenerDialog
- ViewModel, ListenerFragment
- EventBusEtc
20. 2. 획기적인 화면 사이의 정보 통신
Activity - OnActivityForResult
- ListenerDialog
- ViewModel, ListenerFragment
단점: 화면을 시작하고, 받는 위치가 다르다. (헤맬 수 있다.)
단점: ViewModel은 본래 View를 위한 모델 관리 용도인데,
이벤트 전달을 위해 사용/비대해질 우려.
Listener와 참조가 끊겼을때 전달되지 않음 (onRestoreInstanceState)
단점: Listener 호출 후 dismiss를 매번 수동으로 해줘야한다. (따로 호출)
23. 2. 획기적인 화면 사이의 정보 통신
Screen A Screen B
Open data param
Returning data
24. 2. 획기적인 화면 사이의 정보 통신
Screen A Screen B Screen A
Open data
param
Returning
data
25. 2. 획기적인 화면 사이의 정보 통신
Screen A Screen B Screen A
26. 2. 획기적인 화면 사이의 정보 통신
await에서 화면이 열리고, 해당 Screen이 닫힐때까지 코드가 Block된다.
화면이 끝나고 정보를 받게되면 아래에 if (result != null) 코드가 수행된다.
27. 2. 획기적인 화면 사이의 정보 통신
Screen B에서 데이터를 돌려줄때
Push 함수의 Return type
🍀 Android의 Intent, Bundle에 싣기위해 Serializable, Parcelable 구현
Flutter에서는 필요없음. 그냥 객체 그대로 싣고 보낸다. 메모리 주소도 동일
28. 2. 획기적인 화면 사이의 정보 통신
•Provider 사용
•Listener를 사용 가능함 (비추천)
그 외의 방법
34. 3. Thread 스트레스에서 해방
•Async, Await 방식은 단일스레드 방식으로 동작한다는 의미.
(그러나 통신이나 이미지뷰 처리가 UI를 느리게 하지 않음)
•Parallel 하게 여러 작업을 동시에 수행하려면
Isolate를 사용하면 된다.
https://medium.com/flutter-community/flutter-dart-async-concurrency-
demystify-1cc739aaae57
http://jpryan.me/dartbyexample/examples/isolates/
36. Android 에서는…
1. Java, Kotlin으로 커스텀뷰 코드 작성
2. attrs.xml 안에 속성 추가
3. Java, Kotlin에서 코드로 attrs 파라미터 추출
4. 코드로 뷰 동적 생성할때를 위해 생성자, 또는 setter생성
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
43. 각 필드에 원하는 변수들을 배치. (Primitive, Enum, Object, Function, Widget)
MVVM 처럼 data가 binding되고,
setState 함수를 통해 값이 바뀌면 알아서 갱신(Build)이 된다.
개별 변수 Observing은 아니지만, 오히려 심플하다.
각 Observable을 관측하는 Observer만 갱신하는 것은 성능상 이점이 있지만,
개발자, 코더 입장에서는 개별적인 변화와/ Observing 여부에 신경쓰고 setValue가 제대로
호출되었는지 확인하는 불편함이 있는데,
Flutter에서는 그런 불편함이 사라진다.
4. 만들고 쓰기 쉬운 커스텀뷰 (Widget)
46. Android 에서는…
5. 쉽고 직관적인 Animation 처리
=> 단일 뷰 Animation은 쉽지만, 주변 레이아웃이 같이 변한다면
좀 골치가 아파진다.
1. Animation을 수행할 View를 찾는다.
2. View의 transitionX, alpha, scale의 타겟값을 세팅
3. Duration 세팅
4. Interpolation 세팅
5. start() 함수 수행
47. 그래서 Android 에서는…
1. Constraint Set 변경 - AutoTransition
2. Android Studio 4.0 Motion Editor 개발중
=> 똑같은 Xml을 여러벌을 준비하거나,
코드로 Constraint를 동적으로 변환한다.
5. 쉽고 직관적인 Animation 처리
51. 5. 쉽고 직관적인 Animation 처리
visibleFraction이 60%일때 chartSize = 150이 set
자동적으로 차트막대가 커지는 애니메이션이 시작된다.
52. Implicit animated widgets - 다양한 기본 위젯들 탑재
https://www.youtube.com/watch?v=IVTjpW3W33s
5. 쉽고 직관적인 Animation 처리
53. 물론 Explicit animation도 지원한다. (Animation Controller)
Let’s subscribe
Youtube Flutter Channel
그러나 웬만하면 Implicit Animations로 구현 가능하다.
5. 쉽고 직관적인 Animation 처리
54. UI 개발 Framework 끝판왕
Android / Flutter 앱 개발의 큰 차이점 5가지를 통한
Flutter 총평:
56. 자료 및 이미지 출처:
•https://github.com/flutter/flutter/issues/17112
•https://www.jagranjosh.com/articles/relations-and-functions-iit-
jee-important-questions-and-preparation-tips-1455106528-1
•https://medium.com/flutter-community/flutter-threading-
5c3a7b0c065f
•https://www.youtube.com/watch?v=IVTjpW3W33s
•https://medium.com/flutter-community/flutter-dart-async-concurrency-
demystify-1cc739aaae57
•http://jpryan.me/dartbyexample/examples/isolates/