스프린터스 #25 Jquery vs React

HR.lee·2022년 4월 24일
0

스프린터스

목록 보기
25/25
  1. 클로저(closure)가 무엇인지 설명해보세요
  2. DOM을 건드리는 방식과 아닌 방식의 차이는 무엇인가요?
  3. 함수 scope와 블록 scope에 대해 설명해보세요
  4. Eslint, prettier에 대해 아는대로 설명해보세요
  5. CSS 박스 모델에 대한 얼마나 알고 있고 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명해보세요
  6. inline과 inline block의 차이점에 대해 설명해보세요

https://joontae-kim.github.io/2020/10/26/interview-question-fe/
https://velog.io/@mooh2jj/React-및-기타-프론트-면접-리스트

https://darrengwon.tistory.com/1332

DOM을 건드리는 방식과 아닌 방식들의 차이

이 질문에 대한 핵심 or 예상 의도
모던 js 프레임워크의 가상돔 (Virtual Dom)에 대해 알고 있는지?

직접 DOM을 건드리는 경우 DOM의 구조를 파악하고 있어야하며,
클래스명이나 태그명이 바뀌는 경우 다시 DOM을 변경해야만 한다는 단점이 있다.

Angular의 경우 view와 model을 연결시키는 바인딩 작업이 있고 변화 감지를 통해서 상태를 보고 있다가 업데이트 되는 방식이다. React와 Vue의 경우 가상 DOM이 있고, 가상 DOM이 실제 DOM과 비교하여 state가 변화되었는지 감지 한다.

돔을 건드리지 않는 프레임워크들

vue와 React의 차이?
공통점으로 컴포넌트 기반이다. Virtual DOM 방식이다. 가볍고 빠르다.
vue는 단일 파일 컴포넌트이다. html, css, javascript코드가 하나의 파일에 모두 정의하는 방식이 기본이지만, 컴포넌트화 해서 사용할 수 있음!!
HTML 기반 템플릿 구문을 가진다. -> 배우기 쉬움

가상돔과 진짜돔의 성능차이에 중요한 역할을 하는 리플로우

렌더링 엔진의 동작하는 과정 = 중요 렌더링 경로(Critical Rendering Path) = HTML/CSS/JS 파싱 및 그려내기

요약하자면, 파싱한 다음에 HTML/CSS를 통해 렌더 트리를 만들고 플로우, 레이아웃 하고 페인팅

리플로우는 레이아웃 과정이 다시 실행되는 부분을 말하는데 윈도우 리사이징시, 노드가 추가되거나 삭제될때,요소의 위치나 크기가 변경될때 발생합니다. reflow가 실행된 렌더트리를 다시 화면에 뿌려주는 것을 repaint라고 합니다.
리플로우가 일어나는 속성들 - position, width, height, left, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, text-align …
리페인트가 일어나는 속성들 - background, background-image, background-position, border-radius, box-shadow, color, visibility …
transform, opacity -> 리플로우, 리페인트가 일어나지 않음

리플로우/리페인트

브라우저를 사람이라고 생각해봅시다.지어 놓은 건물 부수고 다시 측량하라고 하면 힘들고(리플로우), 다시 인테리어(리페인트)하라고 하면 힘듭니다.가급적 이런 일은 필요하지 않으면 안하는게 좋겠지만, 괜찮아 보이는 웹을 만들려면 리플로우/리페인트 둘 다 일어납니다.솔직히 말해서, 리플로우를 안 일어나게 작성하면 웹페이지가 너무 밋밋하고, 인터렉션 자체가 없어집니다.언제 일어나는지는 알아두고, 오용하는 것을 막는 정도로 타협을 봐야겠죠.

리플로우는 다음과 같은 경우에 발생합니다.외우기보다, 상식적으로 "아, 브라우저가 다시 DOM을 그려야겠구나"라는 생각이 들면 그겁니다.

  • DOM 추가, 삭제
  • DOM의 위치, 크기, 패딩, 마진 등 기하적인 속성의 변경 (hover 스타일성애자들이 주로 씀)
  • 폰트 변경, 이미지 변경
  • window.resize 이벤트시 영향 받는 여러 DOM들
  • 애니메이션 (DOM 지우고, 옮긴 좌표에 새로 그리고의 반복이니까)

리페인트는 언제 일어나는가?

우선, 리플로우가 일어나면 자연스레 리페인트도 다시 일어나게 됩니다.화면 전체의 가시성을 모두 확인해야 해서 값비싸다고 하다는데그러나, 리플로우 없이도 리페인트가 발생할 때가 있는데 가시성과 관련된 css 속성이 변화할 때 일어납니다.대표적으로

opacity, background-color, visibility, outline이 있겠습니다.

  • 리페인트보다 리플로우가 훨씬 값비싼 동작이라고 합니다. 우선 리플로우를 줄입시다.
  1. visibility, display, opacity에 대해

visibility는 화면에 안 보이는 것일 뿐, 이미 위치를 차지하고 있다. 따라서 visibility가 변경되면 리플로우가 일어나게 된다.

display가 none이면 화면 자체에 공간을 차지 하지 않으므로 리플로우를 줄일 수 있습니다.만약 단순히 보이지 않게 만들고 싶다면 opacity를 쓰면 리플로우없이 리페인트만 발생합니다.

  1. 애니메이션

애니메이션은 DOM을 지우고, 옮기고의 반복이니 리플로우겠죠.

애니메이션이 발생하는 DOM은 position을 fixed, absolute로 설정하는게 좋습니다. 다른 DOM에 영향을 안 미치니까 리플로우는 안 일어나겠죠.

Virtual DOM은 왜 빠른 것인가

브라우저의 렌더링 과정 중에서 가장 많은 비용을 소요하는 작업은 레이아웃(플로우)과 페인팅작업입니다.이 과정은 줄여야 웹이 빨라집니다. js로 DOM을 직접 조작하여 수정을 할 경우, 이 레이아웃과 페인팅 작업을 다시하게 됩니다.한 두개의 DOM을 조작하는 것은 빠를테지만, 이런 조작이 for 문을 돌면서 100개가 이루어진다고 보면, 레이아웃과 페인팅 작업을 100번 해야 하는 겁니다. 

연산의 횟수가 많아진다는 거죠. 따라서, 많은 양의 DOM을 직접 조작하는 것은 많은 비용을 초래하게 됩니다.반면 가상 DOM은 실제로 렌더링되지는 않았지만, 실제 DOM 구조를 반영한 상태로 메모리에 있는 가상의 DOM입니다. 메모리 상에 있고, 실제 화면에 그려야할 필요는 없기 때문에 실제 DOM보다는 연산 비용이 적습니다. 가상 DOM은 이러한 특징을 바탕으로 위에서 말한 변경 사항들을 한 번에 묶어서 실제 DOM에 반영을 합니다. 물론 레이아웃 단계와 페인트 단계에서 한 번에 변경되어야 하는 사항은 많아집니다. 대신 단 한 번의 계산만으로도 바뀐 DOM을 적용할 수 있기 때문에 연산의 횟수는 최소한이 됩니다.

결국, Virtual DOM은 레이아웃(리플로우)와 페인팅 작업을 최소화 할 수 있도록 한 번에 조작을 가하기 때문에 직접 DOM을 조작하는 것보다 적은 리소스를 사용하면서 수정할 수 있단든 점에서 빠르다고 하는 겁니다.

profile
It's an adventure time!

0개의 댓글