리액트 (23) 썸네일형 리스트형 프론트엔드 성능 최적화 가이드 스터디 4장 프론트엔드 성능 최적화 가이드의 4장을 스터디한 내용입니다 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 이전 시리즈 2022.11.15 - [웹성능최적화] - 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 itchallenger.tistory.com 2022.11.15 - [웹성능.. 프론트엔드 성능 최적화 가이드 3장 스터디 해당 도서의 3장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 홈페이지 최적화 이전 시리즈 보기 2022.11.15 - [분류 전체보기] - 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드 1장 스터디 해당 도서의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 itchallenger.tistory.com 2022.11.. 프론트엔드 성능 최적화 가이드 2장 스터디 프론트엔드 성능 최적화 가이드 2장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 올림픽 통계 서비스 최적화 이전 시리즈 보기 2022.11.15 - [분류 전체보기] - 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드 1장 스터디 해당 도서의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 itchallenger.tis.. 프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 성능 최적화 개요 성능 최적화가 중요한 이유 구글 : 성능이 곧 매출 성능이 저하되면 사용자가 떠나고 매출이 감소한다 즉, 성능을 최적화하면 더 나은 UX, 높은 가입율과 전환율, 낮은 이탈율을 확보하여 더 많은 수익을 창출할 수 있음 성능 최적화는 어떻게 이루어질까 웹 성능 결정 요소는 로딩 성능과 렌더링 성능으로 나눌 수 있음 로딩 성능 웹 페이지와 웹 페이지 표시에 필요한 기타.. 리액트 테스트 : Context API 테스트와 커스텀 렌더 함수 사용하기 TLDR : UI 사용자가 관심 없는 건 구현 상세입니다. 컨텍스트를 사용하는 컴포넌트를 테스트하려면 wrapper가 필요합니다. (ThemeProvider, Router, Authentication) 우리가 UI를 테스트 하는 이유는, bad ux(사용자 관점 버그)를 막기 위함입니다. 따라서 테스트 코드는 UI적인 관점만 드러나면 좋습니다. 코드가 아닌 사용자의 행동으로 UI가 변해야 하는 경우 act 함수를 통해 명시한 것도 비슷한 맥락입니다. 따라서, render 관련한 함수도, 유틸로 분리합니다. 테마를 테스트 하는 코드 얼핏 보면 렌더가 뭔가 이상합니다. 이는 컨텍스트를 테스트의 관심사에서 제외해 버렸기 때문입니다. 대신 테스트 자체에 좀 더 집중할 수 있습니다. (테마의 변경) https:.. 리액트 테스트 : implementation details을 피하기 TLDR 구현 세부사항과 관련없는 테스트 사용자가 보는것처럼 테스트 마크업과 관련없는 유즈케이스 테스트 스크린 유틸리티 인터랙션 > 유저이벤트 눈에 보이는 데이터 중 핵심에 초점 이전 포스트에서 사용자가 사용하는 방법 (렌더링 결과와 프롭) => (인터랙션) => (렌더링 결과와 프롭) 측면에서 테스트해야 함을 이해했습니다. UI 측면의 테스트는 사용자가 보고, 듣고, 느끼는 것에 관한 것입니다. implementation details "구현 세부사항"은 추상화가 특정 결과를 달성하는 방법(how)을 나타내는 용어입니다. 코드의 표현력 덕분에 완전히 다른 구현 세부 사항(how)을 사용하여 동일한 결과를 얻을 수 있습니다. const multiply = (a, b) => a * b // 는 아래와 같습.. 리액트 성능 최적화 : Virtual DOM 1. Virtual DOM은 무엇인가요? (공식 문서) Virtual DOM (VDOM)은 UI의 "이상" 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.. 실제 DOM과 Virtual DOM을 동기화하는 과정을 재조정이라고 합니다. Virtual DOM은 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다. Data 조작을 통해 UI를 업데이트하여 돔 조작 코드를 제거하여 생산성을 향상시킵니다. 2. 리액트 컴포넌트의 생명 주기 Re.. 리액트 성능 최적화 : React.memo TLDR : React.memo는 불필요한 리렌더링을 막는다. 메모 컴포넌트에 Primitive Value만 props로 넘기도록 설계하자. 더 중요한 것은 리렌더링보다 느린 리렌더링을 막는 것이다. 느린 리렌더링은 useMemo를 통해 회적화한다. React 앱의 라이프사이클은 다음과 같다. → render → reconciliation → commit ↖ ↙ state change render phase : React.createElement로 리액트 엘리먼트를 생성 recolcilation phase : 이전 엘리먼트와 새로운 엘리먼트를 비교함 commit phase : 변경된 부분만 dom에 반영 리액트는 매우 빠르지만, 때때로 업데이트에 대한 힌트를 제공해야 한다. 리액트 컴포넌트는 다음 이유 .. 이전 1 2 3 다음
