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


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


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



## 유틸리티 모듈

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

## 프레임워크 

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

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

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

## 백엔드

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

  * Java, .NET 기술과 경쟁. 

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

## 빌드 도구

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

## 패키지 매니저

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

## 그래픽

  * 시각화 엔진

## 테스트

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

## 파생 언어

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

## 데이터베이스

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



C-s


맨 처음 가려면

M-<


맨 마지막 

M->

var $a = a || document;


var $a

if (a !== undefined 

    && a !== false 

    && a !== null) {

  $a = a;

} else {

  $a = document;

}

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은 다음과 같습니다.



Backbone.js:


AngularJS

  • 홈페이지
  • 튜토리얼 http://docs.angularjs.org/tutorial
  • 라이선스 MIT License
    • Code licensed under the The MIT License.
    • Documentation licensed under CC BY 3.0.
  • 의존성
    • 없음
  • 특징
    • 웹 애플리케이션을 위한 개선된 HTML
    • 기본
      • 데이터 바인딩, 콘트롤러, 순수 자바스크립트
    • 백엔드와 연결
      • 깊은 링크, 폼 검증, 서버 통신
    • 컴포넌트 생성
      • 디렉티브, 재사용 컴포넌트, 지역화





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, 에반젤리™, 망고한량


Java, C, C++, Clojure, 등 여러 언어와 Dart 언어의 특징을 비교해서 설명합니다.



http://www.infoq.com/presentations/dart-introduction

복사하기


C-a: 커서 줄 앞으로

C-SPC: 선택 시작

C-n: 커서 줄 끝으로

M-w: 영역 복사

C-y: 붙이기


M(meta key)은 ESC 누르고 나서 다음 키(w) 입력입니다.

참고: http://stackoverflow.com/questions/88399/how-do-i-duplicate-a-whole-line-in-emacs


Undo

3가지 방법

C-/

C-x, u

C-_ 

http://www.emacswiki.org/emacs/UndoCommands

emacs에서 html을 편집할 때 

C-c C-v 단축키로 해당 html을 브라우저에서 열 수 있습니다.

C-c / 단축키로 열린 태그에 대한 닫는 태그를 자동 입력할 수 있습니다.


관련: http://www.gnu.org/software/emacs/manual/html_node/emacs/HTML-Mode.html

+ Recent posts