개발자 J

Web Vitals 소개 Web Vitals은 사용자의 웹사이트 경험을 측정하는 일련의 중요한 지표들입니다. 이 지표들은 웹사이트의 성능, 사용자 경험, 안정성 등을 평가하는 데 중요한 역할을 하며, 웹 개발자와 사이트 운영자들에게 사용자 중심의 성능 지표를 제공할 수 있습니다. 왜 측정할까? 웹사이트를 이용하는 사용자의 경험을 향상하기 위해 어떤 점을 개선해야 하는지 명확한 지표를 통해 알 수 있습니다. Core Web Vitals Web Vitals 지표들 중에서 웹사이트의 핵심 사용자 경험을 평가하는데 필수적인 지표들을 Core Web Vitals라고 합니다. Core Web Vitals의 세 가지 주요 요소 Core Web Vitals는 위의 사진의 세 가지 지표로 구성됩니다. 이 지표들은 사용자..

최근에 Next 공식 문서에서 우연히 보게 된 패키지 import 최적화에 대해 소개해 보겠습니다. 이 Vercel 글은 블로그는 패키지 최적화를 어떻게 진행했는지에 대해 설명하고 있습니다. 이 글을 기반으로 블로그를 작성해 보려고 합니다. How we optimized package imports in Next.js – Vercel How solving barrel files led to faster cold boots and build times. vercel.com 밑의 블로그는 위의 글을 번역해 주신 글입니다!🙇‍♀️ (번역) Next.js에서 패키지 가져오기를 최적화한 방법 원문 : https://vercel.com/blog/how-we-optimized-package-imports-in-nex..

이미지 리사이징 말 그대로 이미지의 크기를 조정하는 과정을 말합니다. 위의 사진은 Lighthouse에서 이미지의 크기가 적절하지 않다고 알려주는 화면입니다. 다시 말해, 렌더링 된 이미지의 사이즈와 실제 이미지의 사이즈가 많이 차이가 나는 경우로 이미지의 크기가 적절하지 않다는 것을 의미합니다. 이와 같이 불필요하게 큰 이미지를 사용하게 되면 리소스를 많이 사용하게 되어 바이트 낭비 및 페이지 로드 시간이 느려져, 웹 성능 저하를 유발할 수 있습니다. 이미지 리사이징의 중요성 이미지 리사이징을 통해 파일 크기를 줄여, 웹 사이트의 총 리소스를 크게 줄일 수 있습니다. 이로 인해 웹 페이지 로딩 속도 향상 및 사용자 경험을 개선할 수 있습니다. 그리고 TTI(Time to interaction) 지표를 ..

MSW (Mock Service Worker) 란? Mock Service Worker는 Service Worker API를 사용하여 실제 네트워크 요청을 가로채는 API Mocking 라이브러리입니다. 웹에서 발생하는 실제 HTTP 요청을 가로채, 사용자가 정의한 응답을 Mocking 합니다. 이 과정은 네트워크 레벨에서 이루어지기 때문에, 별도의 코드 수정 없이 실제 서비스와 유사한 환경을 조성할 수 있습니다. ► Mocking이 개발 과정에서 어떻게 도움이 되는가? 개발 과정에서 Mocking은 여러 면에서 도움이 됩니다. 첫째, 개발 초기 단계에 백엔드 API가 완성되지 않은 경우, 백엔드 API에 의존하지 않고 자체적으로 Mocking을 통해 개발을 진행할 수 있습니다. 이를 통해 개발 시간을 ..

무한 스크롤(Infinite Scroll)이란? 사용자가 특정 페이지 하단에 도달했을 때, 추가적인 데이터를 불러오는 API를 호출하여 콘텐츠가 끊기지 않고 계속 로드되는 방식을 말합니다. 한 번의 API 요청으로 모든 데이터를 불러오는 경우, 데이터 로딩 시간이 길어질 수 있습니다. 이러한 시간을 단축하고 사용자에게 더욱 많은 양의 데이터를 제공하기 위해 무한 스크롤 방식으로 데이터를 제공하고자 합니다. 사용자에게 데이터 리스트를 제공하는 방식은 크게 두 가지로 나누어집니다. X 페이지 네이션 (Pagination) 무한 스크롤 (Infinite Scroll) 장점 페이지 번호를 통해 원하는 정보가 있는 페이지로 이동 가능 → 원하는 정보 찾기 쉬움 콘텐츠가 끊기지 않고 계속 로드되는 방식 → 많은 양..

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. SSR과 CSR은 웹 페이지 렌더링 방식입니다. 그중 CSR(Client-side Rendering)은 서버에서 받은 HTML과 JS 등을 클라이언트 측에서 웹 콘텐츠를 렌더링 하는 방식입니다. ► CSR의 장점 페이지 로드가 완료되면 전체 페이지를 다시 로드하지 않고 데이터만 서버에서 가져오기 때문에 후속 상호 작용이 더 빨라집니다. UI 구성 요소의 렌더링이 클라이언트 측에서 발생하기 때문에 전체 페이지를 다시 로드하지 않고도 부드러운 전환, 애니메이션 및 동적 업데이트가 가능합니다. ► CSR의 단점 서버에서 렌더링 한 페이지를 전단해 주는 SSR과 달리 클라이언트 측에서 웹 페이지를 렌더링 하..