달력

10

« 2019/10 »

  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  

늘은 이것 저것 생각하다가, 예전일이 생각이 났다.


내가 nodeJS 처음으로 사용하기 시작한 것은 2년전 어느 이른 봄으로 기억이 된다.

당시의 나는 쏟아져 나오는 새로운 기술들과 Cloud기반의 서버 기술들을 들여다 보면서, 어떤 것을 공부를 해야할지 수 개월째 맴돌고 있었던 시기로 기억된다. 


하루가 다르게  쏟아져 나오는 새로운 기술들이 눈과 귀를 즐겁게 하였지만

   "무엇을 공부해야할까?" 

   "무엇을 배워야 할까?"

 

대해서 나름 심각하게 고민하고 스스로에게 물어 보는 시간이 많았다.

AI와 머신러닝, ReactJava, Java 8, Lamda, 함수형 프로그래밍,  V8 엔진을 기반으로한 Javascript 기반의 서버 프로그래밍 등등 말이다


이러한 고민의 시작은 사실, 90년대에 서버 클라이언트 프로그래밍을 시작으로 2000년대 초반에는 3 Tier기반의 서버 개발로 할 때는, 모든 서버의 설치와 구성 및 설정을 위해 개발자는 당연하게  사전에 검토와 분석을 기반으로 설계를 하고 개발을 하고 운영까지 하였다. 그리고 당연하게 개발을 위한 소프트웨어 스택과 라이브러리에 대한 기능도 세세하게 검토하고, 버전을 확정한후에 개발을 시작하였다.


하지만, 현재의  AWS와 같은 Cloud 환경과 Spring과 같은 휼륭한 Framework를 사용하거나 완성도가 높은 오픈 소스를 사용하게 되면, 수개월에 걸쳐서 검토하고 기능을 익혔던 과정은 불필요한 작업이 되었다.

내 생각을 덧붙이자면, 누구나 쉽게 개발할 수 있는 환경이 된 것이다. 

이전에 MSDN CD 또는 DVD를 통해서 학습했던 내용들은 인터넷을 이용하면 바로 바로 이용가능한 예제와 설명들을 찾을 수 있다. 


새로운 시대가 도래한 것이다.

그런데, 어떻게 나는 무엇부터 시작을 해야 할지, 알수가 없었다. 몇몇 사람들과 이야기를 나누어 보았는데, 나와 비슷한 고민을 하는 사람들이 있었다. 

알파고의 파도가 지나간지 얼마 되지 않았기에 AI를 공부하고 싶다는 생각이 들었지만, 나는 엔지니어적인 관점에서 접근하고 싶었다. 내가 DB엔진을 만지지않고, DB를 사용하는 것과 마찮가지로 AI와 머신러닝이 어는 정도 성숙된 이후에 공부하고 싶었다. (요즘이 그 때인것 같다.) 


이러 저러한 여러 가지 생각을 하다가, 아무것도 시작을 못하고 있었는데,  

그러다가 내린 나의 생각은 이랬다.  

 

결론은


무엇이 되었던, 일단 한가지씩 시작해 보는 것이다


별다른 고민을 하지 않고, 크지 않은 새로운 과제에 nodeJS 사용해 보기로 하였다

마침 VS Code를 사용하면서, NodeJS와도 궁합이 잘 맞는다는 것을 알았기 때문에, 바로 사용을 할 수 있었던 것 같다. 


꼭 NodeJS 사용해서 원하는 작업을 해야만 하는 것은 아니었다. 

Perl 또는 Python 또는 Groovy 이용해서 Batch 스크립트를 만들어도 되는 간단한 작업 이었기 때문에,
그리고, 새로운 언어를 하나 더 배울 수 있다라는 측면과 호기심에서 시작을 하게 되었다.

아~ 갑자기 생각났다. 그때 AWS에 새로운 가능으로 Lamda가 추가되었는데, 지원하는 언어중에 하나가 바로 NodeJS 였다.   


그때 해야 했던 작업은 배치작업을 만들어야 했는데, RestAPI 정기적으로 호출해서 DB 테이블에 비어 있는

