블로그 읽기
DRY - 잘못된 추상화의 일반적인 원인 (Link)
-
개인적인 간단 요약
DRY : Don’t repeat yourself., 반복하지 않기. 문제를 해결할때 내부 동일한 로직이 반복된다고 느껴질 때 반복을 활용해서 문제를 푼다.
하지만 반복을 활용하면서 더많은 요구사항에 대해서 핸들링 할 때 적절한 수준의 추상화가 되어있지 않은 상태면, 반복을 사용하지 않는 것이 더 낫거나, 특정 요구사항만을 위해서 매개변수들이 추가되거나 하는 여러가지 상황들이 만들어질 수 있다.
적절한 추상화 수준을 고려하기 위해서 요구사항에 직접 드러나지 않는 요소도 고려할 필요가 있다. 위 글에서 예시를 빌리자면, Header에 존재하는 같은 버튼들이더라도, 의미에 따라 용도가 달라지기 때문에, 무작정 button을 반복하는 것이 아니라 각 UI의 용도에 사용될 수 있는 추상화가 고려되어야 한다.
공통 컴포넌트 구현을 하면서 다양한 형태의 UI를 하나의 컴포넌트로 표현하려다보니 무작정 매개변수만 늘리고 있었던 기억이 난다. 어떤 맥락에서 보면 이런 부분도 추상화가 부족해서 일어났던 것은 아닐까 한다.
1일 1 면접 질문
브라우저 렌더링 엔진의 작동 과정을 설명하고, 렌더링 최적화를 위해 사용할 수 있는 기술적 방법들에 대해 논의해 주세요. 특히, 리플로우(reflow)와 리페인트(repaint)의 차이와 이를 최소화하는 방법에 대해 설명해 주세요.
우선 브라우저 랜더링 과정으로는 브라우저는 전달받은 html 파일을 읽으며 DOM을 형성하고, CSS 를 파싱하여 CSSOM을 형성하기 시작합니다. DOM과 CSSOM이 완성된 이후에는 두 Model을 합쳐 랜더트리를 형성합니다. 랜더 트리를 기반으로 요소의 위치와 크기를 계산하고(레이아웃), CSS 스타일을 적용하여 요소를 화면에 그립니다.(페인팅) 페인팅 과정 까지 끝난 후에 화면에 요소들이 합성되어 사용자에게 최종적으로 보이게 됩니다.
브라우저 랜더링을 최적화하는 방식에는 우선 설계 단계에서 변화가 많은 컴포넌트에 대해서 분리하는 것이 중요합니다. 그리고 HTML, CSS, JS 크기를 최소화하고, 필요한 자원을 로드해야한다. 이때 코드 분할, 압축, 캐싱의 기술을 사용할 수 있다.
그 외에도,
레이아웃 쓰로틀링과 디바운싱 - 스크롤이벤트나 창 조정 이벤트같은 경우 리플로우가 자주 발생한다. 스로틀링이나 디바운싱을 통해서 이벤트의 발생 빈도를 줄여야한다.
레이지 로딩 - 크기가 큰 이미지나 동영상 같은 리소스는 필요한 시점에 로딩되도록 핸들링해야한다.
등을 활용할 수 있다.
리플로우는 DOM 구조의 변화나 스타일 변화로 인해서 요소의 크기를 다시 계산하는 과정이고 리페인트는 스타일 변경으로 인해서 요소를 다시 그리는 과정을 말한다.
