project/withMe7 Font 최적화로 웹 페이지 성능 향상하기 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 이번 글에서는 Font 최적화를 간단한 방법으로 적용하고, 그 결과로 웹 성능을 향상시키는 방법을 공유해보고자 합니다. 많은 관심과 피드백 부탁드립니다. 🙏 서론웹 성능을 가장 빠르고 쉽게 향상시킬 수 있는 방법은 정적 리소스를 빠르게 로드하는 것입니다.이미지나 JS, CSS 파일 등의 로딩 속도가 빨라질수록 사용자에게 더 빠르게 콘텐츠를 제공할 수 있기 때문입니다. 이전에는 이미지는 리사이즈, webp 확장자, CDN을 통해 향상했고, JS, CSS도 CDN을 통해 빠르게 로드하는 방법을 알아보았습니다. 이번에는 폰트 최적화 방법에 대해 알아보겠습니다. 폰트도 이미지 못지않게 파일.. 2025. 3. 11. 무한 스크롤 및 렌더링 최적화 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 이번 글에서는 무한 스크롤에서 대량의 데이터를 렌더링할 때 발생하는 성능 문제를 React Profiler를 통해 분석하고, 이를 개선한 경험을 공유하고자 합니다. 많은 관심과 피드백 부탁드립니다. 🙏 서론 Facebook, Instagram, Twitter 등의 피드에서 새로운 게시물이 무한 스크롤 방식으로 계속 로드되는 경험을 한 번쯤 해보셨을 겁니다. withMe는 본인의 워크스페이스를 무한 스크롤 형식으로 제공하여, 다양한 디바이스에서도 반응형으로 원활하게 볼 수 있도록 구현했습니다. 만약 10만 개 이상의 데이터가 있을 경우, 어떤 일이 발생할까요?페이징 처리를 한다면 페.. 2025. 3. 3. SSG와 ISR을 활용한 캐싱 및 Redis를 이용한 동기화 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 대규모 트래픽을 처리하거나 성능 개선에 도움이 될 수 있는 주제를 공유하려고 합니다. 많은 관심과 피드백 부탁드립니다. 🙏 서론 성능 향상 방법 중 하나인 캐싱을 Next.js는 다양한 방식으로 지원합니다. 예를 들어, 이미지 캐싱, API Routes 캐싱, 그리고 HTML 캐싱이 있습니다. 이번에는 HTML 캐싱 방법에 대해 공유하고자 합니다. 랜딩 페이지나 소개 페이지와 같은 경우 매번 서버에서 렌더링하여 클라이언트에 응답할 필요가 있을까요? 자주 변경되지 않는 뉴스나 블로그 콘텐츠도 매번 렌더링하여 클라이언트에 응답할 필요가 있을까요 바뀌지 않는 것은 한번 만든 정적 페이.. 2025. 3. 2. CSS 애니메이션 성능 개선 방법 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. CSS 애니메이션 버벅이는 현상을 개선하는 방법에 대해 공유하고자 합니다.많은 관심과 피드백 부탁드립니다. 🙏 서론 withMe 페이지를 개발하면서 검색 페이지를 모달 창으로 구현하였고, 모달 창에 애니메이션을 추가하였습니다. 초기에는 모달창 부분 애니메이션은 CSS 속성 중 height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어서 찾아보니 height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 이 글에서는 reflow와 repaint를 줄일 수 있는 방안에 대해 작성하고자 합니다. 브라우저 렌더링 과정 먼저, .. 2025. 2. 28. 이미지 스프라이트로 로딩 시간 단축하기 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 이번에는 이미지 스프라이트로 이미지 최적화 했던 경험을 공유하고자 합니다. 많은 관심과 피드백 부탁드립니다. 🙏 서론 웹 페이지 개발을 하다 보면 로고나 아이콘, 버튼 등에서 이미지 파일을 활용하셨을 겁니다. 작은 이미지를 여러개 보내면 아무래도 네트워크 요청이 많아져 로딩 속도가 느려질 수 있겠죠? 이러한 문제는 이미지 스프라이트 기법으로 해결할 수 있습니다. 이미지 스프라이트란 여러 개의 이미지를 하나의 큰 이미지로 합친 후, CSS background-position 속성을 이용하여 원하는 부분만을 화면에 표시하는 기법입니다. 즉 이미지 파일을 여러 개 호출하지 않고 하나의 이미.. 2025. 2. 27. NEXT/IMAGE를 활용한 웹 성능 최적화 안녕하세요! withMe 서비스의 프론트엔드는 NEXT.JS 프레임워크를 사용하여 웹 페이지를 개발하고 있습니다. 이번에는 Next/Image를 활용한 이미지 관련 웹 성능 최적화 경험을 공유하고자 합니다. CLS, LazyLoading, 이미지 프로세싱 순으로 다룰 예정입니다. 많은 관심과 피드백 부탁드립니다. 🙏 서론 CLS(Cumulative Layout Shift)란? 사용자가 예상하지 못한 레이아웃 이동이 발생한 정도를 측정한 값입니다. 위 예시를 보게 되면 사용자가 버튼을 클릭하려고 한다고 가정해 봅시다. 클릭하려는 순간 이미지가 추가로 렌더링이 이루어지고 기존 클릭버튼 자리를 이미지가 대체하고 있습니다. 결과적으로 사용자는 버튼이 아닌 이미지를 클릭하고 있네요 위 예시는 단순히 버.. 2025. 2. 27. 이전 1 2 다음
