[ReactJS] React 이론 공부 기초 - 9

성능 측정 키 매트릭

• 웹 퍼포먼스
  • 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정함
  • 성능을 측정하여 웹 앱의 사용성을 개선할 수 있음
  • 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등, 좋은 유저 경험으로 유저의 만족을 얻음
• Time To First Byte
  • 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간
    • 브라우저의 요청이 서버까지 가는 시간 
    • 서버에서 요청을 처리하는 시간
    • 서버에서 브라우저까지 응답이 가는 시간
  • 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나, 네트워크가 딜레이 되는 등의 상황이 발생할 경우 지표가 악화됨
• First Contentful Paint (FCP)
  • 페이지에 진입하고부터, 브라우저가 어떤 DOM content를 만들때까지 걸리는 시간
    
    • 브라우저의 요청이 서버까지 가는 시간 
    • 서버에서 요청을 처리하는 시간
    • 서버에서 브라우저까지 응답이 가는 시간
    • 브라우저에서 HTML, CSS, JS 등을 파싱하는 시간
    • 브라우저에서 페이지를 그리는 시간
  • 페이지 진입 후 FCP까지 평균 3초 이상 걸리면 성능 개선이 필요함
• Time to Interactive
  • 웹 페이지 진입 후, 유저가 클릭, 스크릭, 인풋 등의 행위를 하기까지 걸리는 시간
    • 브라우저의 요청이 서버까지 가는 시간 
    • 서버에서 요청을 처리하는 시간
    • 서버에서 브라우저까지 응답이 가는 시간
    • 브라우저에서 HTML, CSS, JS 등을 파싱하는 시간
    • 브라우저에서 페이지를 그리는 시간
    • JS가 처리되어 DOM에 이벤트를 부착하는 시간
  • 자바스크립트가 로드 되고 나서, 이벤트 핸들러 등이 부착되어 입력을 처리할 수 있기까지의 시간

출처 : 엘리스 트랙 강의 자료

Server Rendering

• React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했음
• 클라이언트는 별도의 처리 없이 웹페이지를 노출했음
• 서버에서 자바스크립트를 이용해 페이지를 미리 빌드하며, 이를 server rendering 이라고 함
• 컴포넌트 생성에 필요한 API 요청, routing, redux store 생성 등을 처리함
• 클라이언트는 빌드된 페이지와 자바스크립트를 받아, 웹앱을 CSR처럼 동작하게 함
  • Universal rendering이라고도 함

SSR의 장점	SSR의 단점
- 검색엔진최적화(Search Engine Optimization)에 유리함	- CSR에 비해 TTFB가 불리함 - 별도의 서버를 유지하는 비용이 듦 - Static rendering보다 CDN 캐싱에 불리함

• SSR의 페이지 로드 방식
  • 유저가 빠르게 페이지의 내용을 볼 수 있도록 HTML을 미리 빌드하여 FCP 등의 키 매트릭을 개선함
  • 서버 자원을 활용하여, 초기 큰 성능이 필요한 페이지 등을 빌드하는데 활용함

출처 : 엘리스 트랙 강의 자료

Client Side Rendering

• Ajax 등의 자바스크립트 프레임워크를 활용하여 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 됨
• 데이터는 XML, JSON 형태로 클라이언트에 전송하며, 이를 CSR(Client Side Rendering)이라고 함

CSR의 장점	CSR의 단점
- 자바스크립트 만으로 완전히 페이지를 만들 수 있음 - 자바스크립트를 최대한도로 활용하여 HTML, CSS를 동적으로 생성함 - 컴포넌트 단위로 코드를 나누고, 다양한 디자인 패턴을 적용하는 등, 클라이언트 개발의 수준을 한 단계 끌어올림 - Full page load 없이 라우팅	- 자바스크립트 코드가 많으면 앱 로딩이 느려짐 - 검색엔진최적화(SEO)가 좋지 않음

출처 : 엘리스 트랙 강의 자료

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript