지난 번 다이어그램을 많은 분들이 좋아해 주셔서 감사합니다. 발표 자료를 위해서 정리하다가 수정할 것이 보여서 추가/이동했습니다. 패키지 매니저와 Full Stack 카테고리를 추가했습니다. 


브라우저를 탈출한 자바스크립트로 할 수 있는 영역이 넓어지고 있습니다. 자바스크립트 세상의 돌아가는 이치를 알려면 어느 게 어떤 용도인지 알 필요가 있습니다. 그래서 한 번 정리해 보았습니다.


다이어그램의 오류나 추가 사항 감사히 받겠습니다.



## 유틸리티 모듈

  * 다른 프레임워크에서 가져다 쓰는 공공재

## 프레임워크 

  * 범용 : 웹 페이지에 많이 적용된 것

  * MVC : 모델,뷰,콘트롤러 코드를 용도에 맞게 파일을 분리해 놓은 프레임워크, 화면처리 전용, 비즈로직 전용 파일, 두 가지를 엮어주는 콘트롤러 코드

  * Full Stack : 클라이언트와 서버 사이드 모두 지원하는 JS 프레임워크

## 백엔드

  * 탈 브라우저 JS 기술, 자바스크립트는 브라우저에서만 동작한다는 편견을 버리고 갈께요. 

  * Java, .NET 기술과 경쟁. 

  * 2014/02 현재 59,000가지 플러그인 등록됨. http://npmjs.org

