2012년을 마치기 전 내 열등감이 새겨진 한 글.

난 개발자다. 하지만 나는 코더 취급 받고 있다.

나이가 젊고 경력이 그닥이니 그렇게들 취급할 수 밖에 없다고 한다.

거기다가 학력이란 큰 벽이 더 크게 작용한다.

github 개발자들 보면 거의 그렇다.

자기만의 시간을 투자해서 오픈소스를 만든다.

외국은 당연하겠지만, 한국도 마음먹으면 가능하다.

그런데 한국은 그만큼 인정받고 거기다가 큰 기업과 오픈마인드를 가져야 가능하지만

내가 댕기는 중소기업 같은 경우는 돈과 시간에 쫒기는게 업무이기 때문에 그들보다 자유시간이 그만큼 줄어든다.

그렇다고 여기에 불만 가진 적은 있으나 이거 자체를 부정하고 다른 넓은 곳으로 가지는 못했다.

왜냐?

나이가 젊고 경력이 그닥이니 그렇게들 취급할 수 밖에 없다고 한다.

거기다가 학력이란 큰 벽이 더 크게 작용한다.

내 스스로는 개발자라 칭해도 다른사람들은 나를 코더라 칭한다.

이때문이다.

다들 이렇게 취급하기 때문에 내가 아무리 큰회사던 작은회사던 서류를 내도 모두 이렇게 퇴짜맞았다.

서류 내도 면접오라는 얘기조차 없었다.

N사에 자스 면접은 와서 1차면접에 합격한 기쁨도 잠시, 회사의 압박과 그 압박에 못이긴 내 의지부족으로 포기할 수밖에 없었다.

그리고 나는 지금 SM을 하고 있다.

파견직이고, 갑을병정 중 정의 위치에서 일하고 있다. 병의 회사 마인드는 군대같다. 오로지 단체다. 개인따위 없다.

그래서 집이 아무리 멀어도 핸디캡은 고사하고 오히려 더 날 더 불공평하게 하는 것 처럼 느껴지는건 왜일까.

칼퇴? 가끔 한다. 근데도 기쁘지 않다. 다들 내가 칼퇴하는 모습 보면 기쁘게 보이겠지만 나는 왠지모르게 불안하다.

왜냐? 계약상 24/7 대기다. 하루도 빠짐없이 담당 서비스를 책임져야 하니까. SI는 이럴필요 없지만..

나름 좋은 경험을 했다. 이게 SM이었구나.

나도 오픈소스 프로젝트를 만들어 올리기도 했다. 하지만 규모가 작다. 사람들을 끌어모을만한 뭔가가 없었다.

글로벌하게 나가려고 github 에 올리고 해도 나를 알릴 수단이 없었다. 마냥 인정받길 기다릴 수도 없는데.

이번 2012년 계획이 SM으로 무참히 깨지면서 오늘 새로운 교훈을 얻었다.

내가 이렇게 스스로 빈약하게 나섰구나.. 이제 나의 단점을 찾았으니 개선해야 겠구나..

아무리 환경이 개같아도 내 의지가 좀 더 있으면 날 개발자로 인정해 줄 여력은 충분하다 생각했다.

만약 나같이 해매거나 인정받지 못하거나 초급이거나 풋내기라면 한마디만 기억하면 된다.

“이미 구렁텅이에 빠졌으면, 구렁텅이에서 즐기면서 헤엄쳐라. 뭍으로 빠져나가는 길이 보일 것이다.”

이제 허탈감에 무르익어 즐기는 나날이 오는 날에 대비하여 갈고 닦을 것이다.

난 개발자지 코더가 아니기에. 자신의 프로정신과 성숙함을 더 새기기 위해.

composite / 2012년 11월 26일 / 미분류 / 0 Comments

저도 후기를 올리는군요.

이번에도 기회를 딱 잡았는데 야근덕분에 만져볼 기회가 더욱 없었습니다.

그래도 짬짬이 2012 세팅을 좀 했습니다.

애저 관리 화면은 정말 심플하고 깔끔하다 입니다.

sshot-6.png

가상OS다 보니 이것저것 상태를 한눈에 볼 수 있습니다. 원격에서 문제가 생겼을때 재시작이나 종료가 가능하구요.

처음 사용할때는 뭐가 뭔지 알아내기가 힘들었습니다. 사용자에게 버튼이 어딨는지, 탭이 어딨는지에 의미를 부여했으면 좋겠더군요.

