 | 자바스크립트 웹 애플리케이션 JavaScript Web Applications -  알렉스 맥카우 지음, 우정은 옮김/한빛미디어 |
2012.9.15 스윽 읽어 보고 있다. 코드 한줄 한줄의 의미를 모두 이해하고 넘어가진 않았지만, 기존에 봤던 패턴들이라... 그럭저럭. 몇가지 바로 이해가지 않는 부분들은 다시 봐야 할 듯. 1/3 정도 읽었는데, 여기까지는 MVC 패턴에 따라 Model, Controller, View 모듈을 어떻게 만들것인지에 대한 내용. 느낌은 Backbone이 어떻게 만들어 졌는지 설명하는 듯한? 그만큼 비슷한 패턴으로 보임. 느낌이 그렇다는 것이고, 실제로 어떤지는 확인해 봐야.
2012.9.16 스윽... 그냥 훑어서 다 봤다. 1장부터 6장까지는 다시 한번 이해하면서 읽어봐야 할 듯. 7장부터 10장까지는 JavaScript Application을 만드려면 반드시 고민하게 되는 내용들이고 중요한 점들을 잘 나열해 두긴 했지만, 암튼 여전히... 겉핥기식이란 느낌이. 11장은 스파인, 12장은 백본, 13장은 JavaScriptMVC에 대한 설명인데, 사실 백본에만 관심이 있어 12장만 읽음. 참고로, 저자가 만든 프레임워크가 스파인임.
전반적으로 느낌(1장부터 6장까지만, 그 이후는 그다지 특색있게 느껴지지 않으므로)은 요즘 유행하는 JavaScript MVC 구현체들의 공통된 패턴들이어서 한번은 읽고 이해할 필요가 있어 보임. 물론 다른 유형의 구현체들이 있을꺼라 생각되긴 하지만, 이것부터!
2012.11.25 팀 세미나로 다시 읽기 시작
1.MVC와 클래스
- 옛날 이야기 : 주절 주절...
- 구조 추가하기 : JS를 객체 지향 언어로 대접하자. MVC 패턴을 적용해라.
- MVC란 무엇인가? : 데이터(모델), 표현계층(뷰), 사용자 상호작용 계층(컨트롤러)이라는 세 부분으로 분리하는 디자인 패턴. MVC 컴포넌트간 의존성이 없도록 개발
- 모델 : 데이터, 뷰, 컨트롤러와 관련된 정보는 없어야 한다. 모델은 컨트롤러가 생성한다. 명칭공간, 객체지향을 활용해라. 모델에 대해서는 3장에서 자세히 다룸
- 뷰 : HTML, CSS, JS 템플릿으로 뷰를 구성. 템플릿에는 로직이 포함되면 안된다. 로직은 헬퍼에 넣어라. 뷰는 5장
- 컨트롤러 : 컨트롤러는 뷰와 모델의 접착제. 이벤트를 처리하고 이 과정에서 모델 처리. 사용자의 상호작용은 컨트롤러의 이벤트로 처리. 컨트롤러는 4장
- 모듈화와 클래스 생성 : 자바스크립트의 클래스, 이벤트 같은 기본 개념 알아보자. 정적 클래스(?)는 객체 리터럴 사용. JS에서 클래스 개념을 가져오는데 거부감 있는 사람들 있음. 실용적 입장에서 도구로 사용하자. 클래스를 위해서는 생성자 함수와 new 키워드 사용. 생성자 함수는 대문자로 시작.
new안쓰면this가window가 되면서 전역 변수 생성된다. p35의 예제 : init 함수를 생성자 함수처럼 사용하기. - 클래스에 함수 추가하기 : 정적 함수는 생성자 함수의 프로퍼티로 설정. 인스턴스 함수는 prototype의 프로퍼티로 설정.
- 클래스 라이브러리에 메소드 추가하기 :
extend는 클래스에 static 프로퍼티 추가,include는 클래스의 인스턴스 프로퍼티 추가(prototype에 추가). 프로퍼티에extended,included함수 있으면 콜백(클래스, 인스턴스가 인자임) 으로 동작 - 클래스 상속과 프로토타입 사용 :
prototype은 함수의 속성이며,new로 객체를 생성하면 생성된 객체와 생성자 함수의prototype에 연결 고리가 생긴다. 어떤 객체든prototype이 될 수 있으며 이를 이용해 상속 구조를 만들 수 있다. - 클래스 라이브러리에 상속 기능 추가하기 : JavaScript Patterns의 6.7 클래스 방식의 상속패턴 #5 - 임시 생성자 패턴을 사용하여 상속 기능 추가
- 함수 호출 : 함수는 객체이지만 호출 할 수 있다. 호출 방식에 따라 함수 내의 this(함수의 컨텍스트)가 달라진다.
apply,call을 이용하여 context를 지정할 수 있다.apply는 인자를 배열로,call은 인자를 직접 넘긴다. jQuery에서는this를 변경한다.$.proxy함수로this를 변경할 수 있다. 함수를 위임할 때도apply,call을 사용할 수 있다. - 클래스 라이브러리에서 범위 조절하기 : 기존 라이브러리에
proxy추가하기. shim 프로젝트는 구버전 JS 엔진이 최신 버전 명세를 지원하도록 추가 기능을 제공하는 라이브러리이다. es5, html5 등 여러가지가 있음. 이런걸 통칭해서 shim이라고 함. - 비공개 함수 추가하기 : 보통은 명명 규칙(이름을
_로 시작) 사용. 즉시 실행함수로 scope를 만들어서 해결해라. - 클래스 라이브러리 : HJS는 jQuery 플러그인, 클래스 생성, 상속 등 제공. spine에서도 클래스 구현 제공. John Resig의 Simple JavaScript Inheritance도 참조
8. 실시간 웹
- 실시간의 역사 : HTTP는 응답/요청 모델, 실시간 처리를 위한 방법 : polling, commet - 비표준이라 브라우저 호환성 문제 있음. (호환성 문제가 뭐지?) 플래시 - 방화벽 문제 있음.
- 웹소켓
스펙 버전들 - IETF Network Working Group에서 시작, 제목은 draft-hixie-thewebsocketprotocol이고 00 ~ 76까지 있음. 이후 IETF HyBi Working Group에서 진행, 제목은 draft-ietf-hybi-thewebsocketprotocol이고 00 ~ 17까지 나옴. 이후 RFC 6455로 제안됨. hixie-76과 hybi-00, RFC 6455와 hybi-17는 동일한 문서인 것으로 보임.(???확실하지...) 브라우저에서 구현한 버전은 hixie-75 : Chrome 4, Safari 5.0.0, hixie-76/hybi-00 : Firefox 4, Chrome 6, Safari 5.0.1, Opera 11, hybi-07 : Firefox 6, hybi-08 : Firefox 7, Chrome 14, RFC 6455 : IE 10, Firefox 11, Chrome 16, Safari 6, Opera 12.10, 브라우저 지원 사항은 위키피디아 참조.
동작 방식 - 업그레이드, 핸드쉐이크??? 80 port 사용하는 것인가? - 실시간 아키텍처 : 옵저버 패턴을 이용해 모델이 변경되면 View에 반영한다.
- 인지 속도 : 실시간 웹에서만의 문제는 아니지만 반응성은 중요하다. 메시지를 전송하고 응답이 올때까지 기다리지 말고, 할 수 있는 UI 변경을 해라.
