7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...Amazon Web Services Korea
클라우드 기반의 게임 스트리밍은 플랫폼과 디바이스에 제한받지 않고 플레이할 수 있는 등 여러 가지 뛰어난 장점을 가진 게임 체인저로 관심받는 기술입니다. 그러나 네트워크 이슈와 높은 서버 비용 등으로 인해 구현하는 데 어려움을 겪는 경우가 많습니다. 본 세션에서는 게임스트리밍 서비스를 AWS에서 어떻게 구현할 수 있을지에 대해 간단한 아키텍처와 데모를 통해 소개해드립니다.
7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...Amazon Web Services Korea
클라우드 기반의 게임 스트리밍은 플랫폼과 디바이스에 제한받지 않고 플레이할 수 있는 등 여러 가지 뛰어난 장점을 가진 게임 체인저로 관심받는 기술입니다. 그러나 네트워크 이슈와 높은 서버 비용 등으로 인해 구현하는 데 어려움을 겪는 경우가 많습니다. 본 세션에서는 게임스트리밍 서비스를 AWS에서 어떻게 구현할 수 있을지에 대해 간단한 아키텍처와 데모를 통해 소개해드립니다.
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...Amazon Web Services Korea
스타트업에서 빠르게 분석 서비스를 구성하기 위한 AWS 분석 서비스를 활용하고 있습니다. 본 세션에서는 커머스 서비스의 대용량 데이터를 Amazon Kinesis Firehose를 이용하여 실시간으로 사내에 흐르는 중요 데이터를 캡쳐하여 다양한 용도로 사용하는 방법을 알아봅니다. 매달 수백억 건의 사용자 행동 로그를 안정적이고 견고하게 수집하여 인하우스 데이터 분석 방법을 소개합니다. 또한, Amazon Personalize를 통한 개인화 추천 및 Amazon SageMaker를 이용한 이미지분류 등 기계 학습 활용 사례도 공유합니다.
게임의 성공을 위한 Scalable 한 데이터 플랫폼 사례 공유 - 오승용, 데이터 플랫폼 리더, 데브시스터즈 ::: Games on AW...Amazon Web Services Korea
데브시스터즈와 <쿠키런 : 킹덤> 의 사례를 기반으로, 게임 서비스에서 데이터 플랫폼의 역할과 중요성, 그리고 성공적인 게임 운영을 위한 데이터플랫폼의 Scalability 확보 방법에 대하여 기술적, 문화적 관점에서 이야기합니다. AWS 기반 클라우드의 특성을 적극적으로 활용한 데이터 플랫폼 환경과 발전 과정에 대한 기술적 설명과 더불어, 문화 및 조직적 차원에서의 접근에 대해서도 소개해드립니다..
Terraform을 기반한 AWS 기반 대규모 마이크로서비스 인프라 운영 노하우 - 이용욱, 삼성전자 :: AWS Summit Seoul ...Amazon Web Services Korea
Terraform을 기반한 AWS 기반 대규모 마이크로서비스 인프라 운영 노하우
이용욱, 삼성전자
EC2 및 ECS/EKS 등 다양한 컴퓨팅 환경 및 다양한 AWS 서비스를 활용하는 수십 종의 Microservice로 구성된 대규모 서비스 인프라를 Terraform 모듈을 이용하여 구성하고, 이를 원활하게 운영 관리하기 위해 필요한 terraform코드 구성 방법 및 Kitchen을 이용한 terraform 코드 테스팅 경험을 공유합니다.
옵저버빌러티(Observability) 확보로 서버리스 마이크로서비스 들여다보기 - 김형일 AWS 솔루션즈 아키텍트 :: AWS Summi...Amazon Web Services Korea
복잡한 마이크로서비스를 서버리스 환경에서 운영할 경우 효율적인 모니터링과 관찰 가능성 확보 방안이 요구됩니다. 본 세션에서는 Amazon CloudWatch의 다양한 기능 중 Dashboard, Metrics, Synthetics, Anomaly Detection, Container Insight, Lambda Insight, Log Insight 등과 AWS X-Ray를 소개하고 Observability (옵저버빌러티) 향상을 위해 최근 새롭게 출시된 서비스들을 알아봅니다.
커머스 스타트업의 효율적인 데이터 분석 플랫폼 구축기 - 하지양 데이터 엔지니어, 발란 / 강웅석 데이터 엔지니어, 크로키닷컴 :: AWS...Amazon Web Services Korea
스타트업에서 빠르게 분석 서비스를 구성하기 위한 AWS 분석 서비스를 활용하고 있습니다. 본 세션에서는 커머스 서비스의 대용량 데이터를 Amazon Kinesis Firehose를 이용하여 실시간으로 사내에 흐르는 중요 데이터를 캡쳐하여 다양한 용도로 사용하는 방법을 알아봅니다. 매달 수백억 건의 사용자 행동 로그를 안정적이고 견고하게 수집하여 인하우스 데이터 분석 방법을 소개합니다. 또한, Amazon Personalize를 통한 개인화 추천 및 Amazon SageMaker를 이용한 이미지분류 등 기계 학습 활용 사례도 공유합니다.
게임의 성공을 위한 Scalable 한 데이터 플랫폼 사례 공유 - 오승용, 데이터 플랫폼 리더, 데브시스터즈 ::: Games on AW...Amazon Web Services Korea
데브시스터즈와 <쿠키런 : 킹덤> 의 사례를 기반으로, 게임 서비스에서 데이터 플랫폼의 역할과 중요성, 그리고 성공적인 게임 운영을 위한 데이터플랫폼의 Scalability 확보 방법에 대하여 기술적, 문화적 관점에서 이야기합니다. AWS 기반 클라우드의 특성을 적극적으로 활용한 데이터 플랫폼 환경과 발전 과정에 대한 기술적 설명과 더불어, 문화 및 조직적 차원에서의 접근에 대해서도 소개해드립니다..
Terraform을 기반한 AWS 기반 대규모 마이크로서비스 인프라 운영 노하우 - 이용욱, 삼성전자 :: AWS Summit Seoul ...Amazon Web Services Korea
Terraform을 기반한 AWS 기반 대규모 마이크로서비스 인프라 운영 노하우
이용욱, 삼성전자
EC2 및 ECS/EKS 등 다양한 컴퓨팅 환경 및 다양한 AWS 서비스를 활용하는 수십 종의 Microservice로 구성된 대규모 서비스 인프라를 Terraform 모듈을 이용하여 구성하고, 이를 원활하게 운영 관리하기 위해 필요한 terraform코드 구성 방법 및 Kitchen을 이용한 terraform 코드 테스팅 경험을 공유합니다.
옵저버빌러티(Observability) 확보로 서버리스 마이크로서비스 들여다보기 - 김형일 AWS 솔루션즈 아키텍트 :: AWS Summi...Amazon Web Services Korea
복잡한 마이크로서비스를 서버리스 환경에서 운영할 경우 효율적인 모니터링과 관찰 가능성 확보 방안이 요구됩니다. 본 세션에서는 Amazon CloudWatch의 다양한 기능 중 Dashboard, Metrics, Synthetics, Anomaly Detection, Container Insight, Lambda Insight, Log Insight 등과 AWS X-Ray를 소개하고 Observability (옵저버빌러티) 향상을 위해 최근 새롭게 출시된 서비스들을 알아봅니다.
2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
지난 3년여간 비트라는 제품을 Python으로 개발하면서 얻게된 경험들을 나눕니다. 주로 기술적인 의사결정의 방법들과 실수들, 또 그런 실수들을 어떻게 수습하고 다듬어 왔는지 이야기 하고, 그런 과정들을 통해 비트라는 Python 프로젝트를 어떻게 개발하여 관리하는지를 다룰 예정입니다. 상세한 사례보다는 조금은 메타적인 이야기를 하여 가급적 많은 분들에게 도움이 되고자 하였습니다.
- 비교적 오랜시간 동안 많은 인원이 투입된 프로젝트가 어떻게 개발하고 머지하는지,
- 품질 관리를 왜 해야하고 또 어떻게 하는지,
- 적정한 기술을 선택함에 있어 어떻게 해야하는지
같은 부분을 상세하게 다룰 예정입니다.
4. Virtual DOM의 등장배경 - DOM
● DOM (Document Object Model)
그림 출처: https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/
5. Virtual DOM의 등장배경 - DOM
● DOM의 Good Point
○ Cross-platform, cross-browser을 지원한다
○ Web page 구조를 쉽게 표현한다
○ 사용하기 쉽고, control 할 수 있는 API가 제공된다
● DOM의 Bad Point
○ DOM manipulation에서 성능의 문제가 있다(느리다)
6. Virtual DOM의 등장배경 - DOM
● DOM Manipulation
○ element
○ attribute
○ events
○ style
7. Virtual DOM의 등장배경 - DOM manipulation 느리다?
● 많은 문서에서 DOM manipulation이 ‘느리다’ 라고 한다
● 왜? ‘느리다’ 인지 잘 설명되어 있지 않다
8. Virtual DOM의 등장배경 - DOM manipulation 느린가?
● pure javascript가 원래 가장 빠른거 아닌가?
● pure javascript가 결국 최종적인 manipulation API 아닌가?
9. Virtual DOM의 등장배경 - DOM manipulation 느림의 진실
● 사실 DOM manipulation은 느리지 않음
● 그리고 결국 DOM조작을 하려면, DOM API를 써야함
10. Virtual DOM의 등장배경 - dom manipulation이 느리다?
● 그럼 왜 DOM Manipulation이 느리다고 할까?
그림:http://combiboilersleeds.com/images/confuse/confuse-0.jpg
11. Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
● rendering engine basic flow
출처: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
12. Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
webkit gecko
출처: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engine
13. Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
출처: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
HTML source DOM Tree Render Tree
14. Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
● reflow(layout)
○ render tree의 전체 또는 일부를 다시 확인하고, 노드의 크기를 계산해야 할때 발생
○ 적어도 최소한 한번은 발생(페이지가 처음 그려질때)
● repaint
○ 화면이 다시 그려져야(update) 하는 경우 발생.
● what triggers a reflow or a repaint?
○ Adding, removing, updating DOM node
○ Hiding DOM node
■ display:none (reflow and repaint)
■ visibility: hidden (repaint only)
○ moving, animating a DOM node on the page
○ Adding a stylesheet, tweaking style properties
○ user action such as resizing the window, changing the font size, scrolling...
15. Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
출처: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
16. Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
출처: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
17. Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
● Browser는 reflow, repaint을 최대한 최적화 하여 동작.
● But, Browser의 최적화를 무력화 시키는 경우 존재
18. Virtual DOM의 등장배경 - dom manipulation이 느리다는 말의 의미
● DOM의 manipulation이 느리다? (X)
● DOM의 rendering calculation이 느리다! (o)
○ dom의 manipulation을 할 때 발생하는...
19. Virtual DOM의 concept - dom manipulation 횟수 최소화
● DOM의 manipulation을 빠르게 한다? (X)
● DOM의 manipulation에서 발생하는 rendering을 최소화 하자 (O)
=> DOM manipulation의 횟수를 최소화 하자
20. Virtual DOM의 concept - dom manipulation 횟수 최소화 예제
html & code JS manipulation (each) JS manipulation (ones)
21. Virtual DOM의 concept - dom manipulation 횟수 최소화 정리
● 여러분은, 이미 Virtual DOM의 concept을 사용했을 수 있습니다.
● 변경할 사항을 “가상의” 위치에서 처리하고, “실제 DOM”의 조작을 최소화!
넌 이미 알
고 있다.
22. Virtual DOM의 concept - What is virtual DOM?
● 가상의 DOM을 만들고 관리하는 것
● 가상의 DOM이란?
○ 무엇이든 될 수 있다~!!.
○ JSON, XML, Function, TEXT, annotation, etc ….
23. Virtual DOM의 concept - Virtual DOM JSON으로 이해해 보기
DOM JSON DOM
<ul class =”list”>
<li> item 1 </li>
<li> item 2 </li>
</ul>
{
type: ‘ul’,
props: {
‘class’: ‘list’
},
children: {
{ type: ‘li’, props: {}, children: [‘item 1’] },
{ type: ‘li’, props: {}, children: [‘item 2’] }
}
}
● JSON으로 DOM을 표현하기
24. Virtual DOM의 concept - Virtual DOM JSON으로 이해해 보기
DOM JSON DOM
<ul class =”list”>
<li> item 1 </li>
<li> item 2 </li>
</ul>
{
type: ‘ul’,
props: {
‘class’: ‘list’
},
children: {
{ type: ‘li’, props: {}, children: [‘item 1’] },
{ type: ‘li’, props: {}, children: [‘item 2’] },
{ type: ‘li’, props: {}, children: [‘item 3’] }
}
}
● JSON DOM을 update 하기
⇒ 실제 dom manipulation없이,
JSON에 대한 조작으로 DOM을
update
⇒ 여러 JSON으로
manipulation을 한 이후 최종적
으로만 dom manpulation
25. Virtual DOM의 문제점
● Virtual Table을 생성해야함
○ in-memory 사용의 증가
● DIFF의 필요성
● 개발자가 Virtual DOM의 개념을 이해 못하고 구현시, 큰 성능 향상이 없을 수 있음
31. Virtual DOM의 internal 구현을 한번 시도해보기 - JSX 표현
참고: https://jsfiddle.net/deathmood/5qyLubt4/?utm_source=website&utm_medium=embed&utm_campaign=5qyLubt4
32. Virtual DOM의 internal 구현을 한번 시도해보기 - VirtualDOM to Real DOM
참고: https://jsfiddle.net/deathmood/cL0Lc7au/?utm_source=website&utm_medium=embed&utm_campaign=cL0Lc7au
33. Virtual DOM의 internal 구현을 한번 시도해보기 - VirtualDOM to Real DOM update
● 다음 사항들을 고려해야 한다.
○ add
○ remove
○ replace
○ compare child node
34. Virtual DOM의 internal 구현을 한번 시도해보기 - VirtualDOM to Real DOM update
● diff (change)을 판단하는 함수
36. Virtual DOM의 internal 구현을 한번 시도해보기 - VirtualDOM to Real DOM update
● update 함수
children check
37. Virtual DOM의 internal 구현을 한번 시도해보기 - VirtualDOM to Real DOM update
● update 함수 전체 버전
참고: https://jsfiddle.net/deathmood/0htedLra/?utm_source=website&utm_medium=embed&utm_campaign=0htedLra
38. Virtual DOM의 internal 구현을 한번 시도해보기 - 남은 내용들
● Property 처리
● Event 처리
● component로 만들기
39. Virtual DOM 정리
● 그래서 뭐?
○ dom manipulation을 최소화 하는 방법을 사용하는게 좋다 (꼭 virtual dom이 아니어도…)
○ virtual dom의 원리를 알고 쓰는게 좋다 (web 개발자라면 특히나…)
○ 이 자료를 보고, virtual dom에 대한 기본 개념 이해가 높아졌으면 좋겠다...
41. Reference
● youtube
○ 만화 형태의 간단한 설명 - https://www.youtube.com/watch?v=BYbgopx44vo
○ 바벨에서 세미나 발표한 설명, data-binding에 초점, 핵심은 비슷, - https://www.youtube.com/watch?v=BYbgopx44vo
○ 간단하고 핵심적인 5분 이하 동영상 - https://www.youtube.com/watch?v=OoS5AK6qz1Q
○ Diff 알고리즘 및 browser DOM을 최대한 조금 건드린다는 설명 - https://www.youtube.com/watch?v=mLMfx8BEt8g
● ppt
○ why and how to use virtual dom - https://www.slideshare.net/DaiweiLu/why-and-how-to-use-virtual-dom
○ reactjs - https://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html
● articles
○ virtual dom vs incremental dom - https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/
○ data의 변화를 감지하고, dom을 변경하는 fw 소개 - http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
○ dom 이 느린 이유 - http://stackoverflow.com/questions/6817093/but-whys-the-browser-dom-still-so-slow-after-10-years-of-effort
○ browser에서 rendering 설명 (좋은자료) - https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
○ browser에서 rendering & paint 관련 설명 (좋은 자료) - http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
○ virtual dom와 dom의 차이 - http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
○ virtual dom 이란? - https://jbi.sh/what-is-virtual-dom/
○ virtual dom 짧은 설명, dom의 문제 - https://www.codecademy.com/articles/react-virtual-dom
○ dom manifulation의 문제 (좋은자료) - https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/
○ virtual dom 벤치마크 - https://vdom-benchmark.github.io/vdom-benchmark/
○ jsx 설명 - https://www.fullstackreact.com/p/jsx-and-the-virtual-dom/
○ server side, virtual dom - https://www.afas.nl/blog/virtual-dom-how-inefficiency-can-lead-to-better-performance
○ how to write your own virtual DOM - https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
○ Inner workings of virtual DOM - https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf
47. The inner working of virtual DOM
참고: https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf
48. React JSX
● XML 처럼 element을 작성 (View)
● JSX에 의해 React.createElement로 치환
● React.createElement는 Virtual DOM, 일종의 Object을 리턴함
49. React JSX
● <h1> hello, world</h1>은, React.createElement는 Virtual DOM, 일종의 Object을 리턴함
● ReactDOM.render 함수는, 실제 DOM으로 rendering 하는 역할
○ 실제 code를 분석해보면, createElement을 호출하는 부분을 발견할 수 있다.
○ https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/ReactDOMFiberComponent.js
HTML source code을 파싱해서, DOM tree을 생성한다.
CSS code을 파싱해서, style struct을 생성한다.
css 파일을 먼저 파싱
최종적으로 code내의 style태그 파싱
dom tree 와 style structure을 사용해서 Render tree을 만든다.
Render tree을 이용해서, layout(reflow)나 painting을 한다.
랜더링 엔진 간단 설명 (Rendering engines)
Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.
WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See webkit.org for more details.
Javasceript Enging → V8
HTML source code을 파싱해서, DOM tree을 생성한다.
CSS code을 파싱해서, style struct을 생성한다.
css 파일을 먼저 파싱
최종적으로 code내의 style태그 파싱
dom tree 와 style structure을 사용해서 Render tree을 만든다.
Render tree을 이용해서, layout(reflow)나 painting을 한다.
랜더링 엔진 간단 설명 (Rendering engines)
Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.
WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See webkit.org for more details.
Javasceript Enging → V8
기본적으로, 처음 paint될때는 paint와 layout이 모두 발생함
기본적으로 Browser역시, reflow, repaint의 비용 문제를 알고 있다.
Browser는 내부적으로 큐와 같은 자료 구조를 이용해서 매번 reflow, repaint을 하지 않고, 일정 시점에 한번 reflow, repaint을 하려고 노력한다.
하지만, Browser에서 큐와 같은 자료구조를 초기화 하고, 항상 reflow, repaint을 해야 하는 경우도 있다.
style정보를 항상 최신 값으로 주어야 하기 때문.
DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations.
This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.
14. Virtual dom의 concept을 이해하기 - 핵심 아이디어 ~ 해법은 언제나 근원으로 부터...
- 핵심 concept은...(아이디어는..!!)
-- dom manipulation을 빠르게 한다? (X) - 불가능
-- dom manipulation에서 발생하는 browser의 rendering을 최소화 하자. (O) - 가능
- 그럼 어떻게??
예제: https://jsfiddle.net/gseok/4jo353Lq/
15. Virtual dom의 concept을 이해하기 - 핵심 아이디어 ~ 해법은 언제나 근원으로 부터..
- dom manipulation의 횟수가 최소화 되면 됨!!
-- (부제..)이미 여러분은 virtrual dom의 concept을 사용했을 수도 있다!
16. Virtual dom의 concept을 이해하기 - dom의 manipulation횟수 최소화 예제
- 5개의 <item> 을 update 하는 경우로 살펴보기. (실제예제사용)
- dom의 manipulation이 많이 발생하는 방법
--> 각각의 item을 일일이 update
17. Virtual dom의 concept을 이해하기 - dom의 manipulation횟수 최소화 예제
- 5개의 <item> 을 update 하는 경우. (실제예제 사용 - 2배 빨라진거 확인 가능)
- dom의 manipulation이 적게 발생하는 방법
--> update되는 5개 item을 in-memory상에서 dom을 만들고, remove, append한번만.
18. Virtual dom의 concept을 이해하기 - dom의 manipulation횟수 최소화 정리
- 이미 여러분은 virtrual dom의 concept을 사용했을 수도 있다!
-- 대규모 dom조작시 화면의 깜빡거림등이 발생시.. 미리 만들고 교체!!
- 핵심..!
-- 변경할 사항을 "가상의" 위치에서 처리하고, "실제dom"의 조작은 최소화!!!
18. Virtual dom의 concept을 이해하기 - dom의 manipulation횟수 최소화 정리
- 이미 여러분은 virtrual dom의 concept을 사용했을 수도 있다!
-- 대규모 dom조작시 화면의 깜빡거림등이 발생시.. 미리 만들고 교체!!
- 핵심..!
-- 변경할 사항을 "가상의" 위치에서 처리하고, "실제dom"의 조작은 최소화!!!
19. Virtual dom의 concept을 이해하기. - What is virtual DOM?
- 가상의 위치란?
-- 무었이든 될 수 있다~!!!
-- JSON
-- function
-- "TEXT"
-- anotation?
.....
20. Virtual dom의 concept을 이해하기. - Virtual DOM - JSON으로 이해해 보기
- JSON으로 DOM Tree을 표현
20. Virtual dom의 concept을 이해하기. - Virtual DOM - JSON으로 이해해 보기
- JSON으로 DOM Tree을 표현
25. Virtual dom의 문제점
- Virtual Table을 생성해야함. (in-memory사용의 증가)
- DIFF의 필요성 (이부분이 핵심 로직이 됨)
- 개발자가 virtual dom의 개념을 잘 이해 못하고 구현시, 큰 성능 향상이 없을 수 있음.
- Virtual Table끼리의 비교문제 --> Incremenal DOM (google)
26. virtual dom의 internal 구현을 한번 시도해보기.
- 실제 Virtual dom의 구현체는 여러개임(React, 기타등등...)
- 코드가 매우 길고 복잡 (참고자료에 preact 흐름도)
- 여기서는 임의의 simple버전 구현을 소개
- How to write your own Virtual DOM의 글을 토대로함(링크주소)
https://github.com/Matt-Esch/virtual-dom/wiki
27. virtual dom의 internal 구현을 한번 시도해보기. - DOM Tree를 실제 표현해보기 (real DOM > JSON)
- real DOM > JSON
28. virtual dom의 internal 구현을 한번 시도해보기. - DOM Tree를 실제 표현해보기 (JSON > function)
- JSON > function화
We represent DOM text nodes with plain JS strings
But writing big trees in such way is quite difficult. So let’s write a helper function, so it will be easier for us to understand structure:
사용이 불편 JSX로
JSX: Javascript + XML, Javascript 확장 문법
JSX: https://babeljs.io/docs/plugins/transform-react-jsx/
JSX: Javascript + XML, Javascript 확장 문법
JSX: https://babeljs.io/docs/plugins/transform-react-jsx/
30. virtual dom의 internal 구현을 한번 시도해보기. - VirtualDOM을 실제 DOM으로 만드는 함수 만들기
31. virtual dom의 internal 구현을 한번 시도해보기. - VirtualDOM 변경을 실제 dom에 update하는 함수 만들기
- add
- remove
- replace
- 비교할 이전 virtualDOM이 없는 경우
- 비교할 새로운 virtualDOM이 없는 경우
- node의 자식 노드 처리도 필요
32. virtual dom의 internal 구현을 한번 시도해보기. - VirtualDOM 변경을 확인하는 함수 만들기
- check change
33. virtual dom의 internal 구현을 한번 시도해보기. - VirtualDOM 변경을 확인하고 update하는 함수로 통합(update)
33. virtual dom의 internal 구현을 한번 시도해보기. - VirtualDOM 변경을 확인하고 update하는 함수로 통합(update)
34. virtual dom의 internal 구현 - 테스트 !! - 전체 코드를 합쳐서!
- JSFiddle 링크(삽입 or 링크를 이용하게 함)
35. virtual dom의 internal 구현 - 테스트 !! - 남은 내용들.
- property 처리
- event 처리
- component로 만들기 등..
35. virtual dom의 internal 구현 - 테스트 !! - 남은 내용들.
- property 처리
- event 처리
- component로 만들기 등..
35. virtual dom의 internal 구현 - 테스트 !! - 남은 내용들.
- property 처리
- event 처리
- component로 만들기 등..
24. Virtual dom의 concept을 이해하기. - Virtual DOM - ReactJS에서의 concept
- reactJS에서 사용한 virtual DOM그림 (big picture 넣기)
24. Virtual dom의 concept을 이해하기. - Virtual DOM - ReactJS에서의 concept
- reactJS에서 사용한 virtual DOM그림 (big picture 넣기)
24. Virtual dom의 concept을 이해하기. - Virtual DOM - ReactJS에서의 concept
- reactJS에서 사용한 virtual DOM그림 (big picture 넣기)
참고: https://jsfiddle.net/gseok/4jo353Lq/
25. Virtual dom의 concept을 이해하기. - Virtual DOM - ReactJS로 구현해본 예제
- 5개의 <item> 을 update 하는 경우. (실제예제 사용)
- 앞쪽에서 설명한 실제 예제 2가지랑 비교해주기 (React의 virtual dom 사용시 빨라짐!)