TIL - 2021.10.20

Today Ariticle

• 모두의 네트워크 정리 (3)

• 리뷰는 여기서 - 일일 아티클
  
  

그 외 오늘 참고한 아티클들

Today I Learned

position: fixed가 예상대로 동작하지 않는 문제

• 주황 FAB를 position : fixed로 고정했는데 뜻대로 동작하지 않았다.

• 스스로 생각한 이유는 첫 렌더링 때는 list가 없기에 전체 wrapper 높이가 뷰포트를 넘지 않는 상태에서 fixed가 되고, 이후 list를 불러오면서 wrapper의 높이가 뷰포트를 넘어간다.

• 하지만 FAB는 리렌더되지 않았기에 처음 fixed 될 때 연산된 위치에 고정되는게 아닐까? 하는 추측을 했다.

• tony의 말로는 transfrom, will-change로 인해 GPU 가속이 발생하기 때문에 생기는 브라우저 렌더링 버그라고 한다.

• 해결 방법으로는 height: 100%, position : relative 속성을 가진 div를 하단에 깔고, FAB를 그 요소에 position : absolute로 고정한다. FAB의 형재 요소로 전체 wrapper를 적용한다.

• fixed를 사용해본 적이 별로 없어서, 이런 경험이 처음이라 좀 당황했다.. tony가 알려준 원인도 사실 정확하게 이해하지 못 했다. will-change / GPU 가속에 대해 공부해야할 듯!

Today Review

• 1차 출시를 다음주 화요일로 정했다. 가능하겠지..? 이제 마크업을 작성하기 위한 공통 컴포넌트나 스타일 체계는 거의 잡힌거 같은데 각 상황별 렌더링 처리가 좀 걸릴 거 같다

• 가장 문제는 다 만들고 배포할 때 생길 각종 이슈들.. 다른팀 도움을 기대한다 ㅎㅎ..!