특히 포트를 개방하는 ENDPOINTS 찾느라 해맸습니다…

뭐.. 그렇긴 하지만 역시 가상OS 환경 만지는거는 그냥 하던데로만 하면 되니 얼마나 좋습니까.

저는 2개의 VM에 하나는 웹 서버, 하나는 DB 서버를 사용했습니다.

DB는 MSSQL이 아닌 몽고DB를 깔았습니다.

sshot-3.png

사실.. 웹플랫폼 인스톨러는 어찌보면은 외부툴이라 안정성에 민감한 분이라면 조금 꺼려할 수도 있는 툴입니다.

그만큼 필요한 소프트웨어가 쉽게 깔리다보니요.

만약 웹 서버에서 순수 .NET 환경을 꾸밀거라면 왠만하면 IIS 세팅만 하고 마세요. GAC 줄이는게 웹 프로그램 관리상 이롭습니다.

VS에서 웹개발하고 게시를 하면 독립형 게시를 할 수 있습니다. 서버에 어떤 종속성 필요없이 걍 올리기만 하면 됩니다.

용량을 좀 먹는다는 단점이 있긴 하지만 그렇게 하는 것이 어떤 서버에서도 돌아갈 수 있는 가장 최선의 길이라 생각됩니다.

sshot-5.png

DB 서버에는 몽고디비를 깔고 테스트 좀 해봤습니다. 제가 왜 몽고디비를 깔았냐면은 바로 제가 모델링해서 완성한 주소 줄이는 앱을 올리기 위해서였습니다.

시간만 있었다면 데이터 열나게 올리고 열라게 조회하려고 했지만 시간이 없어서 아쉬움만 남는군요.

거기다가 다음 체험에는 MSSQL 까지 깔아준다 하니..ㅋㅋ

ENDPOINT 로 포트개방을 하였습니다. 아까 관리화면에서 ENDPOINT 글씨 클릭하면 포트 포워딩 비슷한 기능을 할 수 있습니다.

당연히 웹이다 보니 80번 포트를 개방했습니다.

이렇게 세팅한 화면에 제가 만들었던 앱을 올리니 감회가 새롭더군요.

sshot-4.png

감회가 새로울 줄 알았는데 DB 로그인 에러가 먼저 반겨주더군요.. 이상태에서 밤을 보내고 결국 GG치고 말았습니다..

애져를 쓰면서 많은 걸 느꼈습니다.

클라우드의 강점이라 하면은 바로 주문한 대로 준비가 되는 플랫폼 아니겠습니까.

그런 역할을 역시 충실히 해내는 애져입니다.

여러분께서는 이런 클라우드 플랫폼을 어떻게 쓰고 투자하는게 좋겠다 라고 생각하십니까?

저같은 경우에는 글로벌 서비스에 맞는 테스트 및 배포에 용이하다고 생각을 하고 있습니다.

일단 서버가 여러 군데 있으니까요. 한국 서버에서 글로벌하게 서비스 하는건 성능상이나 보안상이나 여러가지 문제점이 있기 때문에 이런 애져를 이용하는 것은 여러분의 서비스에 많은 도움이 되지 않을까 생각됩니다.

따라서 대우형님에게 바라는 것이 있습니다.

– 데스크탑 경험 세팅하지 말아주세요.

– 5차 체험도 만들어주세요. 이번엔 리눅스로!

– 한두개 코어짜리도 체험하게 해주세요. 고사양이면 너무 막쓰게 되잖아요(?)

어쨌든, 클라우드를 몸소 체험하는 좋은 기계 만들어주셔서 감사합니다.

마지막으로 제가 돌리고 있는 2012 서버 스샷 올리고 쿨하게 마치겠습니다.

HP 마이크로서버에 웹서버 깔고 하이퍼브이 깔아도 녀석 튼튼하게 잘돌아갑니다.

mini.png

다음 체험 하면 자바돌려볼까..

composite / 2012년 11월 23일 / 미분류 / 2 Comments

골때리는 자바스크립트 미니버전.

자바스크립트로 프로그래밍 짜면서 아마 이 연산자는 쓰실런지 모르겠습니다.

바로 물결표시 (~) 인데요.

자바스크립트에도 이 물결 연산자가 먹힌다는거 알고 계셨습니까?

