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 사이즈 감소