필드를 채워서 테이블을 확인하고 업데이트 하는 것이었다.

NodeJS의 비동기적인 동작에 대해서 잘 알지 못하는 상황이어서, Async와 I/O Non-Blocking에 대해서 작업이 필요한 상황이었다. (지금이라면, 굳이 NodeJS를 사용하지 않습니다. ) 


작업순서는 다음과 같았다.

먼저 AWS S3 에서 로그를 다운로드 받는다. 다운로드 받은 로그를 약간의 분석을 위해서 메모리에 Map형태로 잘 말아서 올린다. 그리고, DB Table 비어 있는 필드를 찾아서 업데이트 하는 작업과 Rest API를 호출해서 DB상의 테이블의 구멍난 부분을 찾아서 채워는 작업이었다.


기본적으로 배치로 돌기 때문에, 시간적으로는 제한을 받지 않기 때문에 기존의 Sync 작업으로 진행해도 되었지만, NodeJS 사용한다라는 것은,  Async 대한 기본적이 고민이 선행될 필요가 있다. (물론, 지금이라면 await async 키워드를 이용하거나, Promise 사용하면 되겠지만...)


비동기 처리는 

내가 원하는 작업 순서에 따라서 로그를 찍지 않는다, 파일을 읽어 올때나, DB에서 쿼리를 실행해 결과를 가져올

때나, 서버로 부터 API 호출하고 Response를 받을때도, 비동기로 찍어주는 로그는 내 예상과 다른 순서와 시점에 로그를 까만 화면에 번쩍이면서 찍고내고  있었다.


사실 비동기 프로그램은 비주얼 베이직에서 이벤트를 받아 처리하거나, 콜백 함수를 이용한 메소드의 실행 측면으로 이해한다면, 이해적인 측면에서 쉬울 수 있지만, 순차에 따른 호출을 하고 싶은 경우에는 중복된 콜백 메소드의 호출을 보게된다.  call-back hell이라고 부르는 그것을 말이다. 


Call-Back Hell을 피하기 위해서 메시지 루프와 같은 형태로 Event를 처리하는 방법을 사용해서 피해보기도 하였으나, 마음에 들지 않는 방식이었다. 


그러다가, 네트워크 작업과 DB 쿼리가 비동기로 호출되는 상황에 대해서 고민을 하면서만들어 솔루션은 

 Task 큐에 넣고, 호출하고, 결과를 비교하는 콜백 함수를 이용하는 방식으로 마무리 하였.

 
그리고, 동기처리가 필요한 작업순서를 지정하기 위한 방식으로 Perl 이용했었다.

순전히 Call-Back을 중첩하여 사용하기 싫어서 사용한 방법이었는데, 나름 메시지 큐를 만들고, 들어오는 결과를 처리하는 방식이어서, 간단하지만 좋은 방식이었다.


만약, 지금이라면 다른 방식으로 해결할 것인데, 공부하는 측면에서는 도움이 많이 되었다.

NodeJS는 장점도 많지만, 단점도 많다, 하지만 장점이 워낙 커서 단점을 가릴 정도로 훌륭하다.



Posted by 행복상자

댓글을 달아 주세요

2018.12.18 23:30

nodeJS와 Express 설치하기 공부하는 것/Node Js2018.12.18 23:30

VS Code는 회사에서도, 집에서도 많이 사용하는 IDE이다.

오늘은 간단하게 테스트할 것이 있어서 띄웠는데, MacOS에는 nodeJS가 설치가 되어 있지 않았다.

간단하게, "nodeJS"를 설치하고, 내친김에 Express를 설치하려고 한다.


NodeJS는 "https://nodejs.org/ko/" 또는 "https://nodejs.org/en/" 에서 다은 받아 설치하면, 된다. 
브로우저가 설치되어 있는 OS에 따라서 다운해서 설치할 바이너리가 달라진다. 



위 화면에 두개의 버전이 있는데, "10.14.2 LTS" 버전을 설치하기로 한다.

윈도우즈와 MacOS 버전 모두 바이너리 버전으로 설치하기 때문에, 다운 받아서 실행하면 바로 설치가 가능하다. (다른 방식으로 cli 명령으로 설치도 가능한데, 오늘은 쉽게 가기로 한다.)