## 빌드 도구

  * 자바스크립트 용량을 줄이고, 하루패드(https://github.com/rhiokim/haroopad) 같은 애플리케이션을 자동으로 컴파일 해주는 도구

## 패키지 매니저

  * 모듈을 제공해주는 플랫폼

## 그래픽

  * 시각화 엔진

## 테스트

  * 자동으로 테스트를 해주는 프레임워크

## 파생 언어

  * 자바스크립트 해석기로 동작하지만, 자바스크립트와 문법이 다른 언어

## 데이터베이스

  * NoSQL에 포함되는 JSON 형식의 자바스크립트 기반 데이터베이스



jQuery 소스 1.11.0 버전의 소스는 약 10,000 라인입니다.

한 줄 한 줄 살펴 보기보다는 전체적인 맥락을 살펴 봤습니다.


다음과 같이 시작합니다.

(function (g, f) {}(window, Function));


CommonJS의 모듈을 따르는 부분이 나옵니다. 이 가운데 체크하는 것이 있는데, jQuery의 용도를 명확히 얘기합니다.

"jQuery requires a window with a document"

                if (!w.document) {
                    throw new Error("jQuery requires a window with a document");
                }

Function 부분은 jQuery의 본체입니다.

기억에 의하면 4부분 정도가 생각납니다.

1. Selector(Sizzle 이용)

2. Event

3. Tween

4. ajax


이클립스의 JS Outline은 다음과 같습니다.



update doc: http://okjsp.tistory.com/1165644305


정리를 시작했습니다.

브라우저를 탈출한 자바스크립트가 일을 내고 있기 때문에 자바스크립트 세상의 돌아가는 이치를 알려면 어느 게 어떤 용도인지 알 필요가 있습니다.

다이어그램의 오류나 추가 사항 감사히 받겠습니다.









## 유틸리티 모듈

* 다른 프레임워크에서 가져다 쓰는 공공재

## 프레임워크

 * 범용 : 웹 페이지에 많이 적용된 것

 * MVC : 모델,뷰,콘트롤러 코드를 용도에 맞게 파일을 분리해 놓은 프레임워크, 화면처리 전용, 비즈로직 전용 파일, 두 가지를 엮어주는 콘트롤러 코드

* Full Stack : 클라이언트와 서버 사이드 모두 지원하는 JS 프레임워크

## 백엔드

* 탈 브라우저 JS 기술, 자바스크립트는 브라우저에서만 동작한다는 편견을 버리고 갈께요. 

* Java, .NET 기술과 경쟁. 

* 2014/02 현재 59,000가지 플러그인 등록됨. http://npmjs.org

## 빌드 도구

* 자바스크립트 용량을 줄이고, 하루패드(https://github.com/rhiokim/haroopad) 같은 애플리케이션을 자동으로 컴파일 해주는 도구

## 패키지 매니저

* 모듈을 제공해주는 플랫폼

## 그래픽

* 시각화 엔진

## 테스트

* 자동으로 테스트를 해주는 프레임워크

## 파생 언어

* 자바스크립트 해석기로 동작하지만, 자바스크립트와 문법이 다른 언어

## 데이터베이스

* NoSQL에 포함되는 JSON 형식의 자바스크립트 기반 데이터베이스



Thanks to

Outsider, Brian Choi, 에반젤리™, 망고한량


## 소스

http://code.jquery.com/jquery-1.11.0.js


http://jsbeautifier.org 에서 정리


## 전체 구조

(function(g, f){console.log(g + f)}(3, 4));
7


## functions and prototypes



### init

    // Give the init function the jQuery prototype for later instantiation

    init.prototype = jQuery.fn;

### Tween.prototype.init

    Tween.prototype.init.prototype = Tween.prototype;


### Sizzle



### setFilters



### jQuery.fn.init



### jQuery.Event



### Tween






아키텍트를 꿈꾸는 사람들에게 추천하는 책이 두 권 있습니다.
Software Architecture in Practice (번역본 소프트웨어 아키텍처 이론과 실제, 에이콘출판사)
Documenting Software Architecture (제니퍼소프트 김성조 이사님의 베스트라고 들었습니다)
이 중에 번역된 소프트웨어 아키텍처 이론과 실제는 번역자들이 가방끈이 특이합니다.
소프트웨어 공학에 대해서 가장 유명한 곳이 SEI입니다. 삼성계열 아니구요. Software Engineering Institute 입니다. CMMI의 C, 즉 카네기멜론 대학과 연계된 곳이죠. 번역자 7분 모두 SEI의 코스를 밟으신 것입니다. 
김정호, 송재하, 이석준, 박미율, 방정욱, 노구율, 송창선 옮김
책에 있는 순서를 적었는데 가나다 순 아닙니다. ^^; 어떤 순서인지 잘 모릅니다만, 오늘 만난 분은 김정호 님이었습니다.

굉장히 겸손하게 말씀을 하셔서 제가 많이 부끄러웠습니다. 제가 굉장히 많이 나대었으니까요. 제가 아는 겸손은 뒤로 빼는 것을 말하지는 않습니다. 아는 것을 안다 하고 모르는 것을 모른다 인정하는 것이 겸손이라고 들었습니다. 김정호님은 정말 그 말에 딱 맞는 분이셨습니다.

모처럼 기분 좋은 만남이었습니다.



"규모가 크고, 불규칙하게 구성된 웹 사이트는
사이트에 있는 모든 이미지를 관리하는 것처럼 사소하게 보이는 것도
완전히 복잡하게 될 수 있다."
from: eBay의 이클립스, Part 1

작은 사이트를 운영하는 일도 시간이 흐르면 복잡해집니다. 하물며 웹에서 비즈니스를 벌이는 사이트의 복잡도는 얼마나 크겠습니까. eBay와 유사업종인 인터넷쇼핑몰에서 근무하는 저도 비슷한 문제로 골머리를 앓고 있습니다. 저희 팀원들도 마찬가지입니다.

이클립스의 IDE 기능과 플러그인을 직접 만들어서 업무에 적용하는 방법은 꼭 배워보고 싶습니다. 국내에도 그렇게 하시는 개발자들이 있으리라 생각되는데, 이렇게 공유하는 글이 나왔다는 것은 아주 감사한 일입니다.

related:
http://www.ibm.com/developerworks/kr/library/os-eclipse-ebay1/index.html?ca=drs-kr
 

+ Recent posts