프론트엔드 빌드 시간을 줄이기 위한 노력은 계속되는군요.

https://pnpm.io 에서 설치법과 사용법을 알 수 있습니다.

pnpm: Done in 16.5s

npm: added 1009 packages, and audited 1010 packages in 37s

from: https://pnpm.io/pnpm-cli

https://pnpm.io 

지난 번 다이어그램을 많은 분들이 좋아해 주셔서 감사합니다. 발표 자료를 위해서 정리하다가 수정할 것이 보여서 추가/이동했습니다. 패키지 매니저와 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



dw 기사를 보다가 JSDT(JavaScript Development Toolkit)를 알게 되었습니다. JavaScript 자동완성에 실시간 문법체크를 해줍니다. 어~ 좋은데, 그런데 어떻게 설치하지 찾아봤습니다만 WTP3.0 (Ganymede JEE 버전과 동일합니다.)에 기본적으로 포함되어 있더군요.

다음 이미지를 보시면 알 수 있듯이 다른 js 파일에서 선언된 변수도 가져다 쓸 수 있습니다.

위키를 보니 JSDT는 ATF(Ajax Toolkit Framework) 프로젝트의 서브 프로젝트로 진행중이네요.

JSDT에 대해 잘 요약된 DW기사도 일독을 권합니다.

간단한 객체 지향 자바스크립트 simple object oriented javascript 에 이어집니다.

지난 번 함수에 파라미터는 어떻게 전달할까요. onclick="issue.view('kenu')" 이렇게 말이죠.
<script type="text/javascript">
  var issue = {
    view : function(name) {
      alert(name + "! Let's see.");
    }
  };
</script>
<input type="button" value="check it out" onclick="issue.view('kenu')">

name 이라는 파라미터 전달 방식입니다. 설명하기 애매하지만 그냥 () 괄호 안에 쓰면 됩니다.

issue.open() 이라는 것을 만들어 볼까요.
<input type="button" value="open it" onclick="issue.open('kenu')">
이라고 추가할 수 있겠죠. 코드는 다음과 같아 집니다.

<script type="text/javascript">
  var issue = {
    view : function(name) {
      alert(name + "! Let's see.");
    },
    open : function(name) {
      alert(name + "! Open it, please.");
    }

  };
</script>
<input type="button" value="check it out" onclick="issue.view('kenu')">
<input type="button" value="open it" onclick="issue.open('kenu')">

view : function {} 다음에 오는 콤마(,) 이후에 view와 같은 형식의 open function을 만들면 됩니다. 두 개 만드는 법을 알았으니 3, 4, 5 계속 추가할 수 있겠죠.

 
자바스크립트 이야기입니다. 웹2.0이 뜨고나서, 특히 Ajax라고 불리면서 현란하게 브라우저를 수놓는 시대에 와서 가장 진보적인 위치를 차지하고 있는 것이 자바스크립트입니다. 자바에다가 스크립트를 붙이면 정말 다른 언어가 됩니다. 물론 베이직 언어와 달리 대소문자를 칼같이 지켜야 되는 점은 자바와 같지만, 컴파일이나 실행방식, 문법 구조 같은 언어적 특성이 자바와 많이, 아주 많이 다릅니다.

웹2.0을 전후로 자바스크립트 내에서도 큰 변화가 생겼습니다. 그 전에는 베껴쓰는 자바라 하여 컴퓨터 랭귀지 취급도 받지 못했습니다. "그거 아무나 하는거야 그냥 검색해서 찾아서 베껴쓰면 되잖아"라는 인식이 팽배했습니다. 물론 접근하기 쉽다는 인식도 있지만, 자바스크립트 언어의 진면목을 세상이 몰라 주었던 것이죠.

구글맵으로 세상이 들썩거리고 자바스크립트의 객체지향성을 일깨워 준 프레임워크가 나왔습니다. 미운 오리 새끼가 백조가 될 수 있는 가능성을 보여준 것이죠. 바로 prototype.js 입니다. 이것을 바탕으로 해서 많은 자바스크립트 프레임워크와 라이브러리들이 쏟아지기 시작했습니다.
기존에는 거의 팁으로만 취급받던 것들이 소프트웨어 제품으로 인정을 받기 시작했죠. 초창기에 script.aculo.us, rico, dojo 등이 선보였고, YUI(Yahoo UI) 같이 큰 포털에서 내어놓은 것도 있었습니다. 자바스크립트의 르네상스라고 해도 될지요. DHTML로 살짝 떴다가 내려갔는데, 이 때는 정말 부흥이 맞습니다. 아직도 지속되고 있구요.


허무할지 모르지만 그 유치했던 자바스크립트에서 이런 표현이 가능합니다.

<script type="text/javascript">
  var issue = {
    view : function() {
      alert("Let's see.");
    }
  };
</script>
<input type="button" value="check it out" onclick="issue.view()">

어떤 의미인지 설명하지 않아도 되겠죠. 하나 유념할 것은 issue에 종속된 view()라는 것입니다 그냥 view() 호출하면 안됩니다. 이렇게 scope를 주는 것이 의미가 있게 됩니다.

+ Recent posts