windowing 기법

들어가며 만약 만들고 있는 서비스가 성공해서 100만 개의 피드 데이터가 생성됐을 때, 모든 피드 데이터를 브라우저에 렌더링하게 된다면 어떻게 될까요? 그리고 이를 최적화할 방법은 무엇이 있을까요? 경험 많은 프론트엔드 개발자님에게 받은…

[스모디프로젝트] 성능 리포트

device: mobileNetwork throttling speed: Slow 4G throttlingCPU throttling: 4x slowdown Web Vitals에서 권장하는 성능 점수를 따르려한다. Web Vitals에…

빌드 속도 최적화 with loader

webpack 설정을 처음 할 때, ts(또는 tsx) 파일의 처리하는 설정을 잘못했다. 때문에 빌드 속도가 약 30초 정도로 오래 걸렸다. 당시 설정은 다음과 같았다. { test: /\.(js|jsx|ts|tsx)$/i, use…

빌드 환경 구축 with Webpack

프로젝트 빌드 환경을 직접 구축하기 위해 여러 옵션을 공부하고 적용했다. 이번 글에서는 스모디 프로젝트에 사용된 webpack 빌드 옵션을 정리하려 한다. 스모디 4.2.1 버전 기준 webpack 설정은 다음과 같다.

파일 압축하기

리소스를 압축하면 사용자에게 더 적은 비용으로 리소스를 제공할 수 있다. 이번 게시글에서는 리소스를 압축해서 브라우저에게 전달하는 방법에 대해 정리하려 한다. All modern browsers can handle a gzip encoded…

렌더링 최적화

브라우저의 렌더링 과정 중 Reflow와 Repaint 과정이 오래 걸린다. 따라서 렌더링을 최적화하기 위해서 해당 렌더링 과정의 발생을 줄이는 것이 중요하다. 예를들어 애니메이션을 구현할 때 top, left 등의 속성을 이용하는 것보다…

성능 측정 기준

성능을 최적화하기 전에 측정 항목을 명확히 알고있으면 목표가 분명해질 것이다. 프론트엔드에서 성능 최적화를 위한 항목은 대표적으로 세 가지가 있다. 로딩 최적화렌더링 최적화메모리 최적화 이외에도 구글에서 성능 측정의 지침으로 정해둔 Web…

babel-loader와 ts-loader 그리고 esbuild-loader

프로젝트의 webpack 설정을 다시 점검하는 시간을 가졌다. 그러던 중 ts와 tsx 파일을 처리하는 로더에 babel-lader와 ts-loader가 함께 사용된 것을 확인했다. 꼭 둘 다 사용해야 하는 것인지 확실히 조사가 필요했다. 또한 관련…

[Webpack] JS 파일 크기 줄이기 with mode, optimization, devtool

최적화를 진행하기 위해 요청한 리소스의 크기를 줄이는 방법이 있다. 이번 게시글에서는 webpack으로 프로젝트를 번들링할 때 js 파일의 크기를 줄이는 방법에 대해서 정리하려한다.

웹 캐시 with S3, CloudFront

성능 최적화 작업을 하면서 웹 캐시 문제를 마주했다. Lighthouse로 웹 성능을 측정한 결과 웹 캐시 관련돼서 개선할 것을 권고 받았다. 따라서 이번 글에서는 HTTP Cache에 대해서 알아보고, 현재 사용하고 있는…

이미지 최적화

최적화 작업을 하기 앞서 Lighthouse로 성능을 측정했다. 성능 점수는 아래와 같이 67점이 나왔다. 주로 이미지나 gif 등 asset 부분에서 개선이 필요하다고 경고했다. 개선이 필요한 항목과 상세 설명은 아래와 같다. Prop…

S3와 CloudFront

S3와 CloudFront로 정적 웹 사이트를 배포해야할 필요가 생겼다. 프로젝트를 진행하면서 S3에 대해서 종종 들었지만, 정확히 어떤 특징을 가진 서버인지 알지 못했다. 따라서 이번 기회에 S3와 CloudFront에 대해 정리하려한다.…