Velocity 2014: PageSpeed 인사이트 및 QuickBooks Online 클라이언트 사이드 아키텍처

Source

• Evernote/ancom21c's notebook/Velocity 2014 - 3rd day.md

Summary

본 문서는 Velocity 2014 세션의 핵심 내용을 요약한다. 먼저 PageSpeed 개발 경험을 바탕으로 이미지 압축, 리얼 유저 모니터링(RUM), 자동화 도구 활용의 중요성을 강조한다. 이어 QuickBooks Online(QBO) 사례를 통해 JSP 기반의 구형 구조에서 클라이언트 렌더링 및 데이터 전용 전송(Data-Only Transport)으로 전환한 아키텍처 진화를 설명한다. 주요 기술 스택(require.js, Angular 등)과 UI-First 서비스 설계(Adapter 패턴), 로컬 프록시를 활용한 가속화된 개발 워크플로우, 그리고 플러그인 기반의 확장성 전략을 다룬다.

Key Points

• PageSpeed 인사이트: 이미지 압축 최적화, RUM 도입, 반복 작업 자동화 도구 활용 권장
• QBO 아키텍처 전환: JSP/서버 렌더링에서 클라이언트 렌더링 및 API 기반 데이터 전송으로 마이그레이션
• 클라이언트 사이드 프레임워크: require.js, SASS/LESS, Angular(양방향 바인딩)를 통한 모델 주도 개발
• UI-First 서비스 설계: UI 표시 요구사항을 고려한 서비스 구성 및 Adapter 패턴 적용
• 가속화된 개발 워크플로우: 로컬 Node.js 프록시를 통해 QA 서버와 연동하여 개발 효율성 증대
• 플러그인 프레임워크: 정책 기반 뷰 제어 및 서드파티 플러그인 지원을 통한 혁신 및 모듈화

Related

• 카카오페이지 웹 React 포팅 후기

• 웹 개발 레시피 (책 소개)

• Sitespeed.io를 사용한 웹사이트 성능 테스트

• 반응형 웹 디자인의 현황 (2013)

• 웹 컴포넌트(1): Keep calm and usetheplatform

• 웹 개발 프레임워크의 진화와 핵심 개념 (MVC, RoR)

• 사용자 인터페이스에서 초보자에서 전문가로의 전환 지원

• O 2013 핵심 요약 및 분석

• 자바스크립트 아키텍처 v0.4

• Tumblr 아키텍처 분석 (2013)

• 웹 성능 크래시 코스 (Ilya Grigorik)

• jQuery 애플리케이션 아키텍처 도구 (Addy Osmani)

• 임베디드 웹 서버: 제한된 리소스에서의 효율적 포맷팅

• Quora 기술 스택 및 아키텍처 분석

• Google+ Hangouts 기술 아키텍처 및 전망

• Google Chrome의 고성능 네트워킹 아키텍처

• 야구9단 아키텍처 (NHN, 2011)

• 페이스북 스파르탄 프로젝트의 비밀병기 Bolt.JS

• imgix 성능 개선 및 문제 원인 분석 (2017)

• WebAssembly (WASM) 개요 및 설계 목표

• Meteor.js 시작하기 및 아키텍처 개요

• HTML5 Canvas 실시간 드로잉 성능 최적화 가이드

• Play Framework 개요

• AngularJS 와 RequireJS 를 활용한 대규모 웹 어플리케이션 개발

• REST 아키텍처 스타일과 캐싱

• 브라우저 동작의 이해 - 리플로우와 리페인트 및 그 최적화

• Android ListView 커스터마이징 및 성능 최적화

• React vs AngularJS 비교 (Quora)

• 실시간 웹 협업도구 만들기 (홍영택)

• 실시간 투표 애플리케이션 구축 (Node.js, Express, AngularJS, MongoDB)

• High Performance Browser Networking (O’Reilly)

• AngularJS 기초편 (번역서) 리뷰

• Immutable Caching 을 통한 웹 성능 최적화

• Scala + Play Framework 2 Server 성능 향상 시키기

• 2011년 3분기 웹 성능 최적화 핵심 링크 및 동향

• 넷플릭스 성능 케이스스터디 (NHN FE.JS Wiki #184)

• 웹 브라우저 동작 원리 (2) - 레이아웃 리플로우 최적화

• Resource Timing API 를 통한 네트워크 성능 측정

• 2020 년 웹 성능에 영향을 줄 6 가지 기술 (Simon Hearne)

• React vs Vue 비교 (2019 Edition, React Hooks 기준)

• 커리어와 최적화

• Polaris: MIT 의 웹 페이지 로딩 속도 개선 기술

• DevTools Continuous Painting Mode를 활용한 페인팅 성능 프로파일링

• s 목표)

• 카카오 컨테이너 플랫폼 및 MPC 아키텍처 개요

• GPU 동작 원리 및 아키텍처 개요

• Angular.js 의 핵심 개념 및 장점 요약

• PayPal 의 Node.js 전환 사례 요약

• Progressive React

• 2013년 자바스크립트 프레임워크 인기 동향 (Caliper Blog)

• harp.js: 전처리 기능을 갖춘 정적 웹서버

• Locust 데모 및 아키텍처 논의 (SRPOL)

• FlashTier: 고체 상태 캐시(SSC) 아키텍처

• PayPal의 Kraken.js 프레임워크 리뷰 및 평가

• Thinking in React (리액트스럽게 생각하기)

• GitHub의 jQuery 제거 사례

• Thinking in React: React 컴포넌트 설계 방법론

• 풀스택 JavaScript 프레임워크 학습 조언 (Quora)

• Didact: 리액트 원리 학습을 위한 DIY 가이드 시리즈 소개

• 리액트(React) 및 리액트 네이티브 개요 (2015)

• 곽철용 짤 생성기 개발 후기 (Vue + HTML Canvas)

• Java 기반 웹 채팅 서버의 동시성 문제 및 아키텍처 검토

• Angular 2 대신 Vue.js 선택 및 React 배제 이유

• Node.js 세션 관리 (Session Management)

• 리팩토링 개요 및 기법 요약

• ECMAScript 6 Generator 개요 및 Node.js 활용

• 고처리량 및 저메모리 패턴 매칭 아키텍처

• proxyquire: Node.js require 의존성 오버라이드 라이브러리

• Web Framework Benchmark Inspired

• 재미로 만든 버블채팅 (KTH H3 컨퍼런스)

• Go vs Node.js vs C++: 서버 사이드 언어 선택의 기준

• React Navigation V1 출시 준비 및 프로젝트 관리 방향성 (2017)

• 타다(Tada) 시스템 아키텍처 개요

• Synchronized Cross-device Mobile Testing

• Key-based cache expiry: A developer’s primer

• Fluent 2016: Node.js 기반 하이퍼미디어 마이크로서비스 구현 튜토리얼

• requestAnimationFrame 사용법

• 3: TCP 대신 UDP(QUIC)를 사용하여 네트워크 성능 및 신뢰성 향상

• 웹 증강을 위한 엔드유저 언어: 생산자와 소비자 모두를 위한 접근

• Nock: Node.js HTTP 모킹 라이브러리

• BitTorrent, 분산형 채팅 클라이언트 ‘BitTorrent Chat’ 공개

• Yeoman: 도구를 활용한 더 나은 웹 개발

• Node.js 란? (IBM developerWorks)

• Node.js on Android (2013)

• 5 jQuery Notification Plugins

• math.js 원격 코드 실행(RCE) 취약점 발견 및 악용 기법