애니메이션을 최적화 하기 위해선 브라우저의 렌더링 과정에 대해 알고있어야 한다. 브라우저 렌더링 과정 필요한 html, js, css 파일등을 서버로부터 다운로드 받는다 DOM 트리 + CSSOM 트리 생성 렌더트리생성 렌더트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다. DOM 트리와 CSSO...

문제를 풀기 전에, 코드를 적어내려 가거나 칠판에 적기 전에, 즉 무엇을 하던지 간에 먼저 한 발짝 뒤로 가서 내가 해야 하는 일이 무엇인지 이해하는 것이 제일 중요하다. 그냥 달려들었을 때 함정에 빠지거나 혼란에 빠질수도 있기 때문이다. 내가 특히 이런 방식으로 문제에 접근을 많이 했던것 같다. 일단 시작하고, 코드를 써내려 가다보면 해결책을 알게...

코드 스플리팅 Code Splitting이란 말 그대로 코드를 분할하여 큰 번들파일을 쪼개서 작은 사이즈의 파일로 만드는 것이다. 그렇다면 코드를 왜 분할하는 것일까? 위의 사진은 cra-bundle-analyzer을 사용한 번들 분석 결과이다. webpack-bundle-analyzer도 있지만 지금은 CRA로 만든 프로젝트를 분석해본 ...

지난 글에 이어서 Opportunities 항목을 하나씩 최적화 해보자! 내가 확인하고 있는 코드의 Opportunities 결과는 다음과 같다. 그럼, 하나하나 살펴보면서 최적화를 진행해 보자! Properly size images Properly size images 항목은 셀룰러 데이터를 절약하고 로드 시간을 단축하기 위해 ...

시작 더 효율적인 프론트엔드 개발자가 되고싶어 웹 성능 최적화에 대해 학습하려 한다. 아직 익숙하지 않아 바로바로 적용하는 데에 어려울 수도 있지만 계속 하면서 습관화 할 수 있도록 해야겠다! 🔥🔥🔥 lighthouse 가장 쉽게 성능을 확인할 수 있는 방법은 크롬 개발자 도구의 lighthouse이다. 자신이 원하는 설정을 체크하고 ...

기존 티스토리 블로그에 있던 글도 시간이 날 때 마다 하나씩 옮겨야 겠다. 😁