2022-01-17 TIL

Fact

• 프로그래머스 프런트엔드 데브 코스 자기소개서를 썼다.
• 뮤직 앱을 만들면서 해당 노래 시간에 맞는 가사를 출력하고 싶은데 쉽지 않다.

Feelings

• 리덕스를 사용하고는 있지만, 효율적으로 사용하고 있는지는 모르겠다. 더 공부가 필요한 부분이다.
• 데브 코스를 꼭 참여하고 싶다.
• 뮤직 앱을 만들면서 고민한 게 이걸 꼭 리덕스를 사용해야 했을까라는 생각이 들었다. 내가 리덕스를 사용해 본 적이 없어서, 공부를 목적으로 사용하게 되었지만 간단한 상태 전달이면 mobx를 고려해 봤으면 어땠을까라는 생각이 든다.
• 뮤직 앱에서 노래의 진행 시간을 가사 페이지로 가져와서 해당 시간일 때맞는 가사를 출력하도록 만들고 있는데, 쉽지 않다.

Findings

• 리플로우 리페인트

  • 브라우저는 HTML, StyleSheets를 해석한다. 그리고 HTML 문서의 해석이 끝나면 ”DOM”트리를 만들고, StyleSheets 문서의 해석이 끝나면 ”스타일 규칙”을 만듭니다.
  • 렌더 트리 : 위에서 만들어진 ”DOM”트리와 ”스타일 규칙”을 합쳐서 렌더 트리를 만든다. 그리고 여기에서 배치가 되어서 요소들의 레이아웃을 위치시킨다.
  • 그리기 : 이름 그대로 렌더 트리가 탐색되고, paint 메서드가 호출되어서 UI 기반의 구성요소를 사용해서 그린다고 한다.
  • Reflow : 앞서 ”렌더 트리”의 과정에서, 요소들의 레이아웃 위치를 렌더 트리에 구성하는데 거기서 Reflow가 호출되는데, 우선 기본적으로 최초에 한번 실행이 되고, 이후에 요소들의 레이아웃에 영향을 주는 변화가 생기면 다시 렌더 트리를 구성해야한다. 이것을 Reflow라고 부른다고 한다.

  그러면 새로운 요소(엘리먼트, 노트)가 추가되거나 또는 지워지거나, 위치의 변경. 크기의 변경, 위치값이나 크기가 상대값으로 되어있다면 브라우저의 크기가 변경될 때도 발생할 것이다. 그럼 reflow가 늘어날수록 렌더링 속도는 느려지고 성능은 저하될 것이다.

  • Repaint Repaint는 Reflow가 발생하면 자연스럽게 Repaint 도 발생한다. 아닌 경우도 있다. 레이아웃에 영향을 주지 않는 엘리먼트 개별의 변화에서는 Reflow가 발생하지 않고 Repaint만 발생한다. ex) color, background-color

Future Action

• 요즘 알고리즘 문제를 안 풀고 있다. 자바스크립트 스터디가 끝나면 다시 시작해야겠다.