할수있따

안녕하세요? 오늘은 개인 포트폴리오 사이트의 성능 최적화 도전기를 작성해보겠습니다.성능의 지표는 구글 lighthouse를 기준으로 측정했습니다. lighthouse 성능 측정 지표1. 성능웹사이트가 얼마나 빠르고 효율적으로 작동하는지를 평가합니다. 주요 측정 항목은 다음과 같습니다:First Contentful Paint (FCP): 화면에 처음으로 어떤 콘텐츠가 나타나는 시간Largest Contentful Paint (LCP): 주요 콘텐츠(예: 큰 이미지나 텍스트 블록)가 로딩 완료되는 시간Time to Interactive (TTI): 사용자가 페이지와 완전히 상호작용할 수 있게 되는 시간Speed Index: 콘텐츠가 시각적으로 얼마나 빠르게 로딩되는지를 평가Total Blocking Time..

적극적으로 서버 컴포넌트를 활용하자! https://younghun123.tistory.com/3 - 서버컴포넌트는 어떻게 사용해야 할까? 안녕하세요! 저번 포스팅에서는 서버 컴포넌트를 어떻게 활용해야 하는지에 대해서 고민했습니다.서버 컴포넌트는 waterfall 방식으로 동작하기 때문에 사용자와 복잡하게 상호작용하는 UI를 만들기 어렵습니다. 그렇다면, 어떻게 컴포넌트를 디자인해야할까요? 필자는 보통 세가지의 원칙을 가지고 컴포넌트를 디자인합니다.1. 비즈니스와 뷰의 관심사 분리2. 컴포넌트 분리3. 클린 아키텍처에 대한 고민첫번째, 비즈니스와 뷰의 관심사를 분리할 수 있습니다.프론트엔드 애플케이션에서 분리할 수 있는 관심사는 크게 Business와 View입니다. View 계층에서는 오로지 데이터를 ..

서버 컴포넌트는 어떻게 사용해야 할까?https://younghun123.tistory.com/2 - 서버 컴포넌트란? 안녕하세요! 지난 포스트에서는 서버 컴포넌트가 무엇인지 알아봤습니다!서버 컴포넌트는 서버에서 "완성된 HTML"을 보내고 브라우저에서 JS 번들을 다운받지 않습니다.[React Client Component 와 React Server Component]그림에서도 알 수 있듯이 (서버컴포넌트에서)한번 화면에 HTML을 보여주면 JS번들 다운을 받지 않기 때문에 Create, Update, Delete 로직은 수행할 수 있다는 한계가 있습니다. CQRS사용자에게 조금이라도 쾌적한 서비스를 제공하고 싶다면, 서버 컴포넌트의 사용을 고민할텐데요."어떤 컴포넌트"를 서버 컴포넌트로 만들어야 할지..

리액트 서버 컴포넌트(React Server Component)란?서버 컴포넌트는 번들링 전에 클라이언트 앱이나 SSR 서버와 분리된 환경에서 미리 렌더링되는 새로운 유형의 컴포넌트입니다.출처: https://ko.react.dev/reference/rsc/server-components 프론트엔드 개발자가 서버 컴포넌트를 적극적으로 사용해야 하는이유1. 빠릅니다리액트는 현재 프론트엔드 개발자들이 가장 많이 사용하는 라이브러리입니다.함수형 프로그래밍 지원 및  리액트 hook 등의 다양한 기능으로 리액트는 많은 사랑을 받고있습니다.하지만 리액트가 가진 큰 단점은 렌더링 속도 문제였습니다. 리액트 팀은 렌더링 속도 문제를 계속 고민했고, 이를 해결하기 위해 서버 컴포넌트를 출시했습니다. 2. Next JS..