OK 괜찮아, 동네 개발자형

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

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

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

## 유틸리티 모듈

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

## 프레임워크 

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

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

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

## 백엔드

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

  * Java, .NET 기술과 경쟁. 

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

## 빌드 도구

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

## 패키지 매니저

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

## 그래픽

  * 시각화 엔진

## 테스트

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

## 파생 언어

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

## 데이터베이스

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

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

자바스크립트에서 어렵다고 생각하는 개념이 hoisting 입니다.

function abc() {
    var a = 'bbb';
    console.log(a) //  ---- 1
    function c() {
		console.log(a); // --- 2
		(function() {
             console.log(a); // --- 3
	         a = 'ccc';
        })();
        var a;
        console.log(a) // ---4
    }
    function d() {
	    console.log(a); // --- 5
//	    var a = 3;
    }
    c();
    a = 'ddd';
    d();
};

이클립스에서 ctrl+shift+F를 통해서 코드를 정렬할 수 있습니다. formatter라고 합니다.

JavaScript의 포맷이 마음에 들지 않아서 변경했습니다.

ctrl+3 을 통해서 quick access에 커서를 이동합니다. formatter라고 검색하고 JavaScript formatter 항목을 선택합니다.

JavaScript Conventions [built-in] 항목을 선택하고 Edit... 버튼을 클릭합니다.

Indentation(들여쓰기)의 Tab policy(탭 정책)에 Spaces only를 선택하고 상단의 Profile name을 변경한 뒤에 저장하면 됩니다.

JSLint 또는 http://jsbeautifier.org 사이트의 code format을 참고하면 좋을 것 입니다.

Dart: Structured web apps (구조화된 웹 앱)

https://www.dartlang.org/

구글이 키워낸 또 하나의 JS 기반의 언어 Dart가 2년만에 정식 출시되었습니다.

http://www.infoq.com/news/2013/11/dart-10

Dart를 JS로 바꿔주는 dart2js 도구도 지원이 되고, 요즘 핫한 AngulartJS와 합작품인 Angular.dart 도 있다고 합니다. 둘 다 구글에서 만들었기 때문에 결합이 용이한 듯 합니다. infoq에 따르면 dart2js 로 나온 JS가 기존 JS보다 용량도 작고, 빠르기까지 하다고 합니다.

5분 코드를 보면 다음과 같습니다.

main() {                              // 앱 실행 시작
  print(new Fibonacci(10));          // 새로운 객체 실행 결과 출력
}

class Fibonacci {                     // 클래스 선언
  int original, fibo;                 // 변수 선언
  String toString() => '$fibo';      // 간략화된 문법으로 메소드 선언

  Fibonacci(int value) :              // 목록 초기화로 생성자 함수 선언
    original = value, fibo = fib(value) {
  }

  static int fib(int n) {             // 클래스 메소드 선언
    if (n < 2) {                      // 제어 흐름과 표현식
      return n;
    } else {
      return fib(n-1) + fib(n-2);     // 산술 연산자
    }
  }
}

자바 코드 같기도 하고, coffeescript 영향도 받은 것 같이 느껴집니다.

계속 나옵니다.

뭔가...

update: zdnet의 임민철 기자님 기사입니다. 상황을 알기에 좋은 기사입니다.

http://www.zdnet.co.kr/news/news_view.asp?artice_id=20131115092635