juncci 님의 블로그

웹 서비스의 성능을 개선하려면 무엇부터 확인해야 할까?페이지가 느리다는 것은 단순히 로딩 시간이 길다는 의미일까? 화면은 빠르게 표시되지만 버튼을 눌렀을 때 반응이 늦거나, 콘텐츠가 로딩되는 과정에서 레이아웃이 움직이는 경우도 성능 문제라고 볼 수 있다. 이처럼 웹 성능은 하나의 기준으로 평가하기 어렵다.사용자가 콘텐츠를 얼마나 빠르게 확인할 수 있는지, 입력에 얼마나 빠르게 반응하는지, 화면이 얼마나 안정적으로 유지되는지 등 여러 관점에서 살펴봐야 한다. 이러한 사용자 경험을 정량적으로 평가하기 위해 다양한 웹 성능 지표가 존재한다.이번 글에서는 앞으로 공부할 웹 성능 지표들을 살펴보고 어떤 기준으로 학습을 진행할 것인지 정리해 보려고 한다.1. 웹 성능은 하나의 지표로 설명할 수 없다웹페이지가 빠르다..

이미지 최적화를 진행하면서 원본 이미지를 최대 256×256으로 리사이즈하고 WebP 형식으로 변환했다. 이를 통해 이미지 전송량과 업로드 시간을 크게 줄일 수 있었다. 하지만 최적화 이후 한 가지 의문이 남았다.이미지의 용량을 줄였다는 사실만으로 최적화가 잘 이루어졌다고 판단할 수 있을까?이미지 압축은 일반적으로 파일 크기와 시각적 품질 사이의 절충을 요구한다. 압축 강도를 높이면 전송해야 할 데이터는 줄어들지만 원본 이미지의 일부 정보가 손실될 수 있다. 기존 서비스에서는 WebP quality=0.82를 사용하고 있었다. 그러나 이 값이 다른 Quality 설정과 비교했을 때 얼마나 합리적인지 정량적으로 검증할 필요가 있었다. 이번 글에서는 이미지 품질을 평가하는 지표를 살펴보고 SSIM(Struc..

React 프로젝트를 AWS S3에 배포하고 CloudFront를 연결하면 비교적 간단하게 정적 웹 서비스를 구성할 수 있다.본 프로젝트 역시 React 애플리케이션을 빌드해 S3에 저장하고, CloudFront를 통해 사용자에게 정적 파일을 제공하는 구조로 배포했다.하지만 실제 배포 환경을 구성하면서 단순히 "빌드 결과물을 S3에 올리고 CloudFront로 전달하면 끝"은 아니라는 것을 알게 됐다. [1] 새로운 버전을 배포했을 때 캐시를 활용하면서도 어떻게 최신 버전을 전달할 것인가?[2] React Router가 관리하는 경로로 직접 접근하거나 새로고침했을 때 S3가 해당 경로를 찾지 못하는 문제를 어떻게 해결할 것인가? 두 문제는 별개의 문제처럼 보였지만 결국 하나의 기준으로 연결됐다.모든 요청..

웹 페이지에서 이미지는 전체 네트워크 리소스 중 큰 비중을 차지한다. 특히 상품 이미지나 배너처럼 고해상도 원본 이미지를 그대로 전달하면 사용자가 실제로 보는 크기보다 많은 데이터를 다운로드하게 되고 이미지가 화면에 표시되는 시간에도 영향을 줄 수 있다. Next.js는 이러한 문제를 줄이기 위해 next/image의 컴포넌트를 제공한다.처음에는 를 사용하면 이미지를 자동으로 압축해주는 정도로 생각하기 쉽다. 하지만 실제 동작을 살펴보면 이미지 압축 하나로 끝나지 않는다. Next.js는 브라우저가 적절한 이미지를 선택할 수 있도록 여러 이미지 후보를 제공하고 선택된 요청에 맞는 이미지를 생성한다. 생성된 결과는 캐시를 통해 재사용할 수 있으며 이미지의 위치와 중요도에 따라 로딩 시점도 조절할 수 있다..

프로젝트에서 홈 화면의 추천 데이터를 Server Component에서 가져오는 과정에서 추천 API의 응답 지연이 전체 SSR 응답 시간에 영향을 주는 문제가 있었다. https://juncci.tistory.com/28 홈은 계속 보여야 한다: SSR 환경에서 AI 추천 API의 지연과 실패에 대응하기RE-FIT 서비스 홈에는 사용자에게 적합한 전문가를 보여주는 AI 기반 추천 영역이 있습니다. 추천 데이터를 첫 화면부터 제공하기 위해 해당 영역은 클라이언트에서 별도로 요청하는 구조가 아니juncci.tistory.com 추천 데이터는 홈 화면에서 반드시 필요한 핵심 콘텐츠는 아니었기 때문에 추천 API가 느려지거나 일시적으로 장애가 발생했다는 이유로 홈 전체의 응답이 영향을 받는 구조를 줄이고자 했..

이전 글에서는 Web Worker가 무엇인지, 일반적인 비동기 처리와 어떤 차이가 있는지 정리했습니다. [EP.1][Web Work] Web Worker의 개념과 동작 원리프로필 이미지 업로드 기능을 구현하면서 클라이언트에서 이미지를 리사이즈하고 WebP 형식으로 변환하는 작업을 추가했습니다.사용자가 선택한 이미지를 그대로 서버에 업로드하지 않고, 다음juncci.tistory.com Web Worker는 무거운 JavaScript 연산을 메인 스레드와 분리된 워커 스레드에서 처리할 수 있도록 해줍니다. 그러나 Web Worker를 생성했다고 해서 이미지 리사이즈나 포맷 변환이 자동으로 가능해지는 것은 아닙니다. 이미지 크기를 조절하고 다른 포맷으로 변환하려면 이미지를 실제 픽셀 데이터로 디코딩하고, 새..

프로필 이미지 업로드 기능을 구현하면서 클라이언트에서 이미지를 리사이즈하고 WebP 형식으로 변환하는 작업을 추가했습니다.사용자가 선택한 이미지를 그대로 서버에 업로드하지 않고, 다음과 같은 과정을 거치도록 구현했습니다.원본 이미지 선택 → 이미지 디코딩 → 최대 크기에 맞게 리사이즈 → WebP 형식으로 인코딩 → 원본과 용량 비교 → 더 작은 파일을 업로드 이 과정에서 이미지 처리가 메인 스레드를 점유할 가능성을 줄이기 위해 Web Worker와 OffscreenCanvas를 사용했습니다. 구현 내용을 정리하던 중, 어느 순간부터 Web Worker와 Service Worker라는 용어를 혼용해서 사용하고 있다는 사실을 발견했습니다.둘 다 이름에 Worker가 들어가고 브라우저에서 메인 JavaScr..

프론트엔드나 Node.js 프로젝트를 시작하면 거의 반드시 마주치는 도구가 있다. 바로 패키지 매니저(package manager) 다.패키지 매니저 필요한 라이브러리를 설치하고, 의존성 버전을 관리하고, 팀원이나 CI 환경에서도 같은 결과가 나오도록 재현성을 확보하는 역할을 한다. npm 공식 문서도 npm을 “Node JavaScript 플랫폼의 패키지 매니저”라고 설명하며, lockfile은 이후 설치에서도 동일한 의존성 트리를 재생성할 수 있도록 exact tree를 기록한다고 설명한다. 패키지 매니저는 단순히 install 명령을 실행하는 도구가 아니라, 다음 세 가지를 동시에 책임지는 인프라에 가깝다.패키지 검색 및 설치의존성 버전 해석과 잠금(lock)로컬, CI, 배포 환경의 재현성 유지J..