AI Convergence

10월 마지막날 유난히 차가운 공기를 마시며 사당역에서 지하철을 타고 구로디지털단지에서 내렸다. 익숙한 풍경이 한눈에 들어왔고 갈곳의 골목을 헤아려 보지도 않고 찾아갔다. 오늘은 처음으로 CSS강좌를 듣는날이다. CSS 를 강좌로 들어보질 않았고 어떤 내용일지 하나하나 따져보고 싶기 때문에 프론트 앤드 개발을 위해 수강하게 되었다. CSS는 디자인 영역이기도 하지만 개발자 영역에 들어와 함께 고려해야할 사항이다. 총 4일간의 일정으로 CSS 배우게 된다. 실습을 통해 보고 느껴보자. CSS는 사랑. Love is Touch~~~ 

Web Components의 세상

늦어도 5년 후에는 웹 컴포넌트로 통일 된다. 컴포넌트의 구성요소는 HTML, CSS, DOM, JavaScript 이고 이들은 분리해서 생각할 수 없고 개발자는 각 요소를 확실히 알고 가야 한다. 최근 인기있는 프레임워크인 Angular, React, Polymer등의 기본은 웹 컴포넌트이다. CSS는 HTML, SVG 콘텐츠의 시각적 표현을 담당한다. 

CSS Specification

CSS 스펙 진행사항

  - Level1 : 1996.12.17

  - Level2 : 2011.06.07 종료

  - Level3, 4 : 진행중

CSS 스펙 한글버전

W3C는 표준이 아니라 권고(Recommendation)을 사용

  - 표준은 모든 브라우저(5대 브라우저)가 사용해야 표준이 된다.

  - 표준 진행 상태 단계

    WD: 초안

    LC, LCWD: 최종 초안

    CR: 권고 후보

    PR: 권고안 

    REC: 최소 2개 브라우저에서 지원

CSS 룰셋

Selector와 Property 에 값을 설정한다. (참조)

Value 설정

  |, ||, && 사용

  modifier: 정규표현식으로 [] * + ? 기호 사용

그외

  shorthand 사용   

  벤더 식별자(prefix) 사용: -ms- mso- (MicroSoft), -moz- (Mozilla), -o- -xy- (Opera Software), -webkit- (Google Chrome, Apple) - 참조

  @import "xxx.css"; 처럼 뒤에 반드시 ; 세미콜론 넣는다. @안에 @을 넣을 수 없다. 

  Default Style Sheet : selector에 기본 적용된 스타일이 있다. - 스펙

  길이 단위: px, em 이다. 0일 경우 px 붙이기는 옵션

단위

  절대 단위 

    - mm(밀리미터) 

    - cm(센치미터)

    - 1in(인치) === 2.54cm

    - pt(포인트) === 1in/72

    - pc(피카) === 12pt

    - 1px(픽셀) === 0.75pt

 상대 단위

    - em: font-size가 상댓값의 기준 예) font-size em을 작성하면 부모 엘리먼트의 font-size가 기준이 된다. 반응형 웹 사이트의 경우 유용

    - ex: 영문 소문자 x의 높이가 상댓값 기준. x-height라 부름

    - %: font-size 50% 형태로 작성. 부모값 기준

Cascade

케스케이딩은 3가지 스타일시트를 적용하는 규칙이다. 

스타일 시트 원천(origin) 타입

 - Author: 개발자가 작성한 것

 - User: 콘텐츠 사용자가 직접 핸들링 가능

 - User agent: 브라우저 디폴트 스타일시트 적용

   (스펙)

개발자 스타일(Author)

  <link href="xxx.css" rel="sytlesheet" type="text/css">

  <p style="property: value">

사용자 스타일

  - IE에서 적용가능

케스케이딩 사전 준비

  - 스타일을 적용을 위해 먼저 DOM(Document) Tree를 만들어야 한다. 

  - DOM트리를 읽으며 CSS 적용을 위한 박스 모델을 생성(generate)한다. 

    즉, HTML에 DOM tree처럼 CSS는 Box 모델이 있다. HTML/CSS는 둘다 DOM, Box와 같이 오브젝트 모델을 갖는다. 

  - 생성된 박스 모델에 따라 프로퍼티 값 추가

  - 박스 모델

엘러먼트에 스타일시트 프로퍼티 적용 우선 순위

  - 밑으로 갈 수록 우선순위가 높음: 되도록 !important는 사용치 말자. 

    1. 브라우저 디폴트 스타일 시트

    2. 사용자 스타일 시트

    3. 개발자 스타일 시트

    4. 개발자 !important

    5. 사용자 !important

  - selector에 따른 적용 순위

    우선 순위 계산 방법에 따라 적용 (참조)

    CSS 스펙에서 #wrap은 id="wrap" 이고, .wrap은 class="wrap"을 표현한다. 

  - 적용 방법

    <link>

    @import

    <style>: head 또는 body 작성가능 

    inline: <p style="xxx">

@import

  - 파일을 분리해서 관리 

  - @import  url("xx.css");

Box Model

박스 모델을 통해 컨텐츠의 위치와 이웃과의 경계를 만든다.  (참조)

- line box

  margin, border, padding, 컨텐츠를 가진 박스생성하고 엘리먼트에 연결(링크)

  DOM트리의 논리적 순서(Logical Order) 중심

- inline box 

  style 중심의 시각적인 순서(Visual Order)로 각 엘리먼트를 정리함

- border-color

  border-<top, right, bottom, left>-color

- border-style

  디폴트 none

- border-width

  thin, medium, thick

본 서적은 자바스크립트와 앵귤러 프레임워크를 프로젝트에 도입해 보려는 개발자 또는 프로토타입을 해보고 싶은 개발자 또는 사용해 본 경험이 있는 개발자를 대상으로 한다. 앵귤러에 대해 처음 공부하는 분에게는 다소 어려울 수 있으므로 기초서적을 권장드린다. 책 제목처럼 3장이후 부터 실전 프로젝트 실습을 위한 상세 소스를 GitHub에서 제공한다. 1~2장은 개념 정리이므로 읽고 나중에 참조하는 장으로 사용한다. 참고로 2장은 실습이 없이 개념을 설명하는 장이기에 소스를 제공하지 않고 있다. (소스의 Git Branch는 장이 끝나는 시점에 언급하고 있다. 먼저 전체 소스를 보고 싶다면 GitHub 내용을 참조하자)

출판의 여정 

8개월의 원고작성, 3개월의 편집기간을 거쳐 드디어 책이 출간되었다. 책을 통해 개발자들과 공유하자는 의기투합은 2013년 겨울로 거슬러 올라간다. 이강훈님을 통해 알게된 이규원님, 김충섭님, 김대권님, 박유진님, 구교준님과 함께 MEAN 스택을 기획했었다. 그 당시 미국에 있었던 지라 구글 행아웃을 통해 주말마다 화상미팅을 하며 깃헙과 페이스북을 통해 서로의 의견과 결과물을 공유했다. 2014년 봄 귀국후 함께 오프라인에서 헤커톤도 하면서 책의 샘플을 만들며 진행했지만 각자의 일정으로 인해 MEAN 스택 집필을 흐지부지 되어갔다. 2014년 7월쯤 결단을 내리고 이렇게 진행하면 끝나지 않겠다 싶어서 다음 기회를 기약하였고, 홀로 책을 쓰기로 결심했다. 