설치가 완료되었으면, 설치 버전을 확인해 본다. nodeJS설치할때 같이 설치되는 패키지 매니져인 npm의 버전과 nodeJS의 버전을 아래과 같이 확인해 본다.

mymac$ npm -v

6.4.1

mymac$ node -v

v10.14.2


이번에는 nodeJS를 이용하여 웹을 개발할때 사용하는 Express 라는 Framework을 설치할 차례다.

Express는 "https://expressjs.com/ko/starter"에 나오는 순서대로 설치하면 된다.


아래와 같이 npm을 이용하여 express 패키지를 설치한다.  만약 설치시 권한문제로 설치가 단되면 sudo 명령을 사용해서 "sudo npm install express"와 같이 실행하면 된다.

mymac$ sudo npm install express

...


mymac$ sudo npm install express-generator -g 

...


자 이제 마지막으로, express를  이용하여 web 프로젝트를 생성해 본다.

아래의 "- e" 옵션은 templet엔진을 "ejs"를 사용하겠다는 옵션이다.

mymac$ express -e showdata

   create : showdata/

   create : showdata/public/

   create : showdata/public/javascripts/

   create : showdata/public/images/

   create : showdata/public/stylesheets/

   create : showdata/public/stylesheets/style.css

   create : showdata/routes/

   create : showdata/routes/index.js

   create : showdata/routes/users.js

   create : showdata/views/

   create : showdata/views/error.ejs

   create : showdata/views/index.ejs

   create : showdata/app.js

   create : showdata/package.json

   create : showdata/bin/

   create : showdata/bin/www


프로젝트가 생성이 되었으면 실행을 해보자.

아래와 같이 "showdata" 디렉토리로 이동해 들어가서, npm을 이용하여 기본 패키지를 설치하고, "npm start" 명령으로 서버를 동작시킨다.

mymac$ cd showdata

mymac$ npm install

mymac$ npm start


기본 포트는 3000번 포트를 사용하므로, 브라우저에서 "http://localhost:3000"을 치면 다음과 같은 화면이 나타나게 된다. 


만약, 실행 포트를 바꾸고 싶다면, "showdata/bin/www" 파일을 열어서 변경하면 된다.


 


  


 

Posted by 행복상자

댓글을 달아 주세요

최근에 AWS와 node.js를 이용하여, 프로젝트를 진행하고 있다.

이전에 Azure룰 개인적으로 이용하곤 했는데, AWS는 실제 개발과 운영의 업무가 나누어져 있어서 나는 누군가가 만들어준 인스턴스를 이용하기만 하였지, 직접 하나 하나 건들일 일이 없었다. 

그런데, 지난 1월 7일에 Amazon 한국 리젼이 오픈을 하게되면서, 나도 개인 계정을 만들어 인스턴스를 생성하고, 몇몇 기능들와 서비스들을 이용해 보고 있다. 

최근에는 S3에 파일을 업로드 하거나, 다운 받는 코드를 AWS Lambda를 이용해서 실행하도록 만들었는데, Lambda는 AWS의 S3로 새로운 파일을 올리거나 받을때, 이벤트에 따라 필요한 코드를 실행할 수 있도록 도와주는 기능인데, 따로 서버를 운영하지 않아도(돈을 아낄수 있어서 좋다.) 된다.


아래는 AWS S3로 mytest.txt라는 파이을 zlib를 이용하여 압축을 한후에, S3로 업로드하는 

코드이다.

var AWS = require('aws-sdk');

AWS.config.loadFromPath('./config.json');


var s3 = new AWS.S3({ region: 'ap-northeast-2' }); 

var fs = require('fs');

var zlib = require('zlib');


var body = fs.createReadStream('C:/mytest.txt').pipe(zlib.createGzip());

var s3obj = new AWS.S3({params: {Bucket: 'seoulbucket9999', Key: 'myKey.zip'}});

s3obj.upload({Body: body}).

  on('httpUploadProgress', function(event) { console.log(event); }).

  send(function(err, data) { console.log(err, data) });


