web (4) 썸네일형 리스트형 CSR 성능 최적화를 위한 PRPL 패턴 with React rendering-on-the-web 문서서는 클라이언트 렌더링 최적화를 위해 RTTs를 줄이거나 중요한 스크립트와 데이터를 를 사용하여 더 빨리 전달하거나, JS 용량을 줄이거나(tight JavaScript budget) PRPL 패턴을 사용하거나 코드 스플리팅을 사용하거나(aggressive code-splitting) Application Shell caching을 사용하라고 합니다. 이 중에서 PRRL 패턴을 알아보겠습니다. TL;DR P : 링크의 rel 속성을 통해 프리 로딩(페치) 이용 R : 서버 렌더링을 이용해 프리 렌더링 이용 P : 서비스 워커를 이용해 프리 캐시를 이용 L : loading 속성을 통해 지연 로딩을 이용 PRPL 패턴이란? PRPL은 다음의 약어입니다. Push (.. 보다 탄력적인 웹을 위한 점진적 향상[Progressively enhance for a more resilient web] 요즘 트위터에서 자주 언급되는 Progressive enhance에 대해 알아봅시다. 원문 주소입니다 : https://jjenzz.com/progressively-enhance-for-a-more-resilient-web Progressively enhance for a more resilient web There has been a lot of talk on the socials lately about progressive enhancement. Some good, some bad, and while the bad is often misled I get it. jjenzz.com 최근 점진적 향상(progressive enhancement)에 대한 이야기가 많이 나오고 있습니다. 이 주제에 대한 교육.. CSS 애니메이션 : 설계 Types of animation 작가 Rachel Nabors는 그녀의 놀라운 책 “Animation At Work”에서 애니메이션의 5가지 일반적인 범주를 설명합니다. Transition : 한 페이지에서 다른 페이지로 이동 모달 열기 또는 닫기, 다음 단계로 이동하는 다단계 마법사와 같이 페이지의 내용을 상당히 변경합니다. Supplements : "위치" 또는 작업을 변경하지 않고 페이지에서 정보를 추가하거나 제거합니다. 예를 들어 알림이 모서리에 나타날 수 있습니다. Feedback : 사용자가 애플리케이션이 사용자 입력에 어떻게 응답했는지 이해하는 데 도움이 됩니다. 예를 들어, 양식을 제출할 때 나타나는 오류 메시지 또는 클릭 시 아래로 미끄러지는 버튼이 눌러져 있음을 나타냅니다. Demon.. CSS 애니메이션 : Transforms Translation in flow 위치에서의 이동. 해당 요소의 이동이 grid, flex 타 요소 배치에 영향주지 않음. 픽셀 transform: translate(0px, 20px); % : 원래 자신의 크기 transform과 left의 차이점 Scale 배수를 나타내는 단위없는 값 좌우따로 너비나 높이 수정 시 모든 요소들의 위치를 계산해서 다 변경해야함. transform은 대상만 움직이고 확대하기에 성능에 좋음 Rotate 시계 방향으로 돌림 degree : 회전 각도 turn : 회전 수 Skew 거의 안씀. 대각선 레이아웃 만들 때나 씀 : https://9elements.com/blog/pure-css-diagonal-layouts/ 디폴트 X축. Y축 가능 Transform or.. 이전 1 다음