2014년 8월 이강훈님 회사인 스터디지피에서(https://bagle.io)의 서비스를 개발하면서 미국 플젝에서 얻은 AngularJS 경험과 개념정리가 덜 된 부분을 하나하나 집어가며 집필을 시작했다. 처음에는 한 페이지를 나가는데 하루의 시간이 걸리더니 조금씩 속도가 붙으면서 한달만에 100p 가량을 썼다. 하지만 다시 가을 미국 프로젝트로 2달간 집필 중단 후 한국에 돌아와 마음을 다잡고 12년전 내 책을 출판해 보자는 꿈을 다시한번 상기했다. 위키북스의 박찬규 대표님도 은근히 압력을 넣어주시며 언제쯤 나올까요 물어볼때마다 곧 나올겁니다 대답하곤 하루 1~2시간씩 짬을 내어 집필을 계속했다. 2015년 3월 집필을 완료하고 출판사에 전달했지만 피드백으로 날아온 것은 맞춤법과 문장 난해함에 대한 엄청난 지적질의 빨간줄이었다. 

한달간 주말마다 빨간 선생님과 싸움하며 "그래 글쓰는 것도 배우는 거다"라고 생각하고 나의 국어실력을 한탄하며 글을 풀어서 이야기식으로 고쳐나갔다. 사실 블로그를 쓰다보니 블릿(점, 점으로 요약한 내용)으로 내용을 요약해 표현하다 보니 책도 그렇게 썼드랬다. 블릿 내용을 다 풀어쓰는 것만도 한달. 다시 피드백받아 또 고치고 피드백받아 또 고치고, "아 무한루프의 피드백". 점점 스트레스와 화가 살짝 났다. 인생 목표 10가지중 1가지가 1년에 책한권씩 내자였던 것이 여지없이 깨지는 순간이었다. 이렇게 하다가는 2년에 한권내는 것도 힘들겠다 싶었다. 하지만 일에는 끝이 있는 법. 5월초 거의 마무리 피드백을 보내고, 책 추천사를 받고 인덱스를 보내고, 몇가지 피드백을 마무리하며 3개월의 수정작업은 6월 5일 마무리되었고, 예약 판매가 모든 온라인 서점에서 시작되었다. 그렇게 나온 것이 "실전 프로젝트로 배우는 AngularJS" 이다. 

본 서적은 AngularJS가 하도 유행이라 하여 한번쯤은 기초서적을 구매하거나 빌려서 본적이 있고, 온라인 튜토리얼을 통해 프로토타입핑을 해보았지만 당췌 AngularJS로 서비스를 어떻게 만들어야 할지 모르는 개발자를 위한 책이다. "나도 내가 원하는 서비스 뚝딱 만들어 보고 싶어 근데 어떻게 시작해야는 거야?"라고 생각하는 모든 개발자를 위한 책이다. AngularJS는 생태계를 가지고 있고 인식의 전환을 해야하는 새로운 용어들이 존재한다. 

처음 1장에서는 간단한 ToDo 서비스를 만들면서 주변의 생태계 도구와 개념을 이해하고 2장에서는 AngularJS의 장점들과 그중에 지시자(Directive)에 대해 좀 더 심도있게 설명을 했다. 3장, 4장에서 서비스를 바로 만들 줄 알았다면 오산이다. 이제 서비스를 만들 준비운동단계이다. 먼저 요건정의를 하고 이에 맞는 코딩 컨벤션 부터 AngularJS를 이용한 SPA 개발시 준비할 것들을 프론트앤드 아키텍처로 접근해 보았다. 5장에서 이제 좀 개발들어가려 했더니 그래도 요즘 많이 사용하는 NodeJS, MongoDB는 알고가자는 취지에서 개념과 실습코드를 넣었다. 1장~5장이 준비운동과 스타트 단계였다면 6장, 7장은 엄청난 스피도로 골인점을 향해가는 단계이다. 올초 2개월간 TossLab의 JANDI(http://www.jandi.com)에서 AngularJS에 대한 컨설팅 경험을 적용한 장이다. 

목차

▣ 01장: 단일 페이지 애플리케이션 개발 준비
1-1. 개발 도구 설치 
   - 깃 설치 
   - 노드 설치 
   - 요맨 설치 
   - 서브라임 텍스트 편집기 설치 

1-2. 단일 페이지 애플리케이션 생성 
   - yo generator 선택과 설치 
   - Yo를 이용한 ToDo 애플리케이션 생성 
1-3. 애플리케이션 컴포넌트 생성 
   - 앵귤러를 위한 index.html 설정 이해하기 
   - yo를 이용한 앵귤러 컨트롤러 추가 
   - bower를 이용한 앵귤러 지시자 추가 
1-4. 애플리케이션 테스트 및 빌드 
   - grunt를 이용한 테스트 
   - grunt를 이용한 배포 
정리 

▣ 02장: AngularJS 프레임워크 이해
2-1. MV* 프레임워크 
2-2. 양방향 데이터 바인딩 
   - 스코프 내부와 상속 관계  
   - MyToDo 애플리케이션에서 양방향 데이터 바인딩 
   - 스코프 생명 주기(Life Cycle) 
   - 그 외 $scope 객체 메서드 
2-3. 의존성 주입(DI, Dependency Injection) 
2-4. 클라이언트 템플릿 
2-5. 지시자(Directive) 
   - 지시자가 DOM에 적용되는 순서 
   - 지시자 정의 
   - 지시자의 스코프 객체의 범위 종류 
   - Template, TemplateUrl, TemplateCache, replace와 ng-template 사용 
   - compile, link의 $watch 등록을 이용한 양방향 데이터 바인딩 
   - controller, require와 link 네 번째 파라미터와의 관계 
   - transclude, ng-transclude 사용 
2-6. 테스트 프레임워크(단위, E2E) 
   - 카르마 기반 단위 테스트 
   - 프로트랙터 기반 E2E 테스트 
정리 

▣ 03장: 싱글 페이지 애플리케이션 기획및 생성
3-1. 애플리케이션 기획
   - 메인 페이지 
   - 그룹 정보 페이지 
   - 그룹 활동 페이지 
   - 설문 생성 페이지 
3-2. 애플리케이션 제너레이터 설계 
   - 애플리케이션의 폴더 구조 전략 
   - 애플리케이션 제너레이터 선정 
   - 앵귤러 코드 스타일 전략 
   - 스타일 가이드에 따른 제너레이터 템플릿 수정 방법 
   - IE8 지원을 위한 index.html 설정 
3-3. SPA 생성 
   - 애플리케이션의 모듈 구성 
   - 라우팅 설정 방식 
3-4. 단위 업무를 위한 앵귤러 컴포넌트 조합 
   - $resource를 통한 REST 모델 사용 
   - promise와 $q Async 호출에 대한 이해 
정리

▣ 04장: 애플리케이션을 위한 공통 프레임워크 개발
4-1. 공통 프레임워크 모듈 개발 
   - 다국어 처리 
   - 메시지 처리 
   - 팝업 메시지창 지시자 
   - HTTP 에러 처리 
   - 사용자 정의 Bower 컴포넌트 등록 
   - 로컬 저장소 서비스 
   - 유틸리티 지시자 
4-2. 로그인 화면 개발 
   - 트위터 부트스트랩 기반의 화면 디자인 및 폰트 사용 
   - 폼 유효성(Form Validation) 검사 
   - 인증을 위한 토큰과 쿠키 
4-3. OAuth를 이용한 인증 처리 
   - 백엔드에서 Passport 모듈을 이용한 인증 처리 
   - 페이스북 인증 처리 
   - 크롬 브라우저 개발자 도구를 이용한 클라이언트 디버깅 
   - 노드 인스팩터를 이용한 서버 디버깅 
정리

▣ 05장: 메인 페이지 개발
5-1. 백엔드 API 개발 
   - REST API 별 서버 모듈 조합 
   - 노드 모듈의 exports 이해 
   - 몽고디비와 몽구스 이해 
   - 서버 모델 개발 
   - 그룹 REST API 개발 
   - 포스트맨을 이용한 REST API 검증 
   - 백엔드 단위 테스트 수행 
5-2. 메인 화면 개발 
   - 공통 컴포넌트 재구성 
   - 메인 화면 레이아웃 개발 
   - 그룹 생성 
5-3. 그룹 목록 및 정보 표현 
정리 

▣ 06장: 그룹 페이지 개발
6-1. 그룹 정보 페이지 
   - 그룹 상세 정보 조회 
   - 그룹 프로필 이미지 변경 
   - 그룹 가입, 탈퇴 
6-2. 그룹 활동 페이지 
   - 그룹 활동 화면 레이아웃 개발 
   - 그룹 멤버 목록 표현 
6-3. 설문 카드 생성 
   - 설문 카드 생성 
   - 카드 지시자 개발 
6-4. 설문 종류별 카드 표현 
6-5. 설문 응답 및 결과 표현 
정리

▣ 07장: 실시간 반응 개발
7-1. Socket.IO 기반 실시간 연동 
   - 노드 기반 백엔드 Socket.IO 
   - AngularJS 기반 프런트엔드 Socket.IO 
   - 상단 알림 메뉴 추가 
7-2. 카드 목록 UX 개선 
   - 카드에 동영상 추가 
   - 무한 스크롤 적용 
   - 애니메이션 효과 적용 
7-3. AngularJS 성능 옵션 
   - 일회 바인딩 
   - ngModelOptions 지시자 
   - 디버깅 정보 비활성화 
   - $applyAsync 적용 

정리

구매

예스24 온라인 서점

알라딘 온라인 서점

인터파크 온라인 서점

교보문고 온라인 서점

G마켓 온라인 서점

현재는 예약 판매로 10% 싸게 구매 할 수 있다. 6월 17~19일간 배송을 시작한다. 당초 높은 가격이 책정되었지만 위키북스 대표님에게 가격이 높아 개발자에게 부담이 될 것 같다하였더니 파격적인(?) 가격에 판매를 시작해 주셨다. 지금까지 독자로 책을 사보면서 철자하나 틀리면 왠지 기분이 나쁘고 지적을 해주고 싶었는데 이제부터는 너그러이 용서해 줄것 같다. 정말 많은 공력과 시간이 투여되는 시간이었다. 하지만 새로운 경험을 하게 되었고 이렇게 해서 책 한권 한권이 출판된다는 생각을 하니 한권의 책을 사도 감사히 볼 마음가짐이 생긴다.  

이번달 중으로 출판사의 양해를 얻어 1장과 2장은 블로그에 공개하려 한다. 2장은 AngularJS v1.* 이 계속 사용되는 한 유용한 레퍼런스가 되리라 생각한다. 이렇게 생애 첫 책 출판을 자축하며... 내년에는 "Data Visualization using D3.js" 이고, 여기에 ReactJS 또는 AngularJS v2.* 와 Meteor를 접목한 경험을 출판할 계획이다. 글쓰기도 가끔은 중독이다. 자전거 처럼 잘 타지는 못하지만 타고 있는 동안은 자유다. 나를 표현하고 느낄 수 있는 시간이랄까~~~

소스 

책의 소스는 모두 깃헙에 있습니다. 책 챕터마도 브랜치에 대한 정보가 담겨 있습니다. 

책 소스를 위한 깃헙 그룹 : https://github.com/AngularJS-SPA-Development

하루종일 회의를 하고나니 진이 빠진다. 저녁 미티어 스쿨 모임장소 가는길에 연회원 등록한 박찬호 21이라 피트니스 클럽이 있다. 

$ meteor create waggleChat

$ meteor remove autopublish

$ meteor remove insecure

$ meteor add twbs:bootstrap

$ meteor add accounts-ui

$ meteor add accounts-password : Accounts 객체를 사용할 수 있다.

$ meteor list

accounts-ui      1.1.5  Simple templates to add login widgets to an app

meteor-platform  1.2.2  Include a standard set of Meteor packages in your app

twbs:bootstrap   3.3.5  The most popular front-end framework for developing responsive, mobile fir...

lib/collection.js  : 컬렉션은 lib에 넣어서 최초에 new를 하게 하자. 

server/fixture.js : 테스트 데이터를 만든다. 

client/account.js: Accounts UI에 configuration 한다. 

waggleChat에 loginButton 넣기 

pub/sub 을 roomList로 등록한다. : 서버에 publish, 클라이언트의 템플릿의 onCreated에서 subscribe를 한다. subscribe를 하면 DDP를 통해 서버로 부터 데이터를 받고 ready를 날려준다.

insert failed: Access denied : 채팅방 만들때 에러가 발생하므로 서버에서 allow를 구현한다. allow.js

roomList.helpers의 list가 바뀌면 computation되어 template의 each로 가서 computation이 되어 최종 화면에 추가한 방목록이 나온다. 

Rooms.find({...}) 의 결과는 cursor 이다.  cursor.observer({ added: function(document) { ...} }); 으로 cursor의 변화에 대하여 observing 할 수 있다. observer는 서버에서도 사용할 수 있다. 컬렉션의 cursor는 Reactive DataSource 이다. 

검색은 fastophere.meteor.com

Selector는 패턴에 매치되는 노드를 추출하는 것이다. Selector를 배워보자 

Selector

패턴사용은 div[class] 이다. 스펙 참조. 

"querySelector vs querySelectorAll" : finding element

엘리먼트를 추출한다. querySelector는 하나만 찾고, querySelectorAll은 모두 찾아준다. 

"Selector Attribute, Selector-Pseudo"

li:nth-child 같은 것은 Selector-Pseudo 이다. 

CSS

Cascading Style Sheet. 콘텐츠의 표현. HTML 엘리먼트에 CSS 적용. 모바일에서 SVG의 용도는 Zoom In/Out해도 깨지지 않는 해상도를 지원한다. 

"Rule Set"

CSS를 설정하는 규칙 

"HTML 엘러먼트에 스타일 적용 순서"

디폴트 스타일 < 사용자 스타일 < 개발자 스타일

개발자 스타일이 가장 높음.

"Default Style"

<h1>이 <h2>가 큰 것은 디폴트 스타일에서 적용되어 있기 때문이다. (스펙 참조)

"사용자 Style"

브라우저에 스타일 지정이 가능하다. IE에서만 가능 (옵션에서 사용자 스타일 파일을 지정해 주면 된다.) 예로 만일 파란색을 강제로 브라우저레벨에서 노란색으로 보고 싶을 경우 사용한다. 

"개발자 Style"

개발자 Style 에서 !important 사용은 많이 고려한다. 가장 우선하기 때문이다. 

"DOM View는 최종적으로 스타일이 적용된 상태이다."

최종으로 적용된 스타일 추출로 DocumentView, AbstractView 인터페이스가 있다. 

"getComputedStyle() 은 우선순위에 의해 최종적으로 스타일이 적용된 결과값을 준다."

IE는 currentStyle이다. 

Ajax

"Asynchronous JavaScript + XML"

Jesse James Garrett이 2005년 2월 18일 블로그에 썼다. 제목은 A New Application to Web Application으로 웹 애플리케이션이라 말을 처음 거론함. 이전은 마크업으로 말함. 

"JJG의 원문 블로그를 읽자" 

AJAX는 기술이 아니다. = "XHTML/CSS" + "XML/XLST" + "XMLHttpRequest(XHR)" + "DOM" + "JavaScript" 현재는 "XHTML/CSS"는 "HTML5"가 되고, "XML/XLST"는 사용 안한다. 각 요소기술을 AJAX라고 부른다. 

"XMLHttpRequest는 HTTP 통신 오브젝트이다."

비동기 통신을 하여 데이터 송수신 한다. XMLHttpRequest가 Ajax가 아니라 Ajax라 통칭하는 개념의 일부 요소기술이다. 

"Ajax Web Application Model"

비동기로 받은 데이터를 DOM 제어를 통해 반영한다. Web Application이 복잡해 지면서 MVC, MV* 패턴들이 나온다. 

"동기, 비동기 통신의 차이"

동기는 요청을 보낸 후 응답이 오기전까지 사용자의 액티비티를 할 수 없다. 비동기는 요청과 상관없이 사용자 액티비티가 가능하다. 

피곤할 때는 술 한잔을 하고 자면 풀릴까 하고 두잔을 하고 잤더니 피곤이 풀리기는 커녕 눈꺼풀만 무겁다. 7시 알람이 휴대폰에서 요란하게 울리지만 20분을 뒤척인 끝에 DOM생각에 벌떡 일어나 냉동실에 얼려 놓은 찹쌀떡을 하나 먹고 길을 나썼다. 관악산의 산바람이 시원하게 얼굴을 스치고 반바지 아래로 차가움이 감싼다. 2일차 DOM강의실로 삼양 컵라면 하나를 들고와서 따끈한 국물을 마시고 손놀릴 준비를 한다. 

Event

"다큐멘트에서 발생하는 이벤트를 설정하고 작용한다."

이벤트 설정에는 이벤트 타입이 있다. 이벤트 처리는 핸들러/리스너라 부르지만 리스너가 표준(스펙)용어이다. 캡쳐/버블은 DOM Tree와 관련이 있다. 이벤트의 버블링은 document 밑의 html 객체까지 올라간다. 기본이 이벤트 전파이기 때문에 적절히 방지를 해주어야 한다. 

"스펙을 보자. 이벤트 스펙"

이벤트 전체 스펙을 읽어보자 

Target : 이벤트가 발생한 곳

1, 2, 3 : 이벤트의 발생 Phase

"캡쳐, 버블링"

window부터 캡쳐링 된다. DOM의 path구조를 메모리상에 만들어 놓고 캡쳐/버블링 phase로 찾아간다. 예로 아래와 같이 파란색의 tr을 클릭하면 먼저 밑으로 간 후 위쪽으로 버블링된다. 3번의 버블링은 막을 수 있지만 1번 단계는 막을 수 없다. 왜 버블링을 발생하고 막게 할 수 있을까?

                                         그림에 대한 참조 사이트

"이벤트 설정은 element.addEventListener() 이다."

버블/캡쳐가 기본이고 캡쳐링은 모든 리스너가 무시(false) 한다. IE 6,7,8은 attachEvent() 이고 파라미터가 2개이다. 그리고 IE 6,7,8에서는 캡쳐/버블링을 하지 않는다. HTML5는 on을 넣어 이벤트 리스너를 표현한다. 예) onclick

"이벤트 리스너 사용 예제"

clickNode.addEventListener('click', handleClick, false); 소스에서 세번째 파라미터가 false 이면 버블링을 리스너가 처리하고 true이면 캡쳐링을 리스너가 처리한다. 전파(propagation)에 대해 버블링 막기는 event.stopPropagation() 호출한다. 태그에 할당된 이벤트를 막기위해 예로 <a> 태그의 화면 이동을 막기위해 event.preventDefault() 호출한다. 

토요일 이른 아침 부슬부슬 비가 내리고 있다. 요즘들어 늦게 잠이 들기 때문에 7시가 되어도 이른 아침의 피곤함을 느낀다. 하지만 오늘은 기대하던 DOM 사상을 배우는 날이라 아침까지 챙겨먹으며 몸단장하고 지하철에 올랐다. 주말이라서 사람들이 없어서 다행이다. 사람들이 눈을 감고 잠을 자는지 명상을 하는지 생각하고 있는 사이 가산 디지털단지에 도착. 창업진흥원을 찾아 20층에 올라왔다. 강의장은 아래 모습으로 마치 헤커톤에 온듯 자유로운 공간을 가지고 있다. 바로 앞에 사자머리 제임스 고슬링 코스프레 아저씨가 버티고 있어서 시야를 방해한다. 그래도 React가 Virtual DOM을 만들어 지원하고 있는데 DOM을 알 수 있다면 이쯤이야... 

시작하기 

"DOM은 사용자를 고려한다" 

기술중심의 언어가 아닌 사용자 중심의 언어이다. DOM은 UI/UX를 제공하고 사용자의 접점이기 때문이다. 웹페이지 구성을 보면 HTML은 구조 CSS는 표현 DOM은 구조와 표현의 CRUD를 담당하고 통신은 HTTP, Socket, Ajax가 하고 Javascript는 컨트롤을 한다. 

"DOM은 동적이다."

동적 페이지를 제공하고, UI(User Interface)는 사용자 행동, 시스템 응답 중심이라면 UX(User eXperience)는 사용자 경험, 습관, 관습 중심이며 이벤트(Event)는 사용자 행동 인식 및 요구/요청에 응답한다. 이 모든 것은 DOM 기본으로 알아야 이해할 수 있다. 

"DOM은 도큐먼트로 작성한 것을 객체 개념으로 다양한 언어에서 접근토록 모델을 제공한다."

Document : "<!DOCTYPE html> ~ </html> 이 DOM 영역이다."

Object : 객체 개념으로 접근하고 객체 요소에는 행동과 속성이 있다. 이들은 key: value형태이다. 

Model : 다수의 언어에서 사용하기 위해 Interface 행태로 DOM을 제공한다. DOMString 형태로 표기한다. 

"Model을 바탕으로 Object를 만든다."

개발자 입장에서 중요한 것은 객체이고, 객체를 핸들링하는 것이다. 모델은 엔진이 사용해서 객체를 만들어 주는 시스템적인 것이다. Object로는 Document, Element, DOM Traversal, DOM/마우스/키보드/HTML/Mutation 이벤트, Selector, DOM View, CSSOM ( CSS Rule Set ) 등이다. 참조

DOM API/Level

"DOM의 기술적 의미는 API를 다루는 것이다."

DOM은 버전이라 하지않고 레벨이라 한다. DOM Level1은 마크업만 DOM Level2에서 CSS가 들어오고, 마우스 이벤트, DOM Traversal and Range가 들어옴. DOM 2부터 MS가 참여를 하지 않으므로 Cross Browsing 문제가 발생하기 시작한다. 관련된 iExplorer 버전은 6,7,8 이다. DOM 3는 XHTML 1.1 기준으로 나온다. 

"DOM Level 1, 2, 3 에서 HTML 5 로 넘어왔다."

많은 이벤트 타입이 생기고, CSSOM (CSS Object Model) 분리가 된다. 예로 CSS, Media Query, Selector 등이다.  

"HTML5의 핵심은 플랫폼이다."

오픈 플랫폼이며 표준을 바탕으로 하고, 최종 목적은 컨텐츠 제공이다. 브라우져 하나만 가지고 모든 것을 하겠다는 플랫폼의 의미가 들어왔다. 예로 Indexed DB 임베드. 네트워크가 끊어져도 작동을 할 수 있다. (스티브 잡스가 iPhone 4 발표때 HTML5를 이야기했다.)

"HTML5 분류는 마크업과 API이다."

마크업은 <video> <section>, 콘텐츠 모델이 새로 들어오고, <menu>, <i>, CSS 등이 재정이 된다. 

API는 <canvas> <svg>로 직접 표현이 가능하고, Web Socket, IndexedDB등을 JS로 제어해 간접 표현이 가능하다. 

* DOM 4는 HTML5 에서 분리되어 진행중이다. 

DOM 구성 요소 

"!doctype 최상위 요소 #document 이다."

Document -> Element -> Node

엘리먼트는 Element Interface를 Object로 생성한 것이다. 노드는 12개의 타입이 있다. 노드는 엘러멘트보다 더 작은 레벨이다. 노드도 오브젝트이다. 

크롬 DevTools를 통해 head의 Node목록을 보면 엔터(enter) 키가 있는 text까지 해서 총 7개의 노드가 존재한다. 

Document 객체의 속성을 살펴보자.

- doctype

- implementation : 브라우저에서 지원하는 기능. 자바스크립트에서 사용할 일이 별로 없다. 

document 메소드

getElemntsByName : 반환값 배열

getElementsByTagName : 태그의 이름, 반환값 배열 

getElementsByClassName : class 스타일 이름, 반환값 배열 

getElementById : id 이름. DOM Tree에서 가장 먼저 나온 id의 값을 리턴함 (만일 id가 중복되어 있다면), 객체

createElement / createTextNode / createAttribute / createDocumentFragment / createRange / importNode / adoptNode  ==> innerHTML 로 사용

createAttribute

Element

"엘리먼트 노드와 엘리먼트는 틀리다."

- 엘리먼트 노드 = <div id="sports">

- 엘리먼트 = <div> ~ </div> 

"엘리먼트는 오브젝트 관점과 Data 관점으로 보아야 한다."

HTML은 오브젝트이고 데이터가 있다로 인식을 변환한다. (DOM Spec Element Interface), 엘러먼트(div)에는 기본 13개의 속성이 존재한다. 노드의 명칭(nodeName)은 일반적으로 #을 붙여준다. 예로 #document로 표현한다. 

엘러먼트의 다양한 속성들 : nodeName, attributes와 classList 많이 사용한다. <!doctype> 때문에 tagName 대신 nodeName 을 사용한다. 

"Element-client 는 CSS BoxModel과 관계한다."

clientHeight : scrollBar, border, margin을 미포함한다. 즉, 엘리먼트 높이와 padding만 포함. 

clientWidth : 엘리먼트 넓이와 padding만 포함.

- Element Client

"CSS BoxModel은 margin padding border 이다."

Margin은 내집의 울타리 밖으로 다른 집과의 공통 구역. Padding은 내 울타리안이다. Border는 내 울타리의 넓이이다. 

clientHeight, clientWidth, clientLeft, clientTop 예제 

- Element Offset

"offset은 엘리먼트가 부모와 떨어진 거리이다."

position 속성(absolute, relative, fixed, static)에 따라 부모와의 offset 값이 틀려진다. 예로 마우스 클릭의 좌표값을 구할 때 사용. 

offsetHeight : 엘러먼트 높이 padding, scrollBar, baroder를 포함하고 margin 미포함 한다. 

offsetParent는 CSS offset과 관련이 있고 DOM tree에서 가장 가까운 선조 엘리먼트이다. 항상 offsetParent와 offsetElement가 같지는 않음 

- Element Scroll

scrollHeight : 엘리먼트 높이, padding 포함, scrollBar, border, margin 미포함 

- Element Child, 그외 것들 

childElementCount, childNodes : text 노드 포함 , children: text 노드 미포함 (Collection 타입)

childNodes는 7개이고 children은 3개이다. text는 엔터키 값을 갖는다. 

페북 미티어 스쿨의 박승현님이 스마트링크 멤버를 위해 미티어 중급강좌를 시작했다. 첫회에는 Reactivity, 선언적 프로그래밍, Meteor Way, 발행/구독 (Pub/Sub), DDP, Template/Blaze 등에 대한 기초적인 부분을  집고 넘어갔다.  

한번 훑기

- 패키지 설치하면 .meteor안에 심볼릭 링크 (npm -g 의 폴더에 실제 설치됨)

- Live Hot Push(Reload) : CSS는 hot push 이지만 소스 변경은 hot reloading으로 두가지 다 일어난다

- Pub/Sub, Method Call : WebSocket 이 기반이다. 파일 업로드(Method Call 사용)

- WebApp 기본 패키지를 이용해서 RESTful 가능

- 서버 클라이언트간 싱크에 대한 이벤트 체크 API가 존재한다. 예) ready()