네. C 언어와 마찬가지로 비트로 부정하는 연산자입니다.

예를 들면, 브라우저는 대부분 32비트니 32비트 정수죠.

9  = 00000000000000000000000000001001

              ——————————–

~9 = 11111111111111111111111111110110 = -10

대충 이런 식이 성립되는군요. -(n+1)

물론 잘 안쓰죠. 자바스크립트에 비트 연산 거의 쓸일이 없거든요.

가뜩이나 node.js 빼면 파일이나 이진법 연산도 안되는 이 연산자.

하지만 쓸 곳이 하나 있다는 사실 아십니까?

바로 indexOf 메서드입니다. String 에. 문자열에 내장된 함수죠.

왜냐구요? 직접 연산해 보시길.

~-1 = 0

~0  = -1

~2  = -3

자. 이제 감 잡으셨죠? indexOf 는 지정된 문자열을 찾지 못하면 -1 이 반환됩니다.

결국 이렇게 편리한 논리식이 성립됩니다.

if(~’oh my god’.indexOf(‘m’)){

    alert(‘m이 요기잉네?’);

}else{

    alert(‘m 따위 내가 먹었음.’);

}

어때요. 참 쉽죠?

그것도 모자라 물결표시 2개짜리도 있습니다. ~~ 입니다. 그럼 이건 뭘까요?

쉽게 생각하세요. !!a 처럼 반전에 반전을 한겁니다. 그렇게 생각하면 쉬워요.

하지만 문제가 뭐냐면..

~~3.4356456 == 3

정수가 되버린다는 사실. 그것도 소수점 다 버립니다. Math.floor() 처럼요.

그러고 보니까 Math.floor 의 대안이 될 수 있겠군요.

근데 왜 소수점을 다버릴까요? 흐음.. 글쎄요. 그것까지는 모르겠습니다.

하지만 정말 유용할 것 같군요. 소수점을 버리고 정수만 표현하고 싶은데

여태까지 Math.floor 써왔는데 겨우 물결표시 2개로 해결되다니.

뭐 알고보면 유용하군요.

골때리는 자바스크립트는 여기까지로 하겠습니다.

그럼 즐자스코딩~

composite / 2012년 11월 13일 / 미분류 / 1 Comment

제이쿼리 팁! 기존 요소 유지하면서 텍스트만 바꾸기.

제목만 보면 못알아들을 거 압니다. 제목학원 안다닌 덕분이죠.

예제를 통해 기존 하위 요소하면서 텍스트만 바꾸는 방법을 알려드리죠.

어쨌든 이렇게 마크업이 구성되어 있습니다.

<a id=”mylink” href=”#”>

    <img src=”http://fiddle.jshell.net/favicon.png”/>링크1

</a>

보시면 이미지 태그와 그냥 텍스트가 공존해 있습니다.

이 상태에서 $(‘#mylink’).text(‘링크다’); 이렇게 실행하시면

이미지 태그가 없어지고 링크다 라는 텍스트가 들어가게 됩니다.

만약 저 이미지 태그를 유지하면서 텍스트만 바꾸고 싶다면,

깊숙히 들어가서 바꿀 수 있습니다. 조금 어려운 방법이죠.

먼저 $(‘#mylink’).contents() 메서드를 사용합니다.

contents() 메서드는 children() 메서드와 비슷하지만,

텍스트 요소까지 모두 받아들이는 차이점을 가지고 있습니다.

이렇게 한 다음에 텍스트 요소만 필터링합니다. 이때부터 표준 속성인 nodeType를 이용하죠.

$(‘#mylink’).contents().filter(function(){

    return this.nodeType == 3;

});

이렇게 하면 nodeType 가 3, 즉, 텍스트 요소만 필터링하게 되는 겁니다.

그런 다음에 지웁니다.

$(‘#mylink’).contents().filter(function(){

    return this.nodeType == 3;

}).remove();

모든 텍스트 요소가 삭제됩니다.

이제 할 일이 끝났으니 되돌아 가면 되겠습니다. end() 메서드를 통하여 다시 이전 선택자로 돌아갑니다.

$(‘#mylink’).contents().filter(function(){

    return this.nodeType == 3;

}).remove().end().end();

end() 한번 쓰면 contents() 로 뽑은 요소들이 선택되고, 또 end() 쓰면 $(‘#mylink’) 선택자에 대한 작업을 준비하게 되겠습니다.

이런 다음에 텍스트를 포함시키면 끝.

$(‘#mylink’).contents().filter(function(){

    return this.nodeType == 3;

}).remove().end().end().append(‘링크다’);

