[24]안드로이드 웹뷰의 모든것NAVER Engineering안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation TestNAVER Engineering자동화, 계륵에 살 붙이기
: Evolution of Android Automation Test
송의초경
N Tech Service/ Contents QA
NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.
Metaworks3 Framework workbook 2015uEngine SolutionsMetaworks is Metadata Oriented Application Framework
which is Inspired from the Adaptive Object Models and OMG Reflection, MDA.
The main approach is
Application Component Generation on the fly from metadata
Now Metaworks version 3 Is A POJO framework that
encourages the Domain-Driven Design and
Especially for developing model-driven applications (UML, BPMN, etc)
Essencia 2017uEngine SolutionsEssencia for OMG Essence Standard Execution Platform. This lets Software Practices and Methods compatible, composable, and runnable.
Angular2를 위한 컴포넌트 분석과 개발Jin wookAngular 2는 HTML 5 웹 컴포넌트 기술을 포함합니다. 이 기술은 Angular 2 컴포넌트를 존재케한 기반기술입니다. 본 슬라이드는 이와 관련하여 2가지 흐름을 가지고 있습니다.
- 전반부는 웹 컴포넌트가 Angular 2 컴포넌트가 되기까지의 과정을 설명합니다.
- 후반부는 컴포넌트 트리 구조를 기반으로한 컴포넌트 상호작용에 대해 설명합니다.
필요하신 분에게 조금이라도 도움이 되었으면 좋겠습니다. 감사합니다.
CHANGE LOG
2016-06-27 : @input 데코레이터 설명교정
2016-06-26 : 쉐도우 돔 / 쉐도우 호스트관련 보다 정확한 문장으로 수정
2016-06-25 : 업로드
Mean 스택을 사용한 IoT 개발Jay ParkMEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Private PaaS with Docker, spring cloud and mesos uEngine SolutionsA tutorial for Implementing a private PaaS with docker, spring cloud (netflix OSS) and mesosphere's DC/OS. Including docker swarm.
Essencia 2017uEngine SolutionsEssencia for OMG Essence Standard Execution Platform. This lets Software Practices and Methods compatible, composable, and runnable.
Angular2를 위한 컴포넌트 분석과 개발Jin wookAngular 2는 HTML 5 웹 컴포넌트 기술을 포함합니다. 이 기술은 Angular 2 컴포넌트를 존재케한 기반기술입니다. 본 슬라이드는 이와 관련하여 2가지 흐름을 가지고 있습니다.
- 전반부는 웹 컴포넌트가 Angular 2 컴포넌트가 되기까지의 과정을 설명합니다.
- 후반부는 컴포넌트 트리 구조를 기반으로한 컴포넌트 상호작용에 대해 설명합니다.
필요하신 분에게 조금이라도 도움이 되었으면 좋겠습니다. 감사합니다.
CHANGE LOG
2016-06-27 : @input 데코레이터 설명교정
2016-06-26 : 쉐도우 돔 / 쉐도우 호스트관련 보다 정확한 문장으로 수정
2016-06-25 : 업로드
Mean 스택을 사용한 IoT 개발Jay ParkMEAN 스택을 사용한 IoT 개발 예제를 설명합니다.
* MEAN 스택 기본 내용 소개
* Node.js와 Express를 활용한 간단한 CRUD 서버 작성 방법(아주 단순하지만 (인증을 제외한 나머지) RESTful 서버의 기본 내용을 구현함)
* MongoDB와 Mongoose ODM를 사용한 영속적인 자료 저장 방법
* AngularJS를 사용한 아주 간단한 모니터링 도구 구현(하지만 의존성 주입, 양방향 자료 결합, 라우팅 활용 방법이 모두 들어 있음)
* 모든 예제는 bitbucket(git 호스팅 서비스)에 공개되어 있음
Private PaaS with Docker, spring cloud and mesos uEngine SolutionsA tutorial for Implementing a private PaaS with docker, spring cloud (netflix OSS) and mesosphere's DC/OS. Including docker swarm.
꿶밋업1탄_왜_마이크로서비스인갶VMware Tanzu Korea<1탄>왜 마이크로 서비스인가 - 마이크로서비스로 구성된 애플리케이션 소개
Session abstract:
이번 세션에서는 무엇이 마이크로 서비스고, 어떤 철학과 사상을 가지고 있는지 알아봅니다. 세션이 종료되면 참석하신 분들은 마이크로 서비스의 구성에서 어떤 내용이 중요한지 알게 됩니다. 전체 시리즈로 진행되는 첫 세션 입니다.
Session agenda:
-실 서비스용 데이터베이스를 종료한다면 어떤 일이 벌어질까
-마이크로서비스와 마이크로서비스가 아닌것
-어떻게 시작해야 하나
-마이크로서비스 애플리케이션 소개
-클라우드 네이티브(클라우드 최적화란)
기술적 변화를 이끌어가기Jaewoo Ahn한국 표준(?) 자바셋(Java 1.6+Spring 3.x+MyBatis)과 Monolithic 아키텍처를 사용하고 있었던 제 조직 내에서 기술적 변화를 이끌어가는 것에 관련된 내용입니다.
변화를 유도하기 위해서 어떻게 해야 하는지가 핵심이며,
Architecture, Frontend, Backend, 방법론/프로세스의 영역을 각각의 단계로 나누어서 Phase1을 수행한 것과 Phase2를 수행 중인 내용에 대해서도 다룹니다.
Phase1
- Architecture : Frontend / Backend 명시적 분리
- Frontend : Angular.js, Grunt, Bower 도입
- Backend : Java 1.7/Spring4, ORM 도입
- 방법론/프로세스 : Scrum, Git
Phase2
- Architecture : Micro-Service Architecture(MSA)
- Frontend : Content Router, E2E Test
- Backend : Polyglot, Multi-Framework
- 방법론/프로세스 : Scrum+JIRA, Git Branch Policy, Pair Programming, Code Workshop
Sencha ExtJS를 활용한 Big Data Platform 개발 사례 미래웹기술연구소 (MIRAE WEB)Sencha ExtJS를 활용한 Big Data Platform 개발 사례
ExtJS를 활용한 고도로 복잡한 웹애플리케이션 UI 개발사례
클라우다인 - 박효근 선임
[OpenInfra Days Korea 2018] (Track 2) Microservice Architecture, DevOps 그리고 5...OpenStack Korea Community- 발표자: SPTek 정정문 Cloud 사업 본부
- 설명: https://event.openinfradays.kr/2018/session1/track_2_1
[Uws] enterprise application architecture, msa, java9, spring 소개HYUN-JOO LEE회사 교육용으로 만든 자료입니다. 엔터프라이즈 어플리케이션 아키텍처의 개념부터 시작하여 마이크로서비스 아키텍처와 기존 모놀리식 아키텍처 비교하고 왜 우리가 자바9에 집중해야 하는지 설명하려고 만든 자료입니다. 현재 회사에서 진행하고 있는 클라우드 어플리케이션 통합/아키텍처링 사업과 PoC 플랫폼 개발을 위한 회사 내부 교육용으로 만들었습니다. MSA 부분은 IBM Blumix 밋업 자료에서 발췌했습니다. 잘못된 부분이나 다른 의견이 있으신 분 댓글이나 메세지 주세요. hjlee@uws.co.kr
Mobile Application Development Platform "Morpheus"태일본부장님(Uracle) 권대한민국 No.1 모바일 개발 플랫폼 모피어스에 대한 소개 자료입니다.모피어스는 국내 200여 사이트에서 그 효과를 입증한 모바일 플랫폼으로 Gartner가 요구하는 MADP(Mobile Application Development Platform)의 7가지 요건을 만족하는 국내의 유일한 플랫폼입니다.
(Morpheus is the No.1 MADP in Korea Market.)
MSA(Service Mesh), MDA(Data Mesh), MIA(Inference Mesh) 기술동향 소개-박문기@메ᄀ...문기 박Cloud-Native Architecture
MSA(Micro Service Architecture)
MDA(Micro Data Architecture)
MIA(MIcro Inference Architecture)
MSA-Service Mesh
MDA-Data Mesh
MIA-AI Inference Mesh
Kubernetes
Container
Kubeflow
Volcano
Apache Ynikorn
ChatGPT
AGI(Artificial General Intelligence)
ASI(Artificial Specialized Intelligence)
초-전환시대
초-연결시대
SQream GPU DBMS
Cloud와 Cloud Native의 목표는.. 왜? 어떻게? 뭐가 좋아지나...
1. (왜) 가속화된 초-전환, 초-연결 IT 환경변화에 대비하기 위해서
2. (어떻게-H/W) IT H/W 부분은 IaaS 서비스화하여
점유된, Over Subscription된 H/W(Server, Network, Storage)들 모아서 Pool화하고, 가상화기술을 통해 Tenant로 자원들을 분리해 서비스화해 제공하고
필요시 적시에 Pool의 가상H/W를 제공하고, 상황에 따라 확장・축소(Scale in/out, up/down)하면서, 축소된 자원을 다른 요청들을 위해 빠르게 재-할당하는 유연성을 제공하고
3. (어떻게-S/W) S/W 부문도
PaaS, SaaS 적극 활용으로 App.개발 시간을 단축하고
App.분야인 기존 MACRO Service Architecture형 Monolith Architecture(Web-WAS-DB)를 작게 쪼개서 변화에 빠르게 적응할 수 있는 MSA(Micro Service Architecture)로 변경하여 Service Mesh형으로 관리하고
Data분야도 Data Warehouse, DataLake(Bigdata), LakeHouse등 기존 MACRO Data Architecture를 MSA형식으로 MDA(Micro Data Architecture)로 전환 후 Data Mesh형태로 관리하고,
AI로 동적프로그램 생성하여 App.개발시간 단축하고, AI분야도 초-거대 AI구현(MACRO)보다는 작은|특화된 Deep Learning Network(Model)들로 작게 쪼개서 MIA(Micro Inference Architecture)로 비지니스 환경에 적용하고 Inference Mesh형태로 관리하는 시스템으로 전환하고
4. (어떻게-조직) 조직구조도 CI/CD형 DevOps환경, 데이타,트랜잭션중심업무중심, 기술중심 문제해결중심, 직능중심조직직무중심조직으로 전환하면
5. (좋아지는 것) 초-전환, 초-연결 환경에 빠르고, 지속적으로 적응할 수 IT as a Product 환경을 구현하는 것
디자인 시스템에 직방 ZUIXNAVER EngineeringZUIX is a design system created by Zigbang's CTO team to standardize design across all of Zigbang's services. It uses React Native for responsive, multi-platform components and includes tools like Storybook for development and a design review infrastructure for validation. The deployment process involves code reviews, CI/CD pipelines, and publishing to a npm registry. Training and documentation is provided through tools like Google Classroom and Notion. The team aims to further develop ZUIX by improving the design review tools, adding end-to-end testing, and analyzing component usage. The goal is to solve Zigbang's unique challenges through an agile, collaborative approach between designers and developers.
서비스 운영을 위한 디자인시스템 프로젝트NAVER EngineeringThis document discusses Kakao's search platform front-end project. It describes the architecture of an integrated search service using microservices and the need for a design system due to fragmented UIs. It introduces the KST (Kakao Search Template) project for creating a design system including 200+ UI blocks and templates. The KST Builder, Logger, and Dashboard are discussed for managing templates, logging usage, and monitoring coverage. Maintaining a consistent design system is important for operating diverse search services and platforms.
BPL(Banksalad Product Language) 무야호NAVER EngineeringThis document discusses Banksalad Product Language (BPL), which is a method used at Banksalad to standardize UI text, elements, and components. It allows designers and developers to use consistent terms, while abstracting UI elements to different levels suitable for their roles. Examples of standardized elements are provided, as well as external resources that discuss concepts like tree shaking that are relevant to BPL. While BPL has benefits, the document considers whether there may be better approaches than BPL.
이번 생에 디자인 시스템은 처음이라NAVER EngineeringThis document summarizes a presentation about using Stitches, a React styling library, and Storybook for component design.
The presentation introduces Stitches as the styling library used for its support of React, easy usage, and themes. Key features of Stitches discussed include creating styled components, variants, and comparisons to other libraries.
Storybook is presented as a way to improve communication between designers and developers by allowing visualization of components alongside their stories. Clean communication through a shared Storybook is emphasized.
Reflections on initially creating a design system note the benefits of consistency and speed but also identify areas for improvement like documentation, process alignment, and understanding each other's roles. Establishing trust and understanding between
날고 있는 여러 비행기 넘나 들며 정비하기NAVER Engineering비행기 설계를 왜 통일 해야 할까?
디자인 시스템을 하는 이유
비행기들이 다 용도가 다르다...어떻게 설계하지?
맥락이 다른 페이지와 패턴
경유지까지 아직 멀었다... 언제 수리하지?
디자인 시스템을 적용하는 시점
엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지?
디자인 시스템을 적용하는 프로세스
비행기 설계가 바뀐걸 어떻게 알리지?
디자인 시스템의 전파
플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기NAVER Engineering프로덕트 디자이너로 고통 받기
다양한 플랫폼에서 시스템 구축하며 고통 받기
디자인 가이드 정리하며 고통 받기
구현으로 고통 주기
한 치 앞도 몰라서 고통 받기
200819 NAVER TECH CONCERT 03_화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드NAVER EngineeringThe document discusses Kotlin coroutines and how they can be used to write asynchronous code in a synchronous, sequential way. It explains what coroutines are, how they work internally using continuation-passing style (CPS) transformation and state machines, and compares them to callbacks. It also outlines some of the benefits of using coroutines, such as structured concurrency, light weight execution, built-in cancellation, and simplifying asynchronous code. Finally, it provides examples of how to use common coroutine builders like launch, async, and coroutineScope in a basic Android application with ViewModels.
200819 NAVER TECH CONCERT 05_모르면 손해보는 Android 디버깅/분석 꿀팁 대방출NAVER EngineeringThis document contains the transcript from a presentation given by Wonsuk Lim from Naver on tips for debugging and analyzing Android applications. Some key tips discussed include fully utilizing the Android emulator's capabilities like 2-finger touch control, clipboard sharing between the emulator and host PC, and mocking locations. Advanced settings for the emulator like foldable and camera emulation are also covered. The presenter recommends ways to configure developer options and use tools like LeakCanary, the Android profiler, and Stetho for testing app stability. Methods for understanding the Android framework by reviewing system services and managers via AIDL files and logcat dumps are presented. Finally, reverse engineering tools like APK Extractor and decompilers are introduced.
200820 NAVER TECH CONCERT 14_야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된...NAVER Engineering200820 NAVER TECH CONCERT - 차성원
야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된 이야기
3. 변화의 시대
1. 무엇이 변했는가?
2. 앱의 구조
- Activity와 UI 구조
- Sub-Eventing
- Multi-processing
3. Design Achitecture 적용
- UI-Data 패턴(MVC, MVP, MVVM)
- State Pattern
- Pipe Filter Model
4. Multi-Packaging
5. 프레임워크 어떻게 활용할 것인가?
앱 어떻게 개발 할 것인가?
4. 1.1 무엇이 변했는가?
Hardware
MultiCore
Large Memory
Big Display
Platform
Dalvik->JIT/ART
Many Strictions
다양한 프레임워크
Lottie,
RxJava, Retrofit
Glide, Picasso, OkHttp
..
5. 1.2 결국 어떤 앱으로 가는가? …
좋은 앱은
1. BIG Sized
2. Multi-Core Processor
3. Multi-Featured
4. Multi-Media
환경에 효율적이어야 한다.
네이버 앱을 전면 개편해야 하는데 …
6. 1.3 Java 가 클라이언트 환경에 적합한가?
Problem of Java
1. 상속과 오버라이드
2. 객체 내에 모두 선언해야하는 딱딱함
3. Listener 표현이 코드를 복잡하게 함
-BIG Size, 복잡한 GUI 환경에 자바가 적합하지는 않음
- 좀 더 간결한 코딩이 필요 (많은 기능이 필요)
7. 1.4 Functional vs Objective Programming
Why Functional?
1. UI 코드를 방대함 이를 간결하게 표현할 수 있는 도구 필요
2. 코어 로직에 대한 간결한 표현 방식의 필요성
3. 많은 함수를 가진 큰 객체의 이벤트 처리의 효율성 제고 필요
10. 2.2 Ui와 Navigation
Page Navigation
Activity로만 앱을 만드는 것이 효율적인가?
1) Activity-Activity(Activity Navigation)
2) Activity(PageFragements)-Activity
3) Activity(PageView-PageView)-Activity
11. 2.3 Event Dispatching(Big SizeComponent)
Complicated Activity-View Hierachy
1) Many Events
2) Deep Depth of View
3) Avoiding of sub-classing
Need to route of Event
WebView, Activity
12. 2.3 Event Dispatching Example(Activity)
필요성
1) Activity의 이벤트를 Child View나 비즈니스 로직에서 사용하는 경우가 많다
2) 함수를 만들고 Activity에서 함수들을 만들어야 함
3) LifeCycle, Permissions, onBackKeyPressed, onActivityResult등
14. 2.3 Event Dispatching Example
NestedScroll이 필요한 경우(with CoordinateLayout)
1) ScrollView내에 ListView와 같이 이중으로 스크롤이 일어나는 경우
2) 웹 브라우저의 주소창과 같이 상단 또는 하단 컨텐츠와 같이 스크롤 될때
3) WebView, ListView,ScrollView는 해당 기능이 없음
15. 2.4 Multi Process(1)
멀티 프로세스가 필요한 경우
1) 메인과 구별되는 기능요소
2) 별도의 모듈(Dynamic Linked Library) 로드 하는 요소
3) 모듈의 크기가 큰 경우
4) 멀티 미디어와 같이 자원을 많이 소요하는 요소
5) 크래시 발생시 해당 모듈에서 전파되기를 원하지 않을 때
16. 2.4 Multi Process(2)
멀티 프로세스 사용
1) 별도의 Activity, Service에 process 속성 지정
2) 프로세스마다 Application.onCreate()에서 초기화
3) Content Provider, Intent Bundle, Intent Broadcast 로 데이터 공유
17. 2.4. MutiProcess(3)-Multi-Threading
Thread & Service
Service
IntentService
Thread
ThreadPool
AsyncTask
AsyncLoader
WorkManager
JobScheduler
JobManager
Coroutine
Priority
- Media Thread
- General Jobs
- Background Jobs, Logging
18. 3.1 Architecture 적용
UI-Data Pattern
MV, MVC, MVP, MVVM
Event-Driven Pattern - State Model, Finite State Machine
1) State Model – 간단한 이벤트로 상태관리
2) FSM – 이벤트에 따른 상태변화와 동작 구조. 앱의 전체 동작관리
Media Processing Model
1) Piped Stream Model
2) Multiplexed Event Queue Model
19. 3.2 MVC, MVP, MVVM
필요성 검토
패턴은 통일된 인터페이스를 갖지만 코드의 량을 증가
작은 부분에 과도하게 적용하면 배보다 배꼽이 더 큼
협업 시에 레이어 구분을 위해서 사용은 좋은 예
단순 구조에 적용은 신중해야 함
20. 3.4 Piped Filter Model
필요성
실시간 미디어는 Source, Transform, Sink의 모델
실시간 미디어 처리는 공통 모듈이 많음
공통 모듈과 개별 기능 모듈의 인터페이스가 필요함
21. 4 Multi Packaging
1. Big-sized, Multi-featured App packaging
1. Apk Extension(.obb)
- 100MB가 넘어 가는 경우 쪼개야 한다.
2. Another Apk
- 테마 팩, 웹엔진
3. App Bundle
4. Instant App
22. 5. 다양한 Framework 어떻게 활용할 것인가?
Native Code 가 우선
- 기본은 역시 Native Code 가 우선
- 모든 것을 갖추고 있지 않다
- 딱 맞다면 사용할 수 있다. Rebase가 필요하므로 버전 변화를 트래킹
23. Closing l 프로그래밍은 암기과목이다
- 얼마나 많이 읽었느냐?
- 얼마나 많이 생각했느냐?
- 얼마나 많이 그려보았느냐?
- 얼마나 많이 타이핑 해 보았느냐?