- 미니몽고 - 클라이언트 자바스크립트로 구현

- 퓨전페신져 : https://www.phusionpassenger.com/ 웹서버를 사용 stick session 으로 scale out 가능하게 해 줌 

- 로보몽고 또는 몽고쉐프를 사용해라

- 폴더

  + lib > client, server, private, public 즉, lib가 가장 먼저 로드된다. 

  + private은 Assets API를 통해 : 미리 fixture로 데이터를 등록할 때 사용한다. 

  + packages폴더 : 공통 컴포넌트들

Reactivity 

엑셀의 예를 생각 하면된다. 위키의 Reactive Programming을 봐도 엑셀에 대한 예로 설명되어 있다. 엑셀에서 데이터를 넣은 셀을 미티어에서는 Reactive Data Source라고 하고 엑셀의 더하기 sum(c1, c2)를 적용한 셀을 Reactive Computation이라 한다. 

  - Reactive Computation : 쉘의 펑션 sum(c1, c2)

  - Reactive Data Source : 쉘의 밸류  c1, c2

이것을 도형으로 그리면 다음과 같이 Reactive Data Source를 Reactive Computation이 감싸서 감시를하고 변경 발생시 변경을 알리게 된다. 변경은 또한 변경을 감지하는 Reactive Computation으로 전파(Transition)되어 변경을 반영한다. 예로 하위의 Reactive Data Source를 하위 Reactive Computation에서 감지하고 다시 Template에서 변경을 감지하고 DOM을 변경한다. 

