jQuery 애플리케이션 아키텍처 도구 (Addy Osmani)
Source
Evernote/Technote scraps/Tools For jQuery Application Architecture (Extended Slides) from wdx.md
Summary
이 문서는 Addy Osmani 가 Web Directions London 에서 발표한 ‘jQuery 애플리케이션 아키텍처를 위한 도구’ 강연의 확장판 슬라이드 소개 및 관련 자료 링크 모음입니다. 주요 다루는 주제는 클라이언트 사이드 MVC/MVVM 패턴, JavaScriptMVC/Backbone.js/Spine.js/Sammy.js 등 프레임워크, 디자인 패턴, 의존성 관리, 템플릿, 테스트, 빌드 프로세스 등입니다. 또한 대규모 프로젝트에서 jQuery 대신 Dojo 같은 툴킷을 고려해야 하는 시점에 대한 논의와, Pub/Sub 패턴의 플러그인화 여부 및 마이크로 프레임워크에 대한 질문과 답변을 포함합니다.
Key Points
jQuery 기반 대규모 애플리케이션 개발을 위한 아키텍처 패턴(MVC/MVVM) 및 도구 소개
Backbone.js, Spine.js, Sammy.js, JavaScriptMVC 등 주요 프레임워크 언급
의존성 관리, 템플릿, 크로스 브라우저 스토리지, 테스트, 빌드 최적화 등 개발 워크플로우 도구 포함
대규모 프로젝트 시 jQuery 의 한계와 Dojo 등 종합 툴킷 전환 고려 사항 제시
Pub/Sub 패턴의 라이브러리 내장화 필요성 및 마이크로 프레임워크 장단점에 대한 논의
자바스크립트 아키텍처 v0.4
대규모 JavaScript 애플리케이션 설계 및 엔지니어 성장
Yeoman: 도구를 활용한 더 나은 웹 개발
AngularJS 와 RequireJS 를 활용한 대규모 웹 어플리케이션 개발
JavaScript 의 현대적 활용 분야 (2019)
실용적인 RESTful API 설계 모범 사례 (Vinay Sahni)
크롬 컨퍼런스 핵심 요약 (Web Components, DevTools, Chrome Apps)
Angular.js 의 핵심 개념 및 장점 요약
실시간 투표 애플리케이션 구축 (Node.js, Express, AngularJS, MongoDB)
웹 개발자를 위한 디버깅 매뉴얼! 『자바스크립트 테스트와 디버깅』
HTML5 기반 프리젠테이션 도구 소개
Meteor.js 시작하기 및 아키텍처 개요
Velocity 2014: PageSpeed 인사이트 및 QuickBooks Online 클라이언트 사이드 아키텍처
크롬 개발자 도구 101
페이스북 스파르탄 프로젝트의 비밀병기 Bolt.JS
WebAssembly (WASM) 개요 및 설계 목표
Play Framework 개요
Google Chrome의 고성능 네트워킹 아키텍처
야구9단 아키텍처 (NHN, 2011)
Prototype용 선택 상자 플러그인
GitHub의 jQuery 제거 사례
웹 컴포넌트(1): Keep calm and usetheplatform
5 jQuery Notification Plugins
풀스택 JavaScript 프레임워크 학습 조언 (Quora)
Tumblr 아키텍처 분석 (2013)
2013년 자바스크립트 프레임워크 인기 동향 (Caliper Blog)
AngularJS 기초편 (번역서) 리뷰
React vs AngularJS 비교 (Quora)
실시간 웹 협업도구 만들기 (홍영택)
PayPal의 Kraken.js 프레임워크 리뷰 및 평가
React vs Vue 비교 (2019 Edition, React Hooks 기준)
Angular 2 대신 Vue.js 선택 및 React 배제 이유
곽철용 짤 생성기 개발 후기 (Vue + HTML Canvas)
Three.js 시작 가이드 (Aerotwist)
PayPal 의 Node.js 전환 사례 요약
Thinking in React (리액트스럽게 생각하기)
리액트(React) 및 리액트 네이티브 개요 (2015)
ECMAScript 6 Generator 개요 및 Node.js 활용
Didact: 리액트 원리 학습을 위한 DIY 가이드 시리즈 소개
proxyquire: Node.js require 의존성 오버라이드 라이브러리
harp.js: 전처리 기능을 갖춘 정적 웹서버
Node.js 세션 관리 (Session Management)
Node.js 유지 사용의 이유 (Mimul’s Developer World)
Quora 기술 스택 및 아키텍처 분석
Fluent 2016: Node.js 기반 하이퍼미디어 마이크로서비스 구현 튜토리얼
Progressive React
GPU 동작 원리 및 아키텍처 개요
Java 기반 웹 채팅 서버의 동시성 문제 및 아키텍처 검토
math.js 원격 코드 실행(RCE) 취약점 발견 및 악용 기법
Node.js 네이티브 애드온의 인자 검증 개선 (NanCheck)
Thinking in React: React 컴포넌트 설계 방법론
리팩토링 개요 및 기법 요약
넷플릭스 성능 케이스스터디 (NHN FE.JS Wiki #184)
Key-based cache expiry: A developer’s primer
한국 웹20주년 국제 콘퍼런스 Node.js 발표 회고
Node.js on Android (2013)
Nock: Node.js HTTP 모킹 라이브러리
Node.js 란? (IBM developerWorks)
React Navigation V1 출시 준비 및 프로젝트 관리 방향성 (2017)
Go vs Node.js vs C++: 서버 사이드 언어 선택의 기준
Node.js 의 핵심 관점 (Core Perspective to NodeJS)
Locust 데모 및 아키텍처 논의 (SRPOL)
WebSocket과 Node.js를 이용한 동시 영상 동기화 데모
Cycle.js
O Docs를 사용한 API 문서화
재미로 만든 버블채팅 (KTH H3 컨퍼런스)
Oj (Optimized JSON)
카카오 블라인드 공채 플랫폼 취약점 분석 (2017)
io.js 프로젝트의 탄생 배경과 Node.js 포크 과정
카카오 컨테이너 플랫폼 및 MPC 아키텍처 개요
카카오페이지 웹 React 포팅 후기
오프라인 웹 애플리케이션 만들기 (Mozilla 웹 기술 블로그)
HTTP Archive: jQuery 호스팅 및 버전 분산 분석 (2013)
HTML5 Canvas 실시간 드로잉 성능 최적화 가이드
JSWhiz: JavaScript 메모리 누수 정적 분석 도구
FlashTier: 고체 상태 캐시(SSC) 아키텍처
JavaScript 기반 분산 컴퓨팅 고려사항
웹 브라우저 동작 원리 (2) - 레이아웃 리플로우 최적화
웹 증강을 위한 엔드유저 언어: 생산자와 소비자 모두를 위한 접근
jQuery 이벤트 핸들링: .on() 사용 권장
REST 아키텍처 스타일과 캐싱
EasyMock: RESTful API Mock 서버
2017 년 JavaScript 테스트 개요 (Powtoon Engineering)
ML 기반 번들링: JavaScript 툴링의 미래
List.js: HTML 리스트의 검색, 정렬, 필터링을 위한 경량 JavaScript 라이브러리
Scala + Play Framework 2 Server 성능 향상 시키기
Python 애플리케이션 단순화를 위한 리팩토링 가이드
Web Workers: JavaScript 멀티스레딩
Java 채팅 서버 구현 시 쓰레드 동기화 및 성능 이슈 토론 (2002)
게임 개발팀 A의 정기 회의 매뉴얼
Design Patterns in JavaScript (tcorral)
The “When Can I Use” Web Widget
Puppeteer를 활용한 로컬 개발 서버 대체 방안 (web.dev 사례)
Create React Native App (CRNA) 소개
브라우저 동작의 이해 - 리플로우와 리페인트 및 그 최적화
임베디드 웹 서버: 제한된 리소스에서의 효율적 포맷팅
번아웃 예방을 위한 팁 (Addy Osmani)
웹 해킹 및 보안 테스트 도구 리소스
Web Framework Benchmark Inspired
High Performance Browser Networking (O’Reilly)
Google, Web Components 를 웹 개발의 미래로 제시 (2013)
Web Fundamentals 및 Web Starter Kit 리소스
CSS 최신 동향 파악을 위한 Adobe Web Platform 블로그
Assemble: Handlebars 기반 정적 사이트 생성 도구
Node.js Cluster 모듈 개요 및 활용
31 CSS Web Design Galleries You’ll Love
The Web Ahead: Jen Simmons 인터뷰 요약
운영 분투기
Chrome DevTools 모바일 스크린캐스트 및 에뮬레이션
Java 웹 개발에서 .do 확장자의 기원과 관행
Countly: 실시간 모바일 앱 분석 도구
Requirify: 브라우저 콘솔에서 동적 라이브러리 로딩
Fluid를 사용하여 웹사이트를 맥 메뉴 바 앱으로 변환하기
VueJS 프로젝트에 Prettier + ES6 Lint 적용
Play Framework 2.2 기반 Facebook Canvas 게임 개발 일지
HTML5 Developer Conference 후기 1
2014-01-15 기술 뉴스 모음 (Outsider’s Dev Story)
대학생을 위한 웹 개발 공부 체크리스트
Datasheet.net: 데이터시트 스니펫 도구
Preme: Windows 창 관리 개선 도구
requestAnimationFrame 사용법
CoffeeScript 환경 설정 및 개요
Roll It: 브라우저 기반 크로스 디바이스 게임 구현 사례
JavaScript 성능 향상을 위한 Thread-level Speculation (TLS)
웹의 병목 현상: JavaScript
Hiding Native HTML5 Video Controls in Full-Screen Mode
HTML에서 Javascript와 CSS 기반으로 애니메이션을 구현하는 방법