얼마 전에 당근마켓 인턴십 면접을 봤다. 준비를 제대로 못해서 많이 불안했는데 역시나 ㅎㅎ 면접을 잘 보지 못했다.
그래도 면접을 진행 후, 스스로를 재정비할 수 있는 시간을 가질 수 있었고 가질 것이다.
앞으로는
기본적인 기술 정리를 꼼꼼히 하자
면접 질문 중에 기본적인 지식을 묻는 질문이 굉장히 많았다. 질문을 받고도 아는 개념인데 제대로 답하지 못한 것이 너무 아쉬웠다. 아는 거라고 대충 넘기지 말고 한번씩 정리하는 시간을 가져야 겠다.
사용한 이유와 목적을 정리해보자
개발을 하면서 라이브러리나 다양한 기술을 쓰는 일이 많을 텐데 왜 이 기술을 사용했는지 이유가 무엇인지 생각해보면 좋을 것 같다.
웹 구동에 대한 공부를 열심히 해보자
프론트앤드 개발자가 되고 싶은 사람이 웹 구동 방식에 대해서 제대로 알지 못했다는게 스스로에게 화가났다. 틈틈히 공부해보면서 이해해야겠다.
기억하자
이번 면접 질문 중 가장 기억에 남았던 두 가지 질문을 간단하게 정리해보려고 한다. 언젠가 내가 다시 이 질문을 받았을 때 완벽하게 답할 수 있도록 다시 준비 해야겠다.
Repaint와 Reflow는 무엇인가
정말 처음 들었다. 면접 후에 자료도 찾아보며 공부해봤는데, 프론트앤드 개발을 공부하면서 웹 렌더링 과정도 제대로 알지 못한점 반성하게 됐다. 제대로 개념을 잡아야겠다.
Reflow 와 Repaint 가 무엇인지 정리하기 전에 브라우저 렌더링 과정에 대해 알아보자.
렌더링
HTML, CSS, Javascript등의 문서를 브라우저에서 그래픽 형태로 출력하는 과정
대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있으며, 브라우저마다 모두 같은 엔진을 사용하지 않는다.
따라서 프론트엔드 테스트 환경에서는 다양한 브라우저의 호환성 문제를 체크해야한다.
렌더링 과정
- DOM과 CSSOM 생성 단계
연산과 관리가 유리하도록 Object Model로 만든다.
각각 DOM Tree와 CSSOM(CSS Object Model)으로 생성된다.- Render Tree 생성 단계
DOM Tree와 CSSOM을 이용하여 Render Tree를 생성한다.
이때, Render Tree에는 페이지를 렌더링하는데 필요한 노드와 스타일 설정 정보가 포함된다.- Layout 단계
뷰포트내에서 각 노드들의 정확한 위치와 크기(px)를 계산한다.
(Render Tree 노트들이 가지고 있는 스타일과 속성에 따라 브라우저 화면 어느 위치에
어떤 크기로 출력될지 계산하는 단계이다.)
** 뷰포트는 그래픽이 표시되는 브라우저의 영역/크기를 의미한다.- Paint
Layout단계에서 계산된 요소들을 실제 화면에 그린다.
텍스트나 컬러나 이미지,효과 등을 모두 처리하는 단계이다.그렇다면 Reflow와 Repaint란
Reflow는 어떤 이벤트가 발생했을 때 html 요소가 추가되거나 요소의 크기나 위치등이 변경된다면 이에 해당하는 자식 노드나 부모 노드들을 포함하여 Layout단계를 다시 수행하여 Render Tree 요소들의 크기와 위치 다시 계산하는 것을 말한다.
아래 목록은 Reflow가 발생할 수 있는 다양한 상황에 대한 예시이다.
- 페이지 초기 렌더링을 통한 초기 Layout단계
- 윈도우 사이즈가 변경될 때
- 노드가 추가하거나 제거할 때
- 요소의 위치 또는 크기 변경 (margin, padding, border, width, height, 등..)
- 이외 폰트가 변경되거나 텍스트, 이미지 변경 등
그렇다면 Repaint는 무엇일까
Repaint는 계산된 요소들을 Render Tree에 다시 그려주는 것을 말한다. 주로 Reflow 후에 발생하거나 스타일 속성이 변경되었을 때 발생한다.(background-color, visibility 등 변경)
Reflow와 Repaint를 줄이자
Reflow와 Repaint과정이 많이 발생한다면, 어떻게 될까?
다시 계산하고 그려야하기 때문에 페이지 성능 저하 문제가 발생할 수 있다. 그래서 우리는 Reflow와 Repaint를 발생시키는 상황을 만들어주지 않는 것이 좋다. 이 외에도 성능을 최적화시킬 수 있는 다양한 방법이 있다. 이부분은 좀 더 공부해보며 깊게 다루어 볼 예정이다.
article과 section, div 각각 어떨 때 쓰이나
세가지 모두 영역을 지정하여 사용한다는 점은 알고 있었지만, 명확하게 설명하지 못했다. 간단하게만이라도 정리해보려고 한다.
article
독립적인 컨텐츠를 다룰 때 사용한다.
블로그나 기사 등에 사용된다.section
제목(h1,h2등)을 가지고 있으며(필수는 아님), 서로 연관된 컨텐츠들 묶을 때 사용한다.div(division)
관계없이 구역을 나눌 때 사용한다.느낀점
면접 진행 시간이 굉장히 길게 느껴졋다. 그만큼 내가 준비가 부족했다는 생각이 들었다. 지금이라도 다시 부족했던 부분을 한번 더 다시 채워봐야겠다. 다시 열심히 해서 도전해야겠다.!!!
참고