어때요. 참 쉽죠?

만약 이미지 태그 앞에다 넣고 싶다면?

$(‘#mylink’).contents().filter(function(){

    return this.nodeType == 3;

}).remove().end().end().prepend(‘링크다’);

이렇게 하시면 되겠습니다.

빠르게 온라인 예제를 바고 싶다면 주저마시고 링크 #1 을 클릭하세요.

그럼 이만!

보너스! 제이쿼리 없이 하고싶다면 아래 스크립트를 참고하시길.

var link=document.getElementById(‘mylink’);

for(var i = 0,childs = link.childNodes; i < childs.length; i++){

    if(childs[i].nodeType == 3)

      link.removeChild(childs[i]);

}

link.appendChild(document.createTextNode(‘링크다’));

의외로 쉽네..

composite / 2012년 11월 13일 / 미분류 / 0 Comments

[Polyfill] LocalStorage

LocalStorage 는 일단 모든 웹 브라우저에서 지원합니다.

하지만 IE 7 이하는 지원하지 않습니다.

하지만 MS는 영구히 보관 가능한 별도의 저장소 개념을 이미 만들어 놨습니다.

바로 #default#userData 입니다. 이게 뭐냐구요? 몰라요.

어쨌든 영구 보관 개념이 있기 때문에 IE7 이하도 사용 가능합니다.

웹 사이트에 윈도우 업데이트에서 사용하기도 했죠.

사용법입니다.

var b=document.createElement(‘b’);

