2021년 11월 01일 아스테라 스터디에서 발표한 내용 - 알고리즘을 공부해야 하는 이유 - DOM & CSSOM - Event Loop

1. ASTERA PROJECT
✨ We Light-up the world ✨
발표자: NoHack
2021.11.01 (월)

2. Contents
2
1
3
4
Is algorithm important?
┃알고리즘을 공부해야 하는 이유
DOM & CSSOM
┃렌더링 정보를 담은 객체
Event Loop
┃자바스크립트를 비동기로 만들어 주는 친구
Q&A
┃질의응답

3. 1. Is algorithm important?
알고리즘을 공부해야 하는 이유

4. Q. 알고리즘이란 무엇일까요?

5. 즉, 알고리즘은 문제를 해결하기 위한 방법
Algorithm => CODE

6. 알고리즘은 정말 중요하다고 한다
하지만 와닿지 않는 현실 -_-

7. 그런데 생각보다 훨씬 더 중요하다 !

8. 코드가 깔끔해 진다 (DRY)

9. 성능(Performance)이 개선된다

10. 코딩 테스트 [!]

11. 그럼 알고리즘은 어떻게 공부해야 할까?

12. BFS
그리디 알고리즘
DFS
다익스트라
정렬 이진탐색
플로이드 워셜
브루트포스
문자열 압축
구현

13. 정답은 문제를 많이 풀어보는 것!

14. 2. DOM & CSSOM
렌더링 정보를 담은 객체

15. 렌더링(Rendering)
우리가 작성한 요소를 화면에 나타내는 작업
HTML / CSS / JS로 작성한 것들

16. 렌더링 프로세스 (Critical Rendering Path)

17. DOM = Document Object Model

18. CSS = CSS Object Model
DOM을 생성하는 방식과 동일하게 동작

19. Render Tree

20. [주의!] 렌더링은 언제든 다시 일어날 수 있다
1. 브라우저 사이즈 변경
2. 요소 사이즈(margin, padding, width) 변경 <= Reflow
3. 요소 색상, 그림자 효과 변경 <= Repaint
그 외에도 렌더링을 다시 일으키는 원인은 다양함

21. 렌더링은 부하가 큰 작업이기에
reflow/repaint가 최대한 덜 발생하게 해야 한다

22. 3. Event Loop
자바스크립트를 비동기로 만들어 주는 친구

23. 자바스크립트는 대표적인 싱글 스레드 언어
(Single-Threaded Language)

24. 프로세스 A
Heap
Data
Stack
Thread
프로세스 B
Heap
Data
Stack
Thread 1
Stack
Thread 2

26. 싱글 스레드라면서
어떻게 인터랙티브한 처리가 가능한 것일까?

27. 바로 이벤트 루프라는 녀석 때문!

28. Call Stack
Web API
Task Queue
Event Loop
function A
function B
function D

29. Task Queue
Micro Task Queue
Render Sequence
<
<
setTimeout, addEventListener 등 비동기 Web API
Promise, Async/Await
Animation Request Frame > Layout > Paint > Composite

30. 결론
자바스크립트는 싱글 스레드이지만,
이벤트 루프 덕에 비동기처럼 동작 할 수 있다

31. Q&A

32. Thank you