본문 바로가기

전체 글

(33)
101 Javascript Critical Rendering Path (한글) (2) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 예제 코드에서 오타로 보이는 부분을 일부 수정했습니다. 필요한 경우, 원문을 확인해주세요. 원문: https://indepth.dev/posts/1498/101-javascript-critical-rendering-path 저작권 정보: https://indepth.dev/ 렌더 차단 자원 CSS 줄이는 방법 어떤 웹 페이지이든, 첫 스크롤 지점(fold) 이전에 있는 콘텐츠와 스크롤 지점 이후에 있는 콘텐츠가 있습니다. fold 이전에 있는 콘텐츠는 신중하게 선정해야 합니다. fold 전에 있는 모든 콘텐츠는 스타일을 로드해야만 합니다. 즉, 이것들은 Critical Style..
Towards an animation smoothness metric (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://web.dev/smoothness/ 저작권 정보: https://creativecommons.org/licenses/by/4.0/ 애니메이션을 측정하는 것, 애니메이션 프레임에 관해 생각하는 방법, 그리고 전반적인 페이지 동작을 부드럽게 하는 것에 대해서 알아봅시다. 당신은 아마 페이지가 스크롤 중에나 애니메이션을 보여주는 도중에 “버벅”거리거나 “정지” 되는 것을 경험해 봤을 겁니다. 우리는 이런 경험들을 부드럽지 않다고 얘기하곤 하죠. 이런 유형의 문제들을 해결하기 위해서, 크롬 팀은 애니메이션 감지를 위한 실험 도구에 더 많은 지원을 추가하고, Chro..
Overview of OOP patterns implementation in JavaScript (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1495/js-design-patterns 저작권 정보: JavaScript에서의 OOP 패턴 구현 개요 이제 'Gang Of Four'에서 설명한 OOP의 설계 패턴을 살펴보고 JavaScript에서 구현되는 방식을 살펴보겠습니다. 디자인 패턴이란? 먼저 디자인 패턴의 진정한 정의를 이해해야 합니다. 소프트웨어 개발자는 어떤 방법으로든 코드를 작성할 수 있습니다. 단, 코드를 유지하는 방법에 큰 차이가 있습니다. 최대한 고려되어 작성된 코드는 아마추어보다 오래갈 것입니다. 따라서 올바른 코딩 스타일을 선택할 때 확장성이나 유..