미티어에서 이야기하는 Reactive Data Source와 Reactive Computation에 대한 대표적인 예를 보면 Reactive Data Source는 Reactive Computation에 감쌓여 있어야 반응을 한다는 것이다. 

미티어에서의 Reactive Data Source/Computation의 종류 

- Reactive Computation

  + Templates

  + Tracker.autorun

  + Blaze.render, Blaze.renderWithData

- Reactive Data Source 

  + Session variables

  + Database queries on Collections

  + Meteor.status

  + ready() method on a subscription handle

  + Meteor.user

  + Meteor.userId

  + Meteor.loggingIn

- mini-mongo (data source) <-> template.helpers list (list도 computation 이고) -> blaze의 {{#each list}} (list의 computation이 전이되어 each computation으로 와서 변경이 이루어진다)

- 필요악 : session, mini-mongo cursor, pub/sub의 ready() 는 전부 computation이 이루어 진다.

- 데이터 소스를 직접 만들기는 ReactiveVar 를 사용한다. Computation은 Tracker.autorun으로 구현 

템플릿

미티어에서 Blaze는 기본 템플릿 엔진이지만 템플릿이 모두 컴포넌트로 바뀐다. 단순 템플릿 스트링 이기 보다. React처럼 템플릿이 인스턴스로 변환이 되고 OnCreated, OnDestroyed, OnRendered가 인스턴스별로 호출이된다. 그러나 Template.<templateName>.helpers / events / rendered : 안에서 this는 Template 이므로 주의를 한다. 

  - Blaze : 서버의 데이터 변경에 따른 화면의 변경을 보여주기 

  - {{> }} 의 > 은 인스턴스를 만드는 것이다. 

  - 템플릿 레벨에서 라우팅을 하는 것으로 패턴이 바뀜 

  - Computation의 전이(Transition)를 통해 다이나믹하게 화면을 변경할 수 있다. 

참조 

Meteor의 Reactive의 해부

중급반 샘플 사이트 공개 
http://wagglechat.meteor.com/

Semantic UI를 React 컴포넌트로 만들고 NPM 저장소와 Meteor 저장소인 Atmosphere에 배포해 보자. 토요일 헤커톤 모임을 갖고 스마트링크 멤버분들과 함께 진행했다. 목표는 React Bootstrap 과 같은 오픈소스 패키지를 만들어 보는 것이다. 처음엔 활짝 웃고 있는 모습!

준비 운동 

함께 개발을 진행하는 관계로 코딩 컨벤션은 에어비엔비의 React 코드 컨벤션으로 한다.  다음으로 깃헙(GitHub) 저장소를 만들었다. 소셜 코딩은 역시 깃헙이다. 깃을 사용하므로 커밋 메세지를 잘 작성하면 별도의 CHANGELOG를 작성할 필요가 없다. 따라서 Git Commit에 대한 컨벤션도 앵귤러에서 사용하는 방식을 쓴다. 그리고 정보를 찾고 공유하는 것은 슬랙(Slack)을 이용하고, 할일에 대한 보드는 트렐로(Trello)를 이용해 서로 공유하고 있다. 트렐로를 슬랙과 연동하면 슬랙에서 모든 것을 확인 할 수 있다. 

일단 npm 초기화을 초기화하고 모듈을 설치한다.  package.json 에 설치하는 모듈은 다음과 같다. 

  - ES6를 사용하기에 Babel을 통해 ES5로 트랜스파일한다. 

  - React로 설치하고, classnames는 리액트 코드안에서 클래스명을 확장해 주는 기능을 한다. 

  - fbjs는 ES7의 dectorator를 사용해 React Start Kit에 있는 withStyle을 컴포넌트별로 적용해 보려 했으나 원하는 동작이 안된다. 제거해도 좋음. 

  - *-loader는 웹팩(Webpack)을 통해 전체 패키지를 하나의 배포 파일로 번들링하기 위해 설치한다. 

package.json에 설정을 넣고 한번에 npm install 해서 설치하자

다음으로 웹팩 환경파일인 webpack.config.js 를 만든다.  웹팩은 사전에 설치할 것이 있는데 홈페이지의 Getting start를 보자. 그리고 어떻게 잘 사용할지는 페북 엔지니어인 피트헌트의 Webpack Howto를 참조한다. 설정 내용은 다음과 같다. 

  - 배포 파일 명칭은 reactjs-semantic-ui.js 파일이고, /src/index.js 파일에 모든 참조 내역을 작성한다. 

  - 배포시 접근하는 네임스페이스는 RSU (React Semanctic Ui) 이다. 예로 본 패키지를 리액트 코드에서 사용하면 RSU.Button 식의 접근이다. 

  - .js 또는 .jsx 확장자는 babel-loader로 ES6를 ES5로 트랜스파일한다. 

  - 웹팩은 css 파일과 이미지 파일도 함께 번들링 하므로 style-loader 와 css-loader를 설정하고, 이미지와 폰트 관련해서 url-loader를 설정한다. 

  - react.js 관련 파일은 웹팩으로 번들링시에 제외토록 externals를 설정한다. 

Babel 사용시 주의 점은 간혹 ES7 의 decorator를 사용하거나 특정 스펙 레벨까지 적용하고 싶다면 루트에 .babelrc를 생성하고 stage를 설정해야 한다. stage 설정 가이드를 참조하자.

개발 시작

환경 준비하며 문제점을 해결하는데 3시간 가까이 소비를 했다. 본격적으로 시멘틱 UI를 리액트화 하기 위해 다음과 같은 순서로 작업을 한다. 

  - src/index.js안에 작성한 컴포넌트들을 설정한다. 

  - 시멘틱 UI가 구분해 놓은 Elements, Collections, Views ... 와 같이 구분해서 폴더를 만들어 그밑으로 컴포넌트를 만든다. 

  - 시멘틱 UI의 core css는 reset.css 로 Reset 클래스를 하나 만들었다. 

  - ES6 구문을 사용한다. ES5 Features를 참조하자 

    + import ... from 

    + { key : value } 가 동일 설정이면 { key1, key2 }로 나열 

    + export default RSU 

// Globals
import Reset from './globals/Reset';

// Elements
import { Button, Buttons } from './elements/Button';
import Container from './elements/Container';
import Dimmer from './elements/Dimmer';
import Divider from './elements/Divider';
import Flag from './elements/Flag';
import Header from './elements/Header';
import Icon from './elements/Icon';
import Image from './elements/Image';
import Input from './elements/Input';
import Label from './elements/Label';
import { List, Item } from './elements/List';
import Loader from './elements/Loader';
import Rail from './elements/Rail';
import Reveal from './elements/Reveal';
import Segment from './elements/Segment';
import { Step, Steps } from './elements/Step';

// Collections
import Breadcrumb from './collections/Breadcrumb/Breadcrumb';
import BreadcrumbDivider from './collections/Breadcrumb/BreadcrumbDivider';
import BreadcrumbSection from './collections/Breadcrumb/BreadcrumbSection';
import Form from './collections/Form/Form';
import Grid from './collections/Grid/Grid';
import Column from './collections/Grid/Column';
import Row from './collections/Grid/Row';
import Menu from './collections/Menu/Menu';
import Message from './collections/Message/Message';
import Table from './collections/Table/Table';

// Views
import Card from './views/card/Card';
import CardImage from './views/card/CardImage';
import CardContent from './views/card/CardContent';
import CardHeader from './views/card/CardHeader';
import CardMeta from './views/card/CardMeta';
import CardDescription from './views/card/CardDescription';

const RSU = {
    // Elements
    Button, Buttons,
    Container,
    Dimmer,
    Divider,
    Flag,
    Header,
    Icon,
    Image,
    Input,
    Label,
    List, Item,
    Loader,
    Rail,
    Reveal,
    Segment,

    Step, Steps,

    // Views
    Card,
    CardImage,
    CardContent,
    CardHeader,
    CardMeta,
    CardDescription,

    // Collections
    Breadcrumb,
    BreadcrumbDivider,
    BreadcrumbSection,
    Form,
    Grid,
    Row,
    Column,
    Menu,
    Message,
    Table
}
 

리액트 컴포넌트는 다음과 같이 만든다. 1주차엔 시멘트 UI의 css를 적용해서 잘 나오는지만 확인하는 것으로 리액트 컴포넌트의 라이프사이클 메소드를 전부 설정해서 넣는다. 

  - 에어빈앤비의 리액트 코딩 컨벤션에 따라 작성한다. 

  - shouldComponentUpdate 구문은 향후 Immutable.js 사용과 PureRenderMixin의 조합을 고려해 성능을 향상시켜야 한다. 

    이에 대한 좋은 글이 있으니 꼭 읽어보자.  Immutable.js에 대한 연재글 [1], [2], [3]

  - 리액트의 라이프 사이클 코드가 대부분의 컴포넌트에 중복해서 들어 있으므로 이것도 ES6 구문을 위한 리액트의 Mixin 패키지를 사용해 리팩토링해야 한다.

  - classNames( x, y, this.props.className )은 classnames 패키지를 사용해서 <Card className="ui card <상속 className>"> 을 설정해 준다.  

  - <div {...this.props} 를 하면 상위에 설정한다. 모든 key="value" 애트리리뷰트를 그대로 설정해준다. 단, 주의 점은 <div {...this.props} className...> 처럼 사용하면 className은 오버라이딩 된다는 점이다. 만일 <div className={componentClass} {...this.props}> 로 하고 <Card className="dowon" /> 를 사용하면 className={componentClass} 는 적용이 되지 않는다. 즉 태그안에서 중복된 키이면 뒤에 놓은 것으로 설정이 덮어써진다.

import React, { Component, PropTypes } from 'react';
import card from 'semantic-ui-css/components/card.css';
import classNames from 'classnames';

const propTypes = {
	className: PropTypes.string,
};

const defaultProps = {
	className: ''
};

class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  };

  componentWillMount() {};
  componentDidMount() {};
  componentWillReceiveProps(nextProps) {};
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  };
  componentWillUpdate(nextProps, nextState) {};
  componentDidUpdate(prevProps, prevState) {};
  componentWillUnmount() {}

  render() {
    var componentClass = classNames(
      'ui',
      'card',
      this.props.className
    );

    return (
      <div {...this.props} className={componentClass}>{this.props.children}</div>
    )
  };
}

