230321(화)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

브라우저의 렌더링 과정

JavaScript 실행 -> layout 계산 -> render tree -> paint -> composite

레이아웃 단계(리플로우)

DOM + CSSOM으로 Render Tree가 완성되면 이를 토대로 레이아웃을 계산하게 된다. 이때, 렌더트리에는 페이지를 렌더링하는데 필요한 노드만 포함한다.

페인트 단계

앞선 과정에서 요소들의 크기, 모양, 위치까지 알았다면 이제 어떤 순서로 그릴지 결정하게 된다.

컴포지트(합성) 단계

• 레이아웃을 하고 페인트가 끝나면, 이런 정보를 스크린의 픽셀로 바꾸는 레스터 라이징 작업이 일어난다. 단, 이 방법은 크롬이 처음 공개되었을 때 사용되었고 현대의 브라우저는 컴포지팅이라는 방식으로 동작한다.
• 컴포지팅은 한 페이지의 부분들을 여러 레이어로 나눈 뒤, 그것들을 각각 레스터 라이징하여 컴포지터 스레드에서 합성하는 기술이다. 어떤 요소들이 어떤 레이어에 있어야 하는지 알기 위해서, 메인스레드는 레이아웃 트리를 순회하며 레이어 트리를 생성한다. 레이어 트리가 생성되고 페인트 순서가 결정되면 메인 스레드는 컴포지터 스레드에게 커밋한다. 그러면 컴포지터 스레드가 각 레이어를 레스터 라이징하게 된다.

transform의 이점

• transition을 통한 애니메이션 효과를 줄 때, 웬만한 css 속성들을 변화시키는 것은 리플로우(리레이아웃)를 일으킨다.
• 그러나 transform은 composite 단계에서의 변화를 일으키므로 리플로우, 리페인트 과정없이 훨씬 더 효율적으로 transition을 통한 애니메이션 효과를 줄 수 있다.
• 그냥 left: 200px 보다 transform: translateX(200px)가 더 효율적이다.
  • left로 이동하는 건 layout 단계의 변화를 일으키지만, translate은 composite에서 독립된 레이어에서 gpu가 처리하기 때문이다.

리플로우(리레이아웃)와 리페인트

가능하면 동적인 변화는 리플로우보단 리페인트가 그나마 더 효율적임을 알 수 있다. 리플로우 과정은 문서 내용이나 구조 또는 위치를 변경하는 경우 일어나며 리페인트는 요소의 스타일을 변경하는 경우에 발생한다. 더 효율적인 것은 composite(합성) 단계에서 처리하는 것이다.

🍀 오늘의 고민 키워드

class constructor에는 최대한 생성자로서의 역할만 작성할 것

그동안 class를 구현할 때, constructor에서 해당 클래스의 프로퍼티를 선언하는 것 뿐아니라, 온갖 로직을 다 넣었었는데…
꼭 안되는 건 아니지만 이게 뭔가 잘못되었다는 것을 알게 되었다. 생각해보면 그렇다. class에서 instance가 만들어질 때, 즉 new로 호출될 때 constructor(생성자)가 실행되면서 상태값들을 정해주는 것인데…! 그 안에서 addEventListener도 붙이고, 때로는 비동기 처리도 하고… 그러니까 코드가 지저분했지ㅠ… 앞으로는 최대한 생성자와 상태, 메서드를 좀 명확하게 구분지어서 나눠봐야겠다.

📝 요약 및 하루 간단 회고

오늘 최대한 컴포넌트 설계를 정말 대충 마무리했다. 헌데 아직 동적으로 요소를 넣어줬을 때, 스르륵 보이는 애니메이션은 어떻게 주어야할지 고민된다. 이전처럼 그냥 css로 가려뒀다가 보여주는 식이면 이해가 되겠는데, 지금 컴포넌트 기반 코드에서는 매번 버튼 클릭 시 동적으로 데이터를 바탕으로 태그를 만들어서 넣어주기 때문에 아직 잘 감이 안온다. 근데 뭐 방법은 있을테니까~~~

오늘의 잘한 점

• 하려고 했던 계획들 거의 다 한 점!(딱 하나 못했지만..!)

오늘의 아쉬운 점

• 위에 딱 하나 못한거..?ㅋㅋㅋㅋㅋ

참고

• 브라우저에서 페이지를 렌더링하는 방식