SlideShare a Scribd company logo
1 of 46
Desktop Application에
도전하는 JavaScript
권병철
SynapSoft WebOffice Team
네이버 오피스는
어떻게 만들었나요?
그러게요....
어떻게 만들었을까요?
Naver Office 개발 뒷담화
SynapSoft?
•

문서 처리 솔루션의 히든 챔피
언

•

문서 필터, HTML 변환기 제작
WebOffice?

웹오피스,
만들지 않겠는가?
그까이꺼 대~충

HTML 변환기
+
편집기능
모든 게 잘 되는 것 같았다
But...
Performance Tuning
JavaScript에 날개를 달자
Dynamic Rendering
Dynamic Rendering
•

Rendering 도중 브라우저 사망
Dynamic Rendering
•

render 대상을 chunk

•

브라우저 '응답 없음'의 기준
• 실행 시간(×)
• Function call 내 명령 수

•

setInterval, setTimeout

•

뻗는 것보다 조금 느린 게 낫
다!
Dynamic Rendering
•

Rendering 이후
• 스크롤 안돼!
• 메뉴 클릭 안돼!!
• 편집도 안돼!!!

•

DOM 객체가 많다
= DOM Tree가 무겁다
= 리소스를 많이 먹는다
Dynamic Rendering
•

보이는 부분만 렌더링하면?

•

보이지 않는 부분은 소거

whole contents

browser window
Dynamic Rendering
•

보이는 부분만 렌더링하면?

•

보이지 않는 부분은 소거

•

사용자 경험을 고려해 buffer
영역 설정

whole contents

buffer
browser window
그래도 안 돼요!
•

DOM element를 삽입/소거하
는 과정에서 reflow 발생!!

•

적게는 성능 하락

•

많게는
◀ 보시다시피 -_-;;
Reflow & Repaint
repaint

bgColor
reflow
visibility

insert / delete
node

reposition

resize

font

border
Reflow & Repaint
// bad

var left = 10, top = 10;
el.style.left = left + "px";
el.style.top = top + "px";

// good
el.style.cssText +=
"; left: " + left +
"px;
top: " + top + "px;";

•

reflow가 일어날 상황은 한 번
에 몰아서 처리
Reflow & Repaint
// bad

function setStyle(oStyle) {
// move if needed
// resize if needed
// set color if....
}
// good
function move(x, y) {...}
function resize(x, y) {...}
function setColor(c) {...}

•

paint 함수를 세분화하여
repaint만 가능할 때는 repaint
만 하도록 유도
Dynamic CSS Styling
Dynamic CSS Styling
•
•

hello, again :-P

모든 node의 CSS style 재정의
loop 돌다 브라우저 사망
Dynamic CSS Styling
// Internet Explorer

document.styleSheets
.addRule(sel, idx);
document.styleSheets
.rules[idx].style.cssText
= "...";
// FireFox & Chrome
document.styleSheets
.insertRule(sel, idx);
document.styleSheets
.deleteRule(idx);

•

document.styleSheets 객체
• 스타일 시트 정의
• script level에서 임의로 추
가/수정/삭제 가능
Exploits
브라우저의 한계를 회피하는 꼼수(?)
들
Local Font Detection
Local Font Detection
•

임의의 DIV에 문자열 삽입

•

글꼴 적용

•

높이/너비가 변경되는지 확인!

hello, world!
hello, world!
not installed

hello, world!
installed
Clipboard Handling
•

외부 클립보드 데이터가 브라
우저와 호환되지 않음

•

브라우저 clipboard 객체에서
접근 불가능한 정보도 존재

•

[office Object]
Clipboard Handling
•

브라우저간/제품간 클립보드
정보 공유

•

각 process별로 독립된 클립보
드 제어

•

제품간 적절한 문서 모델로 변
경
Clipboard Handling
•

hidden iframe to hook
Ctrl+C/V
Clipboard Handling
•
pic?

text?

typ
e
obj?

encode

model
↔ html

strip
tags

객체의 type에 따라
• base64 인코딩
• html로 변환
• 태그 정렬 등등...
Vector Element Events
•

<SVG> or <VML>,
whatever it is...

click!
BOOO~!

selected
?

이벤트의 기본은 직교 영역

•

사용자 직관을 벗어남
Vector Element Events(Non-IE)
•

pointer-events property
• SVG 전용 속성

•

"그려진 부분"만 이벤트가 적
용되게 할 수 있음
• mouseDown
• mouseOver
• mouseUp

pointerEvents == "auto"?

click!

selected!
Vector Element Events(IE)
•

특정 클래스명을 검사
• 실제 path와 상위 VML 클
래스명이 다름

•

이벤트가 적절하지 않으면
• document
.elementFromPoint()
• nextElement.fireEvent()

className=="manipulable"
?

click!

selected!
Conclusion
단언컨대,
JavaScript는 가장 hot한 언어입니다.
JavaScript Rules!

Toy

Trash
JavaScript Rules!

Trend
JavaScript Rules!
•

HTML5 + CSS3 Standard

•

Plentiful API & Framework

•

Server-side Language
JavaScript Rules!
•

HTML5 + CSS3 Standard

•

Plentiful API & Framework

•

Server-side Language
JavaScript Rules!
•