Card.propTypes = propTypes;
Card.defaultProps = defaultProps;
 

학학 다들 컴포넌트 만드는데 저녁 7시를 치닫고 있다. 아 나만 힘들어...

테스트 하기 

만들어진 컴포넌트를 테스트하기 위해 src 폴더 외에 docs 폴더를 만들어 예제를 만든다. 

  - 시멘틱 UI 처럼 폴더 구조를 가지고 각각 index.html파일을 만든다. 

  - 패키지를 사용하는 입장이기 때문에 react.min.js를 넣고 테스트용이기 때문에 <script type="text/jsx;harmony=true"> 해석을 위해 JSXTransformer도 넣었다.

  - 테스트 코드는 Card.js 이면 CardExample.js 로 해서 작성한다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Reactjs Semantic Ui </title>
</head>
<body style="margin-left: 20px; margin-top: 20px;">

    <div id="app"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

    <script src="../../dist/reactjs-semantic-ui.js"></script>

    <script type="text/jsx;harmony=true" src="./CardExample.js"></script>

    <script type="text/jsx;harmony=true">
       // Card

        React.render(
            <CardExample />, document.getElementById('app')
        );

        //

    </script>

</body> 

CardExample.js를 다음과 같다. 

  - import 구문이 안먹는다. 이유 아는분 메세지 좀 주세요. 그래서 render안에 RSU 네임스페이스 제거하고 사용한다. 

  - Card 관련 <div class="xxx"> 설정을 리액트 컴포넌트로 만들어 사용해 본것이다. 

// import { Card, CardImage, CardContent, CardHeader, CardMeta, CardDescription } from 'RSU';

class CardExample extends React.Component {

  render() {
    var Card = RSU.Card,
        CardImage = RSU.CardImage,
        CardContent = RSU.CardContent,
        CardHeader = RSU.CardHeader,
        CardMeta = RSU.CardMeta,
        CardDescription = RSU.CardDescription

    return (
      <div>
        <h3><a href="http://semantic-ui.com/views/card.html" target="_blank">Card</a></h3>
        <Card>
          <CardImage onClick={Alert} src="../assets/images/kristy.png" />
          <CardContent>
            <CardHeader desc="Kristy" />
            <CardMeta>
              <span className="date">Joined in 2013</span>
            </CardMeta>
            <CardDescription>
              Kristy is an art director...
            </CardDescription>
          </CardContent>
          <CardContent className="extra">
            <a>
              <i class="user icon"></i>
              22 Friends
            </a>
          </CardContent>
        </Card>
      </div>
    );
  }
 

이제 테스트를 위해 "npm install -g webpack-dev-server"를 설치하고 실행한다. 실행은 소스 루트에서 한다. 

  - 호출은 http://localhost:8080/docs/views 로 직접 경로를 지정한다. 

결과화면이다. 예들 상단에 시멘틱 UI쪽에 관련 링크를 걸기로 한다. 

앞으로 시멘틱 UI의 자바스크립트 코드를 리액트에 넣고 나머지 부분을 컴포넌트화 해야 한다. 그리고 성능 향상과 중복 코드 제거를 위한 Mixin을 이용한 리팩토링이 필요하다. 그 후엔 패키지 배포. 다음 시간에 다시 2차 헤커톤을 진행하기로 하고 저녁 10시에 종료! 

To Be Continue...

올 하반기는 D3.js를 이용한 차트 라이브러리 만들기를 주된 작업으로 잡고 있다. 데이터 시각화를 위해 SVG를 자유자재로 다루기 위해 D3.js를 심도있게 이해하는 것이 어느 때보다 필요하기 때문이다. AngularJS/React/Meteor 는 데이터 시각화 서비스를 개발하기 위한 기술로 익히고 있다. 마이크 보스톡의 튜토리얼 레퍼런스에 나온 내용중 좋은 기사를 실습 요약한다. 

준비하기 

테스트를 위해 로컬에서 하지 않고 JSBin 서비스를 이용한다. GitHub 계정으로 로그인을 하고 자신이 원하는 테마(Theme)를 아래와 같이 설정할 수 있다. Monokai와 Sublime 키바인딩, FontSize 11로 설정을 했다. "Add library"에서 "D3 3.x" 를 선택하면 HTML에 자동으로 추가된다. 

엘러먼트 선택

D3는 jQuery의 Selector 처럼 Selection(셀렉션)을 통해 문서를 접근할 수 있다. 그리고 선택된 셀랙션에 대해 메소드 체이닝(Chaining Methods)를 통해 제어를 할 수 있다. 체이닝의 이점은 var 를 사용하지 않아도 되고 코드를 간결하게 유지할 수 있다. 

차트 만들기 

HTML로 직접 바차트를 만들 수 있지만 D3를 이용해 어떻게 만드는지 보자. 

코드의 순서는 다음과 같다. 

- var chart  = d3.select('.chart') : selector를 이용해서 Chart container를 선택한다. 

- var bar = chart.selectAll('div') : 데이터 조인 (data join)을 위해 셀랙션(selection)을 초기화 한다. 데이터 조인은 데이터 변경에 따라 엘러먼트를 생성, 업데이트, 삭제할 수 있는 것이다. (자세한 사항은 "Thinking with joins"를 참조한다)

- var barUpdate = bar.data(data) : selection.data를 통해 데이터를 셀랙션과 조인(join)한다. 

- var barEnter = barUpdate.enter().append('div') : 'div' 태그가 .chart 안에 존재하지 않기 때문에 barUpdate는 일어나지 않는다. 없을 경우 새로운 데이터에 대한 임의위치(placeholder)를 만들어 주기 위해 enter()를 호출한 후, 임의위치에 append('div')를 통해 div 태그를 신규 생성한다. 

- barEnter.style('width', ....) : 신규 생성된 div에 대한 스타일을 설정한다. D3에서는 attr(), style(), property()를 통해 엘러먼트를 설정할 수 있다. 

- barEnter.text(...) : 레이블을 설정한다. 

스케일 맞추기 

위의 소스를 보면 width에 대해 10 상수값이 쓰였다. 실제값을 정의역값이라하고 domain(도메인)이라하며, 10을 곱하여 나온 변경된 값을 치역(range)값이라 한다. 수치에 대한 일정한 스케일(Scale)을 만들어 주는 기능이 D3에서는 linear scale 이다. x에 대한 스케일을 만들어 보자.

SVG를 사용해 만들기 

위에 소스는 HTML을 통해 만들었지만 SVG(Scalable Vector Graphics)를 이용해 표현해 보도록 한다. SVG를 사용하면 네이티브 레벨에서 다양한 모양을 만들어 낼 수 있다. HTML에 <!DOCTYPE html> 태그를 최상단에 넣어주고 사용할 수 있다. SVG는 HTML의 일반 스타일이 아닌 다른 스타일 명을 쓴다. 예로 background-color는 fill로 쓴다. SVG 프로퍼티 스펙을 참조한다. 좌표는 top-left 코너에서 시작한다. SVG로만 차트를 표현한 예이다. 

- transform을 이용해 크기의 절대좌표값으로 translate(x, y)를 통해 이동을 하고 있다. 

- g 그룹 논리 태그를 통해 하위에 SVG rect으로 사각형을 표현한다. 

- text 태그를 통해 레이블을 설정한다. 

D3를 이용해 다시 표현해 보자. g 셀랙션은 data 배열 6개 만큼이 생성되어 rect과 text 태그를 통해 바차트를 그린다. 

- x 스케일을 만든다 

- svg 의 크기를 결정한다 

- svg안에 g가 들어가므로 enter selection을 통해 추가하고 transform으로 g 위치를 옮긴다. 

- var bar 값은 data 값 수 만큼의 g 배열을 리턴 받아 rect과 text를 설정한다. rect과 text는 g로 부터 data 값을 받아 사용한다. 

데이터를 불러와서 차트그리기

D3는 TSV(Tab-seperated values)나 CSV(Comma-seperated values)로 파일 형식을 읽어와서 JSON으로 변환해 사용할 수 있다. d3.csv API를 참조한다. 테스트를 위해서 GitHub에 별도 저장소를 하나 만들고 data.tsv 파일을 하나 만든다. (탭으로 구분)

GitHub에 파일을 만들고 파일을 선택하고 "Raw" 버튼을 클릭하면 상단에 접근 주소가 나온다. 

예) https://raw.githubusercontent.com/mobiconsoft/d3_practice/master/data.tsv