간략하세 설명을 하면  첫줄의 'var AWS = require('aws-sdk');'는 aws-sdk 패키지를 npm을 이용해서 설치한 후에 실행할때 넣어주면 된다. 

명령은 다음과 같다.  (사용을 위해서는 윈도우와 리눅스 또는 맥에 node와 npm 패키지가 이미 설치 되어져 있어야 한다.)

npm install aws-sdk

그리고,  'AWS.config.loadFromPath('./config.json');' 는 S3에 필요한 Access-key와 secret key를 별도의 config파일에 저장해서 가져오는 기능이다. 


마지막으로 아래의 코드는 로컬에 있는 mytest.txt 파일을 zlib를 이용하여 압축해서 S3에 올리는 코드이다. 

var body = fs.createReadStream('C:/mytest.txt').pipe(zlib.createGzip());

var s3obj = new AWS.S3({params: {Bucket: 'seoulbucket9999', Key: 'myKey.zip'}});

s3obj.upload({Body: body}).

  on('httpUploadProgress', function(event) { console.log(event); }).

  send(function(err, data) { console.log(err, data) });


Posted by 행복상자

댓글을 달아 주세요

Pro Javascript를 전체적으로 한번 흩어 보고나서는, Javascript에 대한 이해도가 무척 높아졌다. 물론 당연히 알아야 할 것들을 그동안 모르는 채 잘 지내왔을 뿐이다.
내가 알던 쉬운 자바스크립트는 지금의 것과는 너무도 많이 달랐다. 아니 자바스크립트의 가능성과 기능에 대해서 너무 간과해 왔는지도 모른다.

HTML의 DOM 구조는 개발자로 하여금 문서의 구조을 쉽게 이해할 수 있도록 도와주고, 이는 CSS와
Javascript를 통해서 쉽게 제어할 수 있어 매우 유용하다.