b.style.behavior=’url(“#default#userData”)’;

document.body.appendChild(b);

//기존 localStorage 보관소의 데이터를 가져옴

b.load(‘localStorage’);

//localStorage에 새로운 키/값 등록

b.setAttribute(‘key’,’value’);

b.save(‘localStorage’);

//localStorage 에 저장된 key 의 값을 불러옴

var val=b.getAttribute(‘key’);

이렇게 씁니다.

따라서 localStorage 가 없는 구닥다리 IE를 배려하고자 한다면 아래와 같이 꾸미시면 되겠습니다.

if(!window.localStorage)

    window.localStorage = (function () {

        var userdataKey = ‘localStorage’,

            userdata = document.createElement(‘b’);

        userdata.style.display = ‘none’;

        userdata.style.behavior = ‘url(“#default#userData”)’;

        // userdata.addBehavior(‘#default#userdata’);

        document.body.appendChild(userdata);

        userdata.load(userdataKey);

        return {

            setItem: function (key, val) {

                userdata.setAttribute(key, val);

                userdata.save(userdataKey);

            },

            removeItem: function (key) {

                userdata.removeAttribute(key);

                userdata.save(userdataKey);

            },

            getItem: function (key) {

                return userdata.getAttribute(key);

            }

        }

    })();

하지만 안타깝게도 sessionStorage의 대안은 없습니다. 걍 쿠키드셈. 끝.

추가사항:

보통 localStorage 는 도메인당 5MB입니다. 하지만 IE의 영구저장소는 도메인당 1MB로 제한됩니다.

composite / 2012년 11월 13일 / 미분류 / 4 Comments

Windows 용 Git Server

Git는 원래 리눅스 개발할 때 버전관리를 위해 쓰던 형상관리 기술이다. 하지만 Github 등장과 Git 에 대한 관심으로 Git 형상관리에 개인 및 업체가 관심을 가지게 된 것도 일상다반사.

심지어는 자체 형상관리 프로그램인 팀 파운데이션 서버를 제작해낸 MS 까지 Git의 매력에 푹 빠지고 말았을 정도이다.

왜그럴까?

SVN보다 간결하고 오프라인에서도 버전관리가 가능다는 이점 등이 바로 Git의 매력이 아닐까.

Github 은 공개 저장소만 무료이고, 개인 저장소 쓰려면 돈내야 한다.

그래서 아마 자체 Git 서버가 필요할 분도 있을 것이다.

하지만 Git는 SSH와 맞물려 있다보니 리눅스에서만 돌릴 수 있는건 아는 사실일거다. git 프로토콜이.

하지만 Git는 http 프로토콜로도 돌릴 수 있다는 사실.

그래서 윈도우에서도 Git Server를 돌릴 수 있다는 사실.

그렇다면 윈도우에서 Git 돌릴 수 있는 프로젝트를 알아보자.

1. Gitstack

라이센스 : GPL, 2명 무료, 2명 이상 유료 (년단위 등록)

개발환경 : Apache 2.x 및 Python 2.7, PHP5

사이트 : http://gitstack.com/


Git server for Windows | GitStack

현재 윈도우에서 사용 가능한 Git 서버 중 유일한 안정 버전이다. 설치 마법사로 쉽게 설치하고 쉽게 사용할 수 있는 이점이 있다. 기업에서도 별 문제 없이 쓸 수 있는 버전인데, 안타깝게도 이 녀석의 배포본은 2명 이하에게만 무료로 제공하고, 그 이상은 연간 돈을 내야 하기 때문에 상용이다. 하지만 GPL 라이센스로 소스가 공개되어 있으니 관심있는 개발자는 한번 확인해 보는것도 좋을 것 같다.

참고로 Apache로 Git 서버 만드는 팁이 올라와 있다. 또는 Cygwin 으로 Git 서버 돌리는 방법도 있다.

이 GitStack 은 Apache 를 채용했으며, Python 으로 Git 버전 관리 프로세스를 구현하였다.

그리고 PHP로 Git 저장소 탐색 부분을 구현했다.

2. Bonobo Git Server

라이센스 : Ms-PL, 무료

개발환경 : IIS, ASP.NET 4 (.NET Framework 4)

사이트 : http://www.chodounsky.net/bonobo-git-server/

윈도우에 어떠한 상속도 받지 않고 닷넷 기술로 Git 서버를 만들어냈다.

.NET Framework 4 이상을 요구하므로, .NET Framework 4가 설치된 윈도우 서버 2003, 2008, 2008 R2, 2012 에서 구동할 수 있다.

2012는 처음부터 4.5 라서 별 상관 없지만, 2008 R2 이하는 기본적으로 설치가 안되 있으므로, 설치를 별도로 수행해야 할 것이다.

오픈소스이기 때문에, 입맛에 맞게 꾸밀 수 있다. Git 방식은 HTTP/HTTPS 를 지원한다. IIS 재량으로.

3. Git Web Access

라이센스 : Ms-PL, 무료

개발환경 : IIS, ASP.NET 4 (.NET Framework 4)

사이트 : http://gitweb.codeplex.com/

파이썬으로 만든 Grack을 토대로 만든 이 Git 서버는 심플하면서 Git의 기본적인 기능을 소화해낼 수 있는 기능을 제공한다.

ASP.NET Web Pages 기반으로 Razor 템플릿으로 제작되어 ASPX 보다 더 보기 좋게 디자인을 구성할 수 있다는 이점이 있다.

물론 기존 ASPX Page 기반으로도 사이트를 꾸밀 수 있는데. 이건 취향따라 정하면 된다.

이 프로그램은 Git for Windows 1.7.x을 필요로 한다. 먼저 설치 후 설치하는 것이 좋다.

이것도 IIS 재량이지만, 위에 어플리케이션과 한번 비교해보고 사용하는 것도 나쁘지 않을 듯 싶다.

이외에도 Git 서버를 구성하는 몇 가지 방법을 소개한다. 영어 문서지만 영어 좀 안다면 쉽게 따라갈 수 있을 것이다.

CopSSH/Git for Windows/PuTTY 로 Git 서버 구성(영문)

Cygwin 으로 Git 서버 구성(한글)

Apache 로 Git 서버 구성(영문)

이상으로 마치도록 하겠다. 끝!

composite / 2012년 10월 30일 / 미분류 / 1 Comment

jQuery Paging Plugin

업데이트: 제이쿼리 페이징 플러그인 0.2.0 업데이트! 아래 설명 쌩까고 Github 으로 신속히 이동하라!

실무에 많이 쓰지만 은근히 빡센 페이징. 동적 페이징에 머리 짜매고 계신가? 여기 종결자가 있다.

jQuery Paging Plugin!

가볍다. 2KB밖에 안되며 gzip 압축 시 1KB도 안될 것이다.

빠르다. 페이징 외 쓰잘데기 없는 효과나 부가기능 따위는 없다.

쉽다. 한줄이면 페이징 초기화가 끝난다. 서버에서 불러와야 할 거는 현재 페이지와 총 페이지 수, 그뿐이다.

동적이던 정적이던 다 된다. 전통 방식 게시판이던 ajax 로 만든 게시판이던 입맛에 맞게 쓸 수 있다.

오픈소스다. 당신이 죽쓰던 밥쓰던 상관않는 MIT 라이센스다. 물론 더 좋은 방법 있으면 공유하는 것은 미덕!

사용법?

$(‘#paging’).paging({current:5,max:50}); //총 50 페이지 중 5 페이지로 시작하는 페이징을 불러올 것이다.

이거덕분에 프로젝트 잘되서 제작자한테 커피 한잔 쏘고 싶으면 ukjinplant at hotmail dot com 으로 연락해도 된다.

그럼 다운로드는?

소스(개발용) 다운로드 | 최적화(실무용) 다운로드 | 프로젝트 홈페이지

페이징 방식이 여러가진데 이 페이징 플러그인의 롤모델이 뭐인지 궁금하면 여기여기 를 클릭하여 확인해보라.

jQuery.Paging

jQuery를 위한 간단한 페이징.

사용법 : $('#paging').paging({max:50});

속성 :
item : 페이징 요소 태그명, 기본값 "a".
itemClass : 페이징 요소 중 페이지 수 CSS 클래스, 기본값 "paging-item".
itemCurrent : 현재 페이지를 나타내는 CSS 클래스이며 페이징 요소와 중첩됨, 기본값 "selected".
format : 페이지를 나타낼 내용, 기본값 "[%d]".
sideClass : 다음 또는 이전 버튼 CSS 클래스, 기본값 "paging-side".
next : 다음 버튼 내용. 기본값 "[{5}&gt;]" ("[>]")
prev : 이전 버튼 내용. 기본값 "[{4}&lt;]" ("[<]")
first : 첫 페이지 내용. 기본값 "[1&lt;&lt;]"
last : 마지막 페이지 내용. 기본값 "[&gt;&gt;{6}]"
length : 페이지 표시할 개수. 기본값 10.
max : 최대 표현할 페이지 수. 기본값 1.
current : 현재 페이지 정의. 기본값 1.
href : a 태그일 때 링크 주소를 정의. 기본값 "#%d"
append : true 설정 시, 기존 내용을 삭제하지 않고 페이징을 포함시킴. 기본값 false.
event : 기본 이벤트 활성화. 새로고침 없이 동적으로 페이징 초기화됨. ajax에 유용. 기본값 true.
>event=true 일 때 가능한 이벤트 정의.
onclick : 페이징 버튼 클릭 시 호출. false 반환 시 동적으로 페이지가 바뀌지 않음. 동적 페이징을 원하지만
                  href로 인한 링크 이동을 원하지 않을 경우 이벤트 메서드인 event.stopPropagation() 호출.
onprev : 이전 버튼 초기화 시 이벤트. 'this' 는 이전 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onnext : 다음 버튼 초기화 시 이벤트. 'this' 는 다음 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onitem : 각 페이지 버튼 초기화 시 이벤트. 'this' 는 각 페이지 버튼 요소를 가리킴.

치환자 (format,next,prev,href,first,last 속성 전용)
{0} = 클릭 시 페이지
{1} = 페이지 길이
{2} = 처음 페이지
{3} = 마지막 페이지
{4} = 이전 파트의 마지막 페이지
{5} = 다음 파트의 처음 페이지
{6} = 맨 마지막 페이지

판올림 내역
0.1.0 : 초기 버전
0.1.5 :
처음 페이지 및 마지막 페이지 추가. 내용에 치환자 적용 가능.
'append' 옵션 추가 : true 설정 시 기존 내용이 삭제되지 않고 포함됨.
{6} 치환자는 마지막 페이지(max 값과 동일) 를 가리킴
0.1.6 : first 또는 last 내용에 false 설정시 만들지 않도록 기능 추가.

composite / 2012년 10월 11일 / Piss Development / 11 Comments

app.js 자작 예제 프로그램 공개!

<

p style=”text-align: center; clear: none; float: none;”>

다운로드 링크 클릭 후 소스를 볼 수 있으며, HTML 로 만들어져 있다. 내가 만들었지만 app.js 는 놀랍다.

MIT 라이센스이므로 당신이 원하는 앱으로도 공부하기에 충분할 것이다.

composite / 2012년 9월 26일 / 미분류 / 0 Comments

appjs Dev kit

app.js 개발을 위한 키트.

내용물은 node.js 포함하여 app.js 등이 있으며 크기는 약 16MB.

첨부파일 제한 때문에 어쩔 수 없이 분할압축하여 올림.

이 배포본은 appjs 공식 사이트의 배포본을 기초로 하여 제작됨.

따라서 readme.txt 파일을 참조하여 유의사항을 짚어본 후 개발 및 배포할 것.

예제 또한 app.js 에서 만든 예제를 올려두었음.

그럼 app.js 의 재미를 느껴보기 바란다.

조만간 mac 및 linux 용 개발 키트도 만들어 올릴 예정이다.

cfile7.uf.1777D039505C203A0101C8.rar

<

p style=”text-align: left;”>cfile10.uf.184AE639505C203C330869.rar

한번에 받기 (github)

composite / 2012년 9월 21일 / 미분류 / 0 Comments

Node.js 로 데스크탑 앱을 만드는 app.js

node.js 에서 드디어 UI도 정복하는 건가? 커뮤니티에서 이미 데스크탑 UI까지 이식하려 한다.

UI 프레임워크는 다른 것도 봤듯이 API가 드럽게 방대해서 일반적인 데스크탭 앱 프레임워크를 만들기엔 당연히 무리.

하지만 그런 UI 구조에 구세주를 내려주셨으니 그것은 바로 Chrome Embedded Framework

바로 프로그램 안에 HTML5를 이식할 수 있는 프레임워크이다. 거기다가 크로스 플랫폼이다.

app.js 는 바로 이 크롬 임베디드로 UI 프레임워크의 방대함을 간단하게 극복했다.

만약 Qt나 WxWidget 를 자바스크립트로 이식한다 해도 그 API를 알아야 하지만, HTML은 그럴 필요가 없기 때문이다.

Morteza Milani 와 Brandon Benvie 2명이서 만든 이 node.js 프레임워크는 단 몇분만에 UI를 입힌 데스크탑 앱을 만들 수 있도록 도와준다.

준비물 : node.js 32비트 (64비트의 경우 크롬 엔진이 지원하지 않아 안된다 한다. 현재 수정 중).

NPM:

npm install appjs

NPM 설치 시 윈도우의 경우 Visual Studio 2010 컴파일러가 없는 경우 네이티브 코드 컴파일이 안될 것이다. 다행히도 각각의 바이너리를 제공하니 다운받으면 된다.

AppJS 0.0.19 Distributables:

      <ul><li><a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-win32-ia32.zip">Windows</a></li><li>Linux <a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-linux-ia32.tar.gz">32 bit</a> / <a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-linux-x64.tar.gz">64 bit</a></li><li><a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-darwin-ia32.zip">Mac OS X</a></li></ul><p>그런 다음 <span style="font-family: Courier New;">node --harmony node_modules/appjs/examples/hello_world/app.js</span> 실행을 해 보시라.

화면이 대충 이런 식으로 나올 것이다.

아래는 본인이 직접 앱을 시연하는 동영상이다.

크롬 개발자 도구도 지원하기 때문에 UI 디버깅도 척척 해낼 수 있다.

그럼 이거를 어디다 쓰면 좋을까? 좋은 질문이다.

활용 범위는 다양하다. 일단 HTML5 이므로 여러분이 원하는 최대한의 표현을 할 수 있다. 차트던 그래픽이던 모두.

서버 모니터링할때 이쁘게 꾸밀 수 있지 않겠는가?

아니면 아예 클라이언트 데스크탑 앱으로 해도 손색이 없다. 커뮤니티 전용 앱이라던가, 웹 게임 등. 다양한 활용 범위가 있을 것이다.

또한 안정화가 되면 비즈니스에서 보안을 요구하는 사내 프로그램에 대한 생산성 향상을 꾀할 수 있다.

또한 HTML5/CSS/Javascript 정도 알면 당신은 이미 100% 데스크탑 앱을 만들 수 있다.

또한 node.js 자스 코드를 그대로 웹상에서 활용 가능하다. 말 다했다.

아직 취약점이 있고 개선해야 할 부분은 천지다. 하지만 이 가능성은 이미 충분하고도 남는다.

이제 자바스크립트로도 데스크탑 앱을 만들 수 있다. 준비 되었으면, 참여하고 경험하라!

composite / 2012년 9월 19일 / 1127 / 1 Comment