사용할 Raw Data 주소이다. 

JSBin에서 TSV 파일을 호출해 보자. 

- 데이터의 갯수를 모르기 때문에 호출후 x.domain 정의역 값을 설정한다. 

- 데이터는 [{name: 'Locke', value: 4}, ....] 와 같이 데이터가 오브젝트이므로 function(d) { return d.value; } 값을 사용한다. 

- tsv 호출시 값에 대한 컨버젼을 하지 않고 전부 string으로 취급하므로 type 펑션은 숫자로 변환하는 유틸이다. 

컬럼 차트로 전환하기 

수평 바차트를 수직 컬럼 차트로 변환해 보자. X축은 이름을 표현하고 Y축은 값을 표현할 것이다. X축과 같이 문자 알파벳으로 표현될 경우는 Ordinal 스케일을 사용해야 하고 치역의 값을 수량적으로 할 수 없기 때문에 자동으로 맞춰주는 rangeBands 또는 rangePoints 를 사용한다. rangeBands/Points는 각 시리즈의 넓이를 의미하고 시르즈(바)간의 padding을 지정해 주고 싶다면 rangeRoundBands를 통해 파라미터를 설정할 수 있다. 

- X축은 이름이기 때문에 Ordinal 스케일이다. 

- bar의 X 스케일 만큼 이동하고, rect의 y점을 지정 후 그린다.

- x.rangeBand()는 바의 넓이를 자동으로 계산해 넘겨준다. 

축 추가하기 

컬럼 차트만 그려지니 썰렁하다. 축을 그려보자. D3는 축을 만들 수 있도록 d3.svg.axis() API를 제공하고, 축의 방향을 설정한 후 기존에 생성한 x, y Scale을 설정한다. 축에 스케일 설정을 하고 SVG의 g 그룹에 축을 설정할 때는 selection.call API를 사용한다. 축을 설정하면 <g class="y axis"> 또는 <g class="x axis"> 클래스가 자동 설정된다. 해당 값은 사용자가 아래와 같이 수정할 수 있다. 

JSBin 코드를 보자.

- SVG 넓이 안에 들어가는 차트를 위한 마진을 설정한다. 

- x, y 스케일을 구한다. 

- x, y 축을 스케일을 적용해 구한다. 

- 차트 영역을 설정하고 차트 셀랙션을 생성한다 

- 데이터가 들어오면 x, y 스케일에 대한 정의역(domain)값을 설정한다. 

- x, y 스케일에 대한 정의역 값이 설정된 후에야 차트 g 그룹에 x, y Axis를 설정할 수 있다. 정의역값이 설정되기 전에 축 설정이 되면 축의 Tick 값이 표현되지 않는다. 

- .bar 클래스를 선택하고 데이터를 조인하면 임의영역(placeholder)가 생성되고, 여기에 rect을 append하여 컬럼을 기존처럼 그린다.  

<참조>

- 원문 : Let's Make a Bar Chart  (보스톡의 소스)   

- SVG 스펙

트위터 부트스트랩을 리액트 컴포넌트로 만들어 놓은 것이 이미 있어서 미티어(Meteor) 에서 사용하는 방법을 알아본다. 

설치 하기 

  - 먼저 미티어 프로젝트 하나를 생성한다. 

  - Twiiter Bootstrap 을 React로 변환해 놓은 것 

    + https://github.com/react-bootstrap/react-bootstrap

    + 사용자 메뉴얼

    + webpack을 사용해 번들을 만들었다.

  - react-bootstrap을 미티어의 패키지를 설치한다

   + https://atmospherejs.com/firfi/meteor-react-bootstrap (설명서)

   + package.js 를 추가해서 미티어의 패키지로 만들고, atmosphere에 배포했다. 

Package.describe({
  name: 'firfi:meteor-react-bootstrap',
  version: '0.0.4',
  // Brief, one-line summary of the package.
  summary: 'React-bootstrap port for Meteor',
  // URL to the Git repository containing the source code for this package.
  git: 'https://github.com/Firfi/meteor-react-bootstrap',
  // By default, Meteor will default to using README.md for documentation.
  // To avoid submitting documentation, set this field to null.
  documentation: 'METEOR.md'
});

Package.onUse(function(api) {
  api.versionsFrom('1.0.5');
  api.use('reactjs:react@0.2.1');
  api.use('twbs:bootstrap@3.3.4', 'client');
  api.addFiles('dist/react-bootstrap.js');
  api.export(['ReactBootstrap']);
});