<html>
<head>
<title>Introduction to the DOM</title>
<script>
    // We can't manipulate the DOM until the document
    // is fully loaded
    window.onload = function(){
    // Find all the <li> elements, to attach the event handlers to them
    var li = document.getElementsByTagName("li");
    for ( var i = 0; i < li.length; i++ ) {
        // Attach a mouseover event handler to the <li> element,
        // which changes the <li>s background to blue.
        li[i].onmouseover = function() {
            this.style.backgroundColor = 'blue';
        };

        // Attach a mouseout event handler to the <li> element
        // which changes the <li>s background back to its default white
        li[i].onmouseout = function() {
            this.style.backgroundColor = 'white';
        };
    }
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the
DOM is awesome, here are some:</p>
<ul>
    <li id="everywhere">It can be found everywhere.</li>
    <li class="test">It's easy to use.</li>
    <li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>

위의 코드는 "Pro Javascript"에 나오는 예제인데, HTML은 XML의 구조를 가지고 있지만, 가장 단순한 형태중에 하나로 문서를 구성하는 Object를 정의하고 있다. 이러한 구조는 "태그(Tag)"라는 형태로 정의되어지는데, 위 예제는 태그에 Event의 handler를 할당하는 코드이다.

코드에 대한 설명을 덧 붙이자면,
1. var li = document.getElementsByTagName("li");
    - 위 코드를 통해서 HTML 문서에 정의된 "li" 태그들의 리스트를 가져와서 var li에 저장한다.
    - document.getElementsByTagName 메소드는 태그 이름을 이용하여 Element를 가져오는
      함수이다.

2. li[i].onmouseover = function() {this.style.backgroundColor = 'blue'; );
   - 위 코드를 정의하기 전에, "li.length"를 통해서 리스트의 갯수를 알수 있고 이를 For 루프 문의
     통해서 반복을 시킨다.
   - 이는 동일한 이벤트를 "li"태그로 정의된 Object에 할당하기 위새서이다.
   - li[i].onmouserover 이벤트 메소드는 위와 같이 새로 정의된 메소드를 통해서 마우스가 "li"태그
     위에서 움직일 때 태그의 배경색을 "blue"로 바꾸어 준다.

3. li[i].onmouseout = function() {this.style.backgroundColor = 'white'; };
    - 이 코드는 "li" 태그의 onmouseout event 메소드를 정의하는 코드로, 마우스가 태그를 벗어날때
      태그의 배경색을 "white"로 바뀌게 만들어 준다.

위의 코드를 이해할 수 있으면, jQuery에서 얼마나 직관적으로 같은 코드를 간략하고 단순한 형태로 사용할 수 있는지 알게된다면, 깊은 인상을 받을 것이다.
Posted by 행복상자

댓글을 달아 주세요

원래는 책에서 Closure에 대한 설명에 대한 설명이 있는데, 나의 관심을 끈 것은 Anonymous함수의 사용에 대한 것이었다.

아래의 예제는 동일한 동작을 하는 메소드를 Event에 추가하는 예제인데, 중간 정도에 보면 난데 없이 "(function(){" 으로 시작하는 구문이 나온다. 이 부분이 Anonymoun function 이다.
이렇게 만들면 "Global"로 선언할 필요없이 임시적으로 함수 블럭의 사용이 가능하다.
구문을 닫을 경우는 "})();"를 이용하면 된다.

 // An element with an ID of main
var obj = document.getElementById("main");

// An array of items to bind to
var items = [ "click", "keypress" ];

// Iterate through each of the items
for ( var i = 0; i < items.length; i++ ) {
    // Use a self-executed anonymous function to induce scope
    (function(){
        // Remember the value within this scope
        var item = items[i];
        // Bind a function to the elment
        obj[ "on" + item ] = function() {
            // item refers to a parent variable that has been successfully
            // scoped within the context of this for loop
            alert( "Thanks for your " + item );
        };
    })();
}

사실 위의 코드는 불필요한 내용들이 많이 들어있다. 굳지 저렇게 써야하나 라는 생각이 들지도 모르지만, 이것은 단지 예제 정도록 사용하면 된다.
그래도 몇가지 건질 것이 있다면, 위의 코드에서 "id"를 이용하여 오브젝트를 가져오고, Event를 Bind하는 내용을 담고 있는데, Event명을 obj["on" + item]의 형태로 Event를 binding한다.
위의 코드는 "click" 과 "keypress"에 대한 이벤트가 발생하면 메시지를 발생시키는 예제이다.

Posted by 행복상자

댓글을 달아 주세요

어떤 사람들은 믿지 않겠지만, Javascript도 Object Oriented Programming을 지원하는 Language이다. 이전에 자바 스크립트가 출현하 지난 10년동안 언어적인 측면과 사용적인 측면에서 많은 변화가 있었지만, 실제로 개발자들은 굉장히 소극적으로 이를 사용했었다. 따라서 별도의 Javascript 함수들을 모은 ".js" 파일을 이용하기도 했지만, 이는 단지 함수들을 재 사용하는 측명에서 였다. 이유는 코드를 고치거나 수정하기 어렵다는 것인데, 자바 스크립트가 가지고 있는 기본적인 속성들을 몰라서 일지도 모른다.
많은 사람들이 Javascript를 다시 보기된 계기는 Google의 Application들이 이를 이용해서 사람들에 자신들의 Application을 제공하기 시작했기 때문이라 생각하는데, 이어서 나온 Yahoo의 YUI도 내게 많은 놀라움을 주었다. 그리고 다른 오픈 소스 라이브러리들 역시 놀라운 정도의 편리함과 쉬운 사용법을 내세우고 개발자들의 쉴 틈(?)을 만들어 주고 있다.

그러나, 남의 것을 사용할 때도, 기본적이고 기초적인 것은 알아야 덜 고생한다.
세상에는 날로 먹을 만한 것이 그리 많지 않다.

오늘은 내가 잘 이해하지 못했던 Javascript의 Scope에 대해 설명할 거다.

자바스크립트는 기본적으로 웹브라우져의 페이지별로 실행된다. 그래서 대부분이 함수를 만들어서 그안에서 지역 변수를 생성하거나, 전역으로 생성해서 사용한다.
일반적으로 사용할때는 별 문제가 없겠지만, Java, C#, C/C++과는 Scope의 영향범위가 다르므로 주의해야 한다.

아래는 셈플 코드인데, 전역으로 foo 변수를 생성했고, 이어서 if 문안에 생성했고, 마지막으로
 function 문 안에서 생성하였다.

위에 주석으로 설명이 다 되어있지만, 다시 설명을 하면
6번째 줄에서 foo변수를 전역으로 선언하고 "test"라는 문자열을 저장하였다. 그리고 나서 12번째 줄에 새로운 foo 변수를 정의하고 "new test"라는 문자열을 저장하였다. 그러나 이는 이전에 생성했던 전경 변수와 동일하다. 다시 말하면, 이는 전역 Scope의 영향 아래에 있다. Java나 C#, C/C++은 전혀 다르므로 혹시 이를 착각하고 사용할 가능성이 많다.
이의 확인은 15번째 줄에서 알수 있다. 이를 실행하면 동일함을 확인할 수 있다.

이어서, 17번째에 함수 test를 만들고 24번째 줄에서 실행하면, 이전에 function test에서 할당한 문자는 function Scope에서 이미 생명주기가 다했음을 알수있다.

그럼다면, 함수안에 if 문에서 변수 foo를 새로 정의한 경우는 어떻게 될까?

한번 실행보면 알겠지만, 역시 if구문 안에 정의한 변수는 주의해야 한다. 자신이 원치 않는 결과를 가져올수 있다.
Posted by 행복상자

댓글을 달아 주세요

그 동안 관심은 있었으나, 제대로 마음먹고 해보지 못했던 자바 스크립트를 공부하기 시작한지 오늘로서 1주일이 다 되어 간다. 아니 사실은 5일정도 되었는데, 언어적인 측면에서는 그 동안 내가 익혔던 언어와 많이 다르다는 것을 깨닫고 있는 중이다. 

내가 공부하는 것을 정리하려고 하는데, 오늘은 Javascritp의 데이터 타입을 확인하는 방법에 대해서 간략하게 이야기 하려고 한다.

자바 스크립트에서 Type를 확인하는 방법은 2가지가 있다.
아래의 이에 대한 2가지 소스를 통해서 사용하는 방법에 대해 설명하려고 한다.

    // Check to see if our number is actually a string
    if ( typeof num == "string" )
    // If it is, then parse a number out of it

    num = parseInt( num );
    // Check to see if our array is actually a string

    if ( typeof arr == "string" )
    // If that's the case, make an array, splitting on commas

    arr = arr.split(",");

위의 예제에서는 Javascript에서 string 과 string type의 배열에 대해서,
- String 변수를 값이 저장된 경우는 number type의 변수에 저장하고,
- 만약 string 배열로 저장된 값일  경우는 이를 "," 를 구분자로 해서 배열로 저장한다. 
이 경우는 typeof 연산자를 이용해서 변수의 type을 확인하는 예제이다.
별로 이해하기 어려운 코드가 아니므로, 쉽게 이해할 수 있을 것이다.

두번째 방법은 먼저 아래의 예제를 보면, 이해가 쉡게 될 것이다.
    // Check to see if our number is actually a string
    if ( num.constructor == String )
    // If it is, then parse a number out of it
    num = parseInt( num );
    // Check to see if our string is actually an array
    if ( str.constructor == Array )
    // If that's the case, make a string by joining the array using commas
    str = str.join(',');


위 예제의 내용은 첫번째 예제와 코드의 결과물을 다르지 않다. 다만 여기서는 변수의 "construgtor"를 이용하여 "String"타입의 변수와 "Array"변수의 타입을 비교를 수행한 것이다.

물론 위와 아래의 예제 모두 실제 코드가 경우에, 필요에 따라 적절하게 사용하면 된다. 
아래의 표는 typeofconstructor를 사용이 가능한 Variable 목록들이다.


자바스크립트는 그리 많지 않은 변수들을 가지고 있다.
Posted by 행복상자

댓글을 달아 주세요

작년에 진행하던 프로젝트를 마무리하고 나서 틈틈히 공부하는 책이 있다.
사실 웹 개발을 오래하다 보면, 쉽게 간과하기 쉬운 부분이 Javascript와 CSS와 같은 부분이다. 왜냐하면, 요즘에 나오는 HTML Editor 툴과 개발에 사용하는 IDE의 성능이 상당히 향상되어서 양질의 코드를 생산할 수 있기 때문이다.
그러나 요즘에 사용하는 자바스크립트는 이전의 그것과 전혀 다른 모습을 띄고 있다. 한 마디로 스크립트 언어이기에 배우기 쉽고, 인터넷의 웹에서 비슷한 Sample들을 쉽게 가져 올 수 있기 때문에 별로 배울 가치가 없다라고 생각하면 큰 코 다친다.

AJAX라는 기술이 Web 2.0을 대표하는 기술로 이야기 되어진 이후로, Javascript를 좀도 체계적이고, 라이브러리처럼 쓸수 있는 많은 Javascript Framework들이 만들어 졌다. Yahoo의 YUI, Roby on Rails에서 기본적으로 사용할 수 있는 Prototype, 최근에 마이크로 소프트의 ASP.NET을 위해서 Visual Studio에서 지원하는 JQuery 그리고, ExtJS와 같은 상용 프레임워크까지 셀수 없이 많은 새로운 Javascript Framework가 나타나고 있다.

하지만 자바 스크립트라는 언어의 근간을 이해하지 못하면, 좀더 효율적으로 사용하지 못할 거라고 생각 한다. 그렇기 때문에, 공부의 우선순위가 떨어져서 한번을 공부해야지 했던것이 이제야 살펴 볼수 있는 기회를 갖게 되었다.

책을 읽어가면서 내가 느낀것은, 한마디로, 내가 10여년전에 사용하고 이해하던 자바스크립트와는 전혀 다른 세계였다. OO를 적용한 객체지향적인 속성과 재활용을 위한 여러가지 기능과 속성들을 이해해야만 한다.  너무나도 자유롭고 쉬운 문법을 가지고 있지만, 확장과 변경을 위해서는 언어의 특성을 완전히 이해해야만 한다.

위의 보이는 사진속의 책이 내가 최근에 공부하고 있는 책이다.
책은 각 쳅터의 주제에 맞는 쉬운 예제들을 보여주고 있다. 이를 통해서 기본 원리들을 익힐 수 있도록 구성되어 있다. DOM을 통한 Object를 찾고 접근하고 제어하는 방법과 Dynamic HTML의 속성들을 이용하여 접근할 수 있는 Object들의 사용법도 익히면, 책의 내용을 이해할 수 있는 기본적인 소양을 갖추고 있다고 할 수 있다.

책의 내용을 결코 어렵지 않지만, 이전에 알고 있던 자바스크립트에 대한 선입견을 버리지 않는다면 쉽게 이해하기 어려울 것이다.

나와 같이 개발에 참여하고 있는 개발자는 ExtJS를 이용하는데, 큰 어려움을 가지고 개발 작업을 진행했다. 사실 ExtJS를 구매하고 개발에 이용하는 목적은 개발의 효율성과 리소스를 절약하려는 목적이었는데, 이에 대한 효과는 전무하였다.
나름 대로 분석을 해보면, 주어진 컴포넌트는 API 다큐멘트를 찾아보면 알수 있지만, 이의 변형이나 새로운 형태로 변형을 가할 때는 Javascript와 Prototype 라이브러리에 대한 이해가 적었기 때문이다. 그렇기 때문에 다른 컴포넌트를 이용할 때도 기본기는 항상 중요하다.

약 380페이지의 책중에서 현재 110페이지를 읽고, 코드를 짜보고 있다. 책 속에는 개발시 필요한 디버커 툴을 소개해 주고 있는데, 개인적으로는 Firefox의 plug-in인 Firebug를 좋아하고 자주 사용하고 있다. 이외의 다른 툴들은 책의 내용을 참고하면 된다. 그리고 Junit와 유사한 Javascript Unit 테스트 툴들도 소개하고 있다. 아직은 별로 관심 없는 부분이다.




Posted by 행복상자

댓글을 달아 주세요