B tv 홈 5분 만에 이해하기

 

  • 홈화면은 어떻게 구성될까?

  • 개선 효과

524

HTML, CSS, JS

GNB 정보

서버 API 정보
IF-EUXP-030 GNB 1/2 뎁스 구조
IF-ME-036 월정액 가입 정보

GNB

524

Block 목록

서버 API 정보
IF-EUXP-003 해당 메뉴 블록 목록 정보
IF-EUXP-024, 009, 007 최근 시청, 추천, 이벤트 등 블록 상세 정보

Block 상세 x 개수

Block

524

시놉시스 정보

서버 API 정보
IF-EUXP-010 시놉시스 정보
IF-SCS-PAYPREWVIEW-001 컨텐츠 구매 정보

컨텐츠 구매 정보

Preview

524

GNB

Preview

Block

HTML, CSS, JS

GNB 정보

Block 목록

Block 상세 x 개수

시놉시스 정보

컨텐츠 구매 정보

524

Node.js Server

GNB

HTML, CCS, JS

GNB 정보

530

Node.js Server

Block

Block 정보

Block 목록

Block 상세 x 개수

530

Node.js Server

Preview

530

Preview 정보

시놉시스 정보

컨텐츠 구매 정보

시놉시스 정보

재생 권한, 구매여부 정보

Block 목록

Block 상세 x 개수

GNB 정보

HTML, CSS, JS

Preview 정보

Block 정보

HTML, CSS, JS

  • 성능 개선

- Network 비용 감소 (요청 횟수, 시간)

- 화면 렌더링 시간 단축 (CPU,                                            )

Network 비용, 성능 최적화

x6

x3

524

530

개선 효과

  • 관심사 분리

  • Client App 사이즈 감소

개선 효과

- UI 구성

Node.js Server

- API 가공

- 정보 가공

BackEnd Stack 확장

  • 성능 개선

- Network 비용 감소 (요청 횟수, 시간)

- 화면 렌더링 시간 단축 (CPU,                                            )

  • 관심사 분리

Network 비용, 성능 최적화

  • Client App 사이즈 감소

개선 효과

Module v524 v530
blockUtils.js 32.99KB 16.9KB
previewUtils.js 11.4KB 0KB

- UI 구성

Node.js Server

- 정보 가공

- 정보 가공

- BackEnd Stack 확장

  • 성능 개선

- Network 비용 감소 (요청 횟수, 시간)

- 화면 렌더링 시간 단축 (CPU,                                            )

  • 관심사 분리

Network 비용, 성능 최적화

  • Client App 사이즈 감소
Made with Slides.com