Package.onTest(function(api) {

  - 미티어에 리액트를 사용하기 위한 공식 패키지를 설치한다. 

사용 하기 

  - FlowRouter와 ReactLayout을 설치한다. 

  - 리액트 문구가 들어 있는 파일의 확장자는 .jsx가 되어야 한다. test.jsx 파일을 하나 만들고 다음과 같이 탭을 사용한다. 

    + ReactBootstrap 이 글로벌 변수이다. 

    + 리액트 컴포넌트 (App)는 미티어에서 글로벌 변수여야 한다. 

  - Flow Router를 설정한다. 

  - 탭 결과 화면이 출력된다.

오류 해결

  - 크롬 DevTools에 React extension을 설치하고 결과를 보면 다음과 같이 <Unknown> 태그가 나온다. 

 - <Unknown>을 제거하기 위해 displayName을 지정한다. 

<참조>

  - npm을 미티어에서 직접 사용하고자 할 경우 meteorhacks:npm의 설정 가이드

서비스를 개발할 때 만들어 놓은 CSS 프레임워크를 사용한다면 보통 트위터 부트스트랩을 많이 선택한다. 앵귤러 프레임워크를 사용할 때 트위터 부트스트랩을 앵귤러 컴포넌트로 만들어 놓은 모듈을 사용하는데, 리액트에서는 어떤 것을 사용할 수 있는지 정리해 보자. 

트위터 부트스트랩

- http://react-bootstrap.github.io/

  + v1.0.0 이 릴리즈 되었다. 

  + 부트스트랩의 기능을 충실히 구현

머터리얼 디자인

- http://material-ui.com/

  + 구글의 머터리얼 디자인을 충실히 구현

  + 모바일 first 디자인

그외 프레임워크 

- http://elemental-ui.com/

  + 가장 기본적인 부분들을 리액트 컴포넌트로 제공

- http://nikgraf.github.io/belle/

  + elemental-ui와 유사

- http://semantic-ui.com/

  + 리액트 컴포넌트로 만들어져 있지 않지만 앞으로 만들어 보고 싶은 css 프레임워크

  + v1.* 보다 다양한 실용적인 Theme을 제공하고, 컴포넌트가 다양하다. 

  + 향후 직접 React UI Component로 만들어 사용할 예정!

모바일 전용 프레임워크 

- http://touchstonejs.io/

  + ionic 의 css 와 유사하게 native 느낌을 준다. 

<참조>

- 리액트 12가지 css 프레임워크

- 리액트로 만든 관리자 화면 예제 : ClojureScript를 사용해서 React 컴포넌트를 개발했음

- 다양한 React UI Components 목록

Meteor는 Modern Application Platform이기도 하면서 Reactive Manifesto에서 이야기하는 User Responsive를 위한 Resilient와 Scalable을 갖추고 있다. 그래서 Meteor를 Realtime Modern Application을 위한 Reactive Platform이라 이야기를 해도 좋을 것 같다. 하지만 정작 Reactive라고 이야기를 해놓고 Reactive의 개념이 와닿지 않는 것은 거시적, 미시적 이해가 없기 때문이다. 최근에 각광 받고 있는 AngularJS는 Reactive Templating을 지원한다. Reactive라 붙일 수 있는 이유는 Reactive Programming에 대해 위키에서 찾아보면 액셀 예를 통해 어떤것을 의미하는지 이해를 할 수 있다. 다수의 b가 a를 의존할 때 a의 변화에 b가 종속이 되고, 옵저버 패턴(Observer Pattern)으로 보면 다수의 의존하는 Observer(소비자)가 데이터를 제공하는 Observerable(생산자)에 의존하는 것으로 a에 상태변경(이벤트 발생)에 대해 b에도 상태값을 알려주는 구조이다. Reactive Programming(RP)의 관건은 Asynchronous Data Flow관점에서 프로래밍을 하고 Functional Reactive Programming으로 오면 filter, map, reduce와 같은 블럭을 통해 Reactive Programming을 한다. 

리액티브 프로그래밍(RP)은 비동기와 이벤트 기반의 데이터 스트리밍(Asynchronous and Event-based Data Streaming)을 Observable Sequences로 변환해 개발하는 프로그래밍 방식이다.

Reactive 거시적, 미시적 이해

  Reactive Manifesto 의 내용을 이해할 필요가 있다. 왜 Reactive 해야 하는지 이유는 본 글에 잘 설명되어 있다. 현재는 인터넷 보급과 모바일 기기의 보급으로 365일 24시간 무정지의 끊김없는 빠른 서비스를 제공해야 한다. 이를 위해서는 장애(Failure)에 빨리 복구(Resilient)되고, 서비스의 수평적 확장이(Scalable) 용이해야 하며, Resilient와 Scalable 바탕에는 느슨한 결합(loose coupling)의 메세지 기반(Message Driven) 아키텍처가 기반이 되어야 한다. 

  - Responsive를 위한 Resilient와 Scalable 및 Message Driven에 대한 이야기

  - NDC에서 김종욱님이 발표한 RX와 Functional Reactive Programming 이야기 (원문)

    + 엔시소프트 리니지 서버의 Rx 적용 경험 공유

    + 2009년 MS 에서 Reactive eXtension 소개

    + 2011년 RxJS, 2012년 RxJava등이 나오고 현재는 RxSwift도 존재함 

  - 2013년 Infoq에 발표한 Reactive programming의 동향

    + 코세라에서 Scala 기반 오픈 강의 개설(Scala 창시자와 Rx 개발자가 직접 강의함) : Principles of Reactive Programming

    + Netflix에서는 RxJava 기반으로 광범위하게 개발을 하고 있다. 

    + Facebook은 ReactJS를 오픈소스화하고 페이스북 웹과 인스타그램 웹에 사용하고 있다.

    + Javascript 기반의 Bacon.js, Kefir.js, RxJS, Reactive.js 라이브러리를 타 프레임워크와 접목해서 사용할 수도 있다. 

  - Microsoft에서 이야기하는 Reactive eXtension 정의

  - 다양한 언어의 구현체는 ReactiveX(http://reactivex.io)에서 볼 수 있다.

  - 확장가능하고 병행처리 가능한 웹 아키텍쳐 구축하기

  - Observable에 대한 이해

    + 2분만에 이해하는 Observable : Rx is the underscore.js for events

    + FRP 연산자들에 대한 Sync와 Async에 대해 시뮬레이션 예제를 통해 보여준다. (슬라이드, DevNation)

    + ReactiveX.io의 설명

       Observer는 Observable에 subscribe하고 onNext, onError, onCompleted를 Observer에 구현하면 이를 Observable이 호출

       onNext에는 emit 한다고 말하고, onError, onCompleted는 notification한다고 말함.

    + MS의 Reactive eXtension의 워크샵 (동영상)

  - Observable에 대한 기본 개념 

  - ReaciveX를 위한 Operators 종류

    + 언어별로 동일 연산자를 가진다. 

    + Create Observable, Transform Observable, Filtering Observable, Combining Observable, Error Handling, Utility, Conditional & Boolean ...

    + Operator사용을 위해서 Decision Tree의 내용을 숙지해 보자. 

Reactive Programming for JavaScript

  먼저 RxJS를 이용한 Reactive Programming에 대한 이해를 선행한 후에 FRP(Functional Reactive Programming)에 대한 이해를 위해 learnrx의 FRP 개념 이해를 위한 실습을 전부 따라해 본다. 

  - Javascript의 Sync처리와 Asynch 처리에 대한 이해를 뭔저 해본다. 동영사의 21분에서 forEach가 Sync, Async 처리 되는 과정을 이해.

   + Event-Loop 와 Call Stack, Task Queue 관계 시뮬레이션 (21분경에 나옴)

  - 예제들이 ES6 기준으로 되어 있는 경우가 많아 ES6 문법을 공부하자

    + Depth in ES6 이해 요약정리

  - Functional Reactive Programming (FRP) 에 대한 개념을 이해하자. 

    + Functional Programming 과 Reactive Programming의 결합 === Functional + Async Data Stream (Data Flow) 

  - Frontend Developer 입장에서 본 RxJS에 대한 기본 개념 이해 

    + Array에서 제공하는 map, filter, reduce는 할 때마다 다시 배열을 할당한다.(learnrx를 따라해보고 이해하자) 따라서 GC에 대한 이슈존재

    + RxJS의 Observable을 사용할 경우 배열 재할당이 없으므로 GC에 대한 이슈도 없다. 

  - RxJS의 깃헙 Readme를 읽자

  - RxJS 학습하기 

    + egghead.io의 RxJS 강좌와 Asynchronous 강좌를 본다.

    + RxMarbles : Rx를 다이어그램으로 보여주어서 시각적 이해를 돕는다

    + RxJSKoans 학습

    + RxJS GitBook 책을 읽자 (그외 RxJS 레퍼런스)

  - RxJS를 이용한 FRP API 소개 : 맨뒤의 참조 목록을 방문하자 

<참조>

  - React & Bacon 예

  - Neflix API를 사용해 Reactive Programming하기

  - Reactive Programming using RxJS

  - Observable 과 Promise의 차이점

  - Reactive Extension in MS

  - Rx 관련한 대부분의 자료 모음

  - RP and MVC 예제

2013년 이맘때 미티어를 처음 접하고 클라이언트와 서버 사이에 데이터베이스가 있다는 것이 이해되지 않았다. 그 의문이 이번주 스마트링크의 스터디를 하며 조금씩 해소되는 느낌이다. 이제는 Modern Application Platform의 큰 흐름에서 Runtime이라는 주제를 놓고 볼 때 미티어는 단연 앞선 플랫폼이고 한 분야를 리딩할만한 플랫폼이라 여겨진다. 그속에 많은 사상과 기술이 녹아있다. 미티어를 한주 안에 파악해 보기 위해 다음의 과정을 밟아보길 권한다. 

Meteor 넌 뭐니?

  - 스터디에서 발표한 내용의 동영상이다. 

    + Realtime을 근간으로 Collaboration과 Share를 위해 잘 갖추어진 Modern Application Platform 이다. 

    + Reactive 영역을 프론트엔드에서 백앤드로 확장해 기술셋을 잘 구비해 놓았다.

    + 프론트앤드 리액트 템플릿엔진 : Blaze, AngularJS, ReactJS를 사용할 수 있다. 

    + 백앤드 리액트 기술 : Full Stack DB Driver = DDP + Client mini DataBase + LiveQuery 를 갖추었다. 

Modern Application Platform 으로서 Meteor 

  "Realtime 애플리케이션을 위해 프론트/백앤드 개발을 동질로 리액트하게 할 수 있는 플랫폼을 제공해 보자" 이게 그들의 머릿속을 스친 생각이 아니었을까? 리액티브 프로그래밍을 이소모픽하게 제공한다면 View 와 Data에 대하 부분을 리액티브하게 처리할 수 있다면... 아마 미티어 개발자들은 신이 나지 않았을까 싶다. 그래서 그와 관련된 회사들을 M&A하고 개발자를 영입해서 오늘의 1.* 미티어라는 리액티브 플랫폼을 완성해 가고 있다고 본다. 미티어를 리얼타임 플랫폼을 하는 마이크로 서비스로 보고 외부 시스템과 연계는 몽고디비를 통해 한다면 다양한 연동이 가능할 것이라 생각한다. 

  이중 DDP를 통한 React Native로 DDP Client를 사용하는 방법이 있는가 하면 

<참조> 

  - JavaScript.isSexy에서 이야기하는 Meteor 배우는 방법

Flux는 페이스북이 ReactJS를 보다 더 큰 애플리케이션에 적용하기 위해 만든 아키텍처이다. 그러기 때문에 페이스북 웹 서비스와 인스타그램에도 적용되어 사용되고 있다. 하지만 처음 접하는 개발자에게는 생소한 패턴이고 새로운 용어들이 난무한다. Flux를 제대로 이해하기 위해서는 먼저 ReactJS의 데이터 흐름을 이해한 후 Flux를 보면 도움이 된다.  

Flux 넌 뭐니?

스터디에서 발표한 Flux 패턴에 대한 설명 동영상을 보자. 1시간 가량의 발표 및 토론 내용이다. 1주일동안 짬을 내어 Flux 예제 소스를 분석해 보았고, Flux 내의 Action, Dispatcher, Store, View 간의 데이터 흐름과 각각의 역할에 대해 살펴보고 있다. Flux를 이해하고 싶다면 본 예제를 돌려보고 설명하는 흐름에 따라 개념을 잡아보자. 

  - CartApp 예제에 대한 원본 글

  - CartApp 데모

발표한 내용의 PPT 자료도 동영상을 보며 살펴보자 

   - Flux 아키텍처에 대한 원본 글 

AngularJS에서 Flux 아키텍처 적용하기 

Flux는 아키텍처이고 사상일 뿐이다. 따라서 AngularJS에서도 당연히 적용해 볼 수 있다. 

  - AngularJS에서 Flux 적용하기 예제

참조 

  - Cart 소스 

  - ReactJS 개념 및 에코 시스템 이해하기 (스마트 링크 팀블로깅)

  - AngularJS vs ReatJS 이해하기

  - Flux 패턴 구현체들 (Fluxxor)

  - Flux pattern 설명

  - Flux를 이용한 Note App 예제

  - SlideShare: ReactJS와 Flux에서 데이터 흐름 설명 

  ECMAScript는 자바스크립트의 토대를 구성하는 스크립트 언어 명세이다. ECMA는 "Europen Computer Manufacturers Association"의 약어로 국제 표준화 기구이며, ECMAScript는 ECMA-262, ECMA-402 스펙안에서 표준화되었다. ECMAScript 3.0이 1999년 발표된 이래로 ECMAScript 5.0 이 2009년 발표되고 5.1이 2011년 그리고 마침내 ECMAScript 6.0이 2015년 6월 공표되었다. 모던 브라우저가 대부분 ECMAScript 5.0  을 지원하 있고, 현재 브라우저가 5,6,7 버전들에 대해 어느 범위까지 지원하는지 테스트 해볼 수 있다. 

  Angular 2는 TypeScript를 기반으로 개발되고 있고, TypeScript는 ES6를 포함해 별도의 추가 기능을 포함한다. ES6 기반으로 애플리케이션을 개발할 경우 BabelJS를 통해 ES5로 컴파일할 수 있다. 따라서 ES6에 대해 알아보고 필요한 문법을 사용한 후 애플리케이션 배포시에 ES5로 적용로 한다. Babel 사용을 자동화 하기위해 Browserify또는 Webpack을 사용하거나 Grunt/Gulp를 사용할 수도 있다.  

기초 문법 익히기

  - 문법을 보기전에 드미트리 소스니코드의 설명을 잠시 훑어보자

  - ECMAScript 6에 새롭게 추가된 기능 알아보기

  - ECMAScript 6를 5와 비교해서 실습하기 

  - Exploring JS ES6 무료 서적

ECMAScript 5 전환 자동화하기

  - Babel을 Browserify와 연동하기, Babel을 Browserify+Gulp 연동하기

  - Babel을 Webpack과 연동하기

  - Babel을 Gulp와 연동하기

  - Babel을 Grunt와 연동하기

참조 

  - ECMAScript 6.0 스펙  (PDF)

  - ECMAScript 버전별 자료

ReactJS(리액트)는 자바스크립트로 UI 컴포넌트를 만드는 프레임워크이다. 만들어진 컴포넌트를 사용할 수도 있고, 수정할 수 있고, 조합할 수 있으며 자신만의 UI 컴포넌트를 직접 만들 수 있다. 즉 프론트앤드 UI의 화면을 컴포넌트 조합으로 만들고, 화면의 데이터를 앵귤러처럼 자동 업데이트 해주지만 앵귤러와 틀리게 단방향 데이터 바인딩이다. 리액트는 앵귤러(AngularJS)의 지시자(Directive)와 비교되지만 훨씬 간단하고 성능 또한 월등하다. 이제 배우고 익혀 사용할 때가 되었다. 

개념잡기 

  - 쿼라(Quora)에서 이야기하는 장/단점을 살펴보자. 

     장점

       + Virtual DOM 을 JS로 구현해서 UI 컴포넌트의 속도가 엄청 빠르다. 

       + Component의 재사용과 복잡한 UI 컴포넌트 조합이 가능하다.

       + Uni-direction(단방향) 방식하에 데이터가 변경되면 관련된 모든 UI 컴포넌트가 변경된다.

       + commonJS / AMD 패턴과 잘 조합되고, 크롬 익스텐션을 통해 디버깅할 수 있다. 

     단점

       + 초보자들에겐 역시 러닝 커브가 존재한다.

       + 다른 프레임워크가 동작하기 위해선 부가적인 작업들이 필요하다. 

       + 앵귤러처럼 router, model등 Frontend Full Framework을 제공하지 않아서 꼭 다른 프레임워크와의 조합이 필요하다. 

  - 처음에는 무조건 공식 홈페이지의 가이드를 보자. 

      + Quick Start

      + Advanced Guides

      + Reference

  - 프리젠테이션으로 정리해 보자. 재미있게 진행되니 WTF는 날리지 말자.

    + jQuery to React 가이드

       내용중에 앵귤러를 사용하고 있는 개발자라면 앵귤러의 지사자에서 scope: { createXXX: '&' } 방식으로 자식의 부모의 함수를 호출 할 수 있다

       그리고 자식, 부모간에 scope 객체의 상속을 통해 scope 속성을 접근할 수 있다는 것도 알 수 있다. 

    + Flux 소개 아래 영상을 보면 react가 Virtual DOM을 통해 더 낳은 성능과 단순성을 통한 버그 가능성 제거를 이룰 수 있는지 가늠할 수 있다

       * Flux 사이트

AngularJS SPA 형태 개발을 진행할 때 AMD(Asychronous Module Definition)에 대한 고려를 하지 않고 있다. 계속해서 확장 되어야 하는 애플리케이션을 개발한다면 AMD를 염두에 두자. 하지만 AMD가 아니라 앵귤러 스러운 모듈단위의 동적 로딩을 하고 싶을 경우 어떻게 하는지 Smart Analytics 관점에서 컨셉을 테스트해 보자. 

개념 

  - CommonJS : exports, require, module을 통한 서버사이드 자바스크립트 모듈화 스팩이고 Node.js에서 많이 사용함

  - AMD : 브라우져에서 모듈화에 대한 스팩. 가장 많이 쓰는 구현체 require.js  를 통한 자세한 사용예(NHN)

    + 특징 : 동적 로딩, 의존성 관리, 모듈화 

    + define을 통한 모듈 패턴을 적용하여 모듈을 만든다

    + require를 통해 의존관계 모듈들을 주입받아 사용한다. 

  - AngularJS는 모듈화와 DI 즉, 의존성 주입을 가능하게 하고, RequireJS는 JS 파일의 의존성을 관리하고 동적 로딩을 통한 성능 최적화를 얻는다. (참조)

Smart Analytics에서 바로 보는 동적 로딩 시나리오

  ElasticSearch의 Kibana는 엘라스틱서치의 데이터를 자유롭게 표현할 수 있는 대시보드 소프트웨어이다. AngularJS + Require.js를 사용하고 있다. 하지만 좀 더 AngularJS 스러운 방식으로 앵귤러 모듈을 필요한 시점에 동적으로 할 수는 없을까? 화면이 라우팅될 때 또는 필요한 시점에 필요한 모듈만 로딩할 수 있도록 지원하는 앵귤러 컴포넌트로 ocLazyLoad 모듈이 있고 이를 이용하여 대시보드 화면에 국한하여 시나리오를 써보자

  - 사용자가 로그인을 하면 사용자마다 할당 된 대시보드 목록을 가져오고 첫번째 대시보드를 브라우저 영역 전체화면으로 보여준다.

  - 대시보드에는 사용자가 직접 제작한 차트가 보이고 해당 차트는 별도의 파일로 존재하고 앵귤러의 독립 모듈로 존재한다. 따라서 대시보드안에 들어가는 차트들은 플로그인 방식으로 동적으로 로딩되어 대시보드 일부분에 포함되어 들어가야 한다. 

  - 그러나 사용자가 직접 제작하지 않고  저작도구를 통해 제작한 차트는 별도의 파일로 존재하지 않고 환경값을 서버로 부터 받아 차트 컨테이너에 자동으로 해석되어 표현된다. 

  여기서 동적으로 로딩되어 표현할 것은 직접 별도로 제작된 차트를 대상으로 하고, 별도의 파일로 존재한다. 해당 파일은 로컬 또는 네트워크를 통해 로딩 될 수 있어서 다양한 차트 화면을 대시보드로 수용할 수 있다. 마치 플러그인 방식으로 대시보드 운영 서버의 재기동 없이도 플러그인을 설치하기만 하면 자동으로 대시보드의 특정위치에 차트가 표현되는 것이다. 

   - chart-config.json + chart-container를 통해 차트를 자동으로 표현하거나

   - 로컬에서 사용자가 직접 제작한 bizChart01.js 파일을 동적으로 로딩해서 표현하거나, bizGrid01.js를 원격에서 동적 로딩하는 개념이다. 

ocLazyLoad 기반 앵귤러 모듈의 동적 로딩

  ocLazyLoad 모듈을 이용해 파일 로딩하는 예를 보자. 설치하고 모듈 의존성 설정

  ocLazyLoad 모듈을 위한 별도의 서비스를 /app/components/base/pluginer 폴더에 만들어 보자. pluginer 앵귤러 서비스를 base 모듈에 포함시키기 위해 먼저 base.module.js를 만든다. 

  pluginer.service.js는 $ocLazyLoad를 통해 지정한 파일의 모듈을 로딩해서 사용할 수 있고 promise 패턴을 통해 비동기적인 상황에 대응한다. 다음으로 플러그인을 하나 만들어 보자. 우선 client 밑에 plugins 폴더를 만들고 index.html에 포함되지 않는 *.js / *.css / *.jpg(png) 등을 놓는다. plugin.bizchart01이라는 별도의 모듈을 만들고 bizchart01 서비스를 만든다. 

  이제 pluginer 서비스를 통해 plugin.bizchart01 모듈을 필요한 시점에 로딩을 하고 bizchart01 서비스의 draw() 를 호출해서 출력해 보자. sa.base 모듈을 app.js에 의존관계를 설정하고 app/main/main.html 를 바꿔보자. 

  pluginer를 통해 "plugins/bizchart01/bizchart01.js" 에 있는 "plugin.bizchart01" 모듈을 로딩하고, $injector를 통해 "bizchart01" 서비스를 얻어와 draw()를 호출했다. 이를 확인할 수 있는 것은 크롬의 개발자 도구에서 브라우저에서 로딩 링크를 클릭했을 때 실제로 bizchart01.js 파일을 호출하는지 보면 된다. 

1) "Load Module"를 클릭한다. 

2) 크롬 개발자 도구의 Nework에서 "Load Module" 링크를 클릭시 bizchart01.js을 요청하는지 확인한다. 

이제 별도의 차트를 앵귤러 모듈로 만들어서 필요한 시점에 로딩할 수가 있다. 이외에도 ui-router를 통해 partial view가 변경될 때도 가능하고 다양한 예제는 ocLazyLoad를 참조한다. 

테스트 소스 : https://github.com/Smart-Analytics/prototyping/tree/feature/lazyloading

<참조>

  - CommonJS와 AMD 개념 비교 (NHN)

  - AMD : require.js 사용예

  - Node.js와 브라우져 사용예 (Mobicon)

  - ocLazyLoad GitHub

NMF(non-negative matrix factorization) 기법을 소개한다. 이 기법은 데이터내에 독립된 특성을 찾는데 사용한다. 많은 데이터 세트 내의 항목들은 미리 알기 어려운 다른 특성들과의 조합으로 생성되고 이러한 특성을 찾아 본다. 

이전 분류 방식

  - 베이지안 분류기 (Classification)

  - 의사결정트리

  - 지지벡터머신(SVM)

  - 군집 (Clustering)

비음수 행렬 인수분해 (NMF)

  - 행렬 준비 

    + 특성 행렬(feature matrix) : 가로줄에 각각의 특성을 가졌고 세로줄에 단어, 값들은 단어 특성의 중요도

    + 가중치 행렬(weights matrix) : 가로줄 타이틀, 세로줄 특성

    + 행렬 만들기 = 특성 행렬 * 가중치 행렬

  - 비음수 행렬 인수분해라 불리는 이유는 음수가 아닌 특성과 가중치를 리턴하기 때문이다. 모든 특성은 양수 값을 가져야 함을 의미한다.

  - 단어 출현 횟수와 같은 명사류 데이터뿐만 아니라 주식시장 데이터와 같은 숫자 데이터 문제에도 잘 어울린다.

  - 진행 : 행렬 준비 -> NMF 실행 -> 결과 출력    

     * 특성을 나누는 행렬을 만들고 필요없는 특성을 제거하면서 원하는 차원을 줄여서 원하는 것을 종합적인 결과를 출력함

<참조> 

 - 얼굴 인식

 - PCA, NMF

<참조>

- 파이썬 가상환경 만들기

선형 분류기 개념과 지지벡터머신(SVM, support-vector machines)에 대해 알아본다. 데이트 매칭에 데이터를 기본으로 알아봄. 

데이터 세트 

  - 데이터 분할에서 의사결정트리는 세로, 가로 직선으로 고지식함

  - 산포도(scatter plot chart)를 통해 도움받음 

기본 선형 분류

  - 산포도에서 각 범주(class) 내 모든 데이터들의 평균을 찾고 그 범주의 중앙을 나타내는 점을 만듦 (그림. 9-4)

  - 일치분류를 위해 백터의 각도를 계산해서 작으면 일치, 크면 불일치 (그림. 9-6)

  - 백터내적(dot-product) : 벡터와 벡터의 방향/크기 비교 

분류 데이터의 특성

  - 데이터 정규화 (Data Normalization)

  - 숫자로 변형 -> 예/아니오(1/-1), 관심/비관심(0/1) : 사람 쌍을 다룰 때 유용 

  - 공통 관심의 수, 모든 관심을 포용할 새로운 변수를 만듦

  - 거리 데이터 구함

  - 각 변수에 대한 축적(scale)을 조정함 : 최대/최소값 

커널 기법 이해

  - 커널 트릭 : 차원을 높이지 않고 차원을 올리는 효과를 거둠. 

  - 펑션을 통해 원하는 값을 구함 : 방사 펑션 (RBF: radial basis function)

지지 벡터 머신 (SVM)

  - 각 범주에서 가능한 멀리 떨어진 선을 찾아 해결하려고 시도한다. 비선형을 극복 (non-linear)

  - 먼저 범주를 나눈다 이때 커널 트릭을 사용해서 구하고 이것이 차원이 된다. 각 차원 즉 범주의 사이의 초평면(hyperplane)을 만든다. 

  - 해당 초평면에 근접한 것들이 매칭하는 것이다.  (그림. 9-10)

<참조> 

  - 내적 공간

  - 서포트 벡터 머신(한글), 서포트 벡터 머신 공식(영어)

  - 초평면

  - LIBSVM 라이브러리 

  - 정규화