HTML5 + CSS3 Standard

•

Plentiful API & Framework

•

Server-side Language
하지만 실제론...

Just another Community app
with bootstrap!
우린 아직 배고프다!
•

워드 : 인쇄 결과물과 동일한 편집 페이지 분할(pagination)

•

공동 편집

•

오프라인 캐시

•

더욱 강력한 기능들
• 문서 효과(그림자, 반사 등)
• 글머리 기호
• 애니매이션
• 겹선 테두리
• 기타등등...
도전하세요!
Thank You!

overock@synapsoft.co.kr
twitter.com/overockaffe
facebook.com/overockaffe

Any Questions?

More Related Content

What's hot

Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angularredribbon1307
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In ProductionMooYeol Lee
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Jeado Ko
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구Jae Sung Park
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기Chang W. Doh
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2성일 한
 
Universal Rendering
Universal RenderingUniversal Rendering
Universal RenderingTaegon Kim
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page ApplicationSangmin Yoon
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기WebFrameworks
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁WebFrameworks
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발모바일 무한 스크롤 개발
모바일 무한 스크롤 개발NAVER D2
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드NAVER D2
 
Angular 기본 개념 잡기
Angular 기본 개념 잡기Angular 기본 개념 잡기
Angular 기본 개념 잡기장현 한
 

What's hot (20)

Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
 
Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2Ionic으로 모바일앱 만들기 #2
Ionic으로 모바일앱 만들기 #2
 
Universal Rendering
Universal RenderingUniversal Rendering
Universal Rendering
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발모바일 무한 스크롤 개발
모바일 무한 스크롤 개발
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
 
Angular 기본 개념 잡기
Angular 기본 개념 잡기Angular 기본 개념 잡기
Angular 기본 개념 잡기
 

Similar to Deview2013 track1 session7

웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?Joone Hur
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기Miyu Park
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)NAVER D2
 
OpenSource Big Data Platform : Flamingo Project
OpenSource Big Data Platform : Flamingo ProjectOpenSource Big Data Platform : Flamingo Project
OpenSource Big Data Platform : Flamingo ProjectBYOUNG GON KIM
 
OpenSource Big Data Platform - Flamingo v7
OpenSource Big Data Platform - Flamingo v7OpenSource Big Data Platform - Flamingo v7
OpenSource Big Data Platform - Flamingo v7BYOUNG GON KIM
 
OpenSource Big Data Platform - Flamingo 소개와 활용
OpenSource Big Data Platform - Flamingo 소개와 활용OpenSource Big Data Platform - Flamingo 소개와 활용
OpenSource Big Data Platform - Flamingo 소개와 활용BYOUNG GON KIM
 
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해Terry Cho
 
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017devCAT Studio, NEXON
 
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례Jeongsang Baek
 
4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴Terry Cho
 
201803 파이썬 세미나
201803 파이썬 세미나201803 파이썬 세미나
201803 파이썬 세미나JeongHwan Kim
 
Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프
Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프
Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프Jinuk Kim
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향ssuser0e53c8
 
홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019
홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019
홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019devCAT Studio, NEXON
 
Embedded project presentation
Embedded project presentationEmbedded project presentation
Embedded project presentationJae-yeol Lee
 
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)NAVER D2
 
이클립스 플랫폼
이클립스 플랫폼이클립스 플랫폼
이클립스 플랫폼Kenu, GwangNam Heo
 
3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐Terry Cho
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...JinKwon Lee
 

Similar to Deview2013 track1 session7 (20)

웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
 
Flamingo project v4
Flamingo project v4Flamingo project v4
Flamingo project v4
 
OpenSource Big Data Platform : Flamingo Project
OpenSource Big Data Platform : Flamingo ProjectOpenSource Big Data Platform : Flamingo Project
OpenSource Big Data Platform : Flamingo Project
 
OpenSource Big Data Platform - Flamingo v7
OpenSource Big Data Platform - Flamingo v7OpenSource Big Data Platform - Flamingo v7
OpenSource Big Data Platform - Flamingo v7
 
OpenSource Big Data Platform - Flamingo 소개와 활용
OpenSource Big Data Platform - Flamingo 소개와 활용OpenSource Big Data Platform - Flamingo 소개와 활용
OpenSource Big Data Platform - Flamingo 소개와 활용
 
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
소프트웨어 개발 트랜드 및 MSA (마이크로 서비스 아키텍쳐)의 이해
 
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017
 
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례
(GameTech2015) Live Operation by Adbrix의 Node.js와 MongoDB를 이용한 멀티테넌트 인프라 구축사례
 
4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴
 
201803 파이썬 세미나
201803 파이썬 세미나201803 파이썬 세미나
201803 파이썬 세미나
 
Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프
Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프
Gametech 2014: 모바일 게임용 PaaS/BaaS 구현 사례와 디자인 트레이드오프
 
웹:앱 기술 동향
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
 
홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019
홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019
홍성우, 게임 서버의 목차 - 시작부터 출시까지, NDC2019
 
Embedded project presentation
Embedded project presentationEmbedded project presentation
Embedded project presentation
 
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
 
이클립스 플랫폼
이클립스 플랫폼이클립스 플랫폼
이클립스 플랫폼
 
3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 

Deview2013 track1 session7