카테고리 보관물: JavaScript

2012/10/06
댓글 남기기
JavaScript, open source

tipJS – OpenSource JavaScript MVC Framework

국산 JavaScript MVC Framework tipJS 를 알게 됐다.
알게 된 건 나름 몇달전이고, 지난 달 오프모임에서 tipJS 를 개발하신 필수입력 (백승현) 님까지 만나게 되면서 한층 더 관심을 갖게 되어 블로그에 소개해야지 해야지. 하면서 미루다 보니 이제서야 글을 쓰게 된다. -_-;

http://tipjs.com/ : tipJS – OpenSource JavaScript MVC Framework

tipJS 는 JavaScript 기반 어플리케이션을 MVC 패턴으로 구현할 수 있도록 도와주는 OpenSource Framework 이다. 특정 라이브러리에 종속되지 않는 독립성을 띄고 있고, 다양한 라이브러리와도 호환되며 HTML Template 형식등도 지원된다.

각설하고, 개인적으로 가장 크게 와닿는 이점 중 하나는 익숙해진 MVC 패턴을 자바스크립트에도 적용할 수 있다는 점인데 프론트엔드 개발자가 아니더라도, MVC 에 익숙한 개발자들에게는 쉽게 접근할 수 있고, 간편하게 활용할 수 있을 듯!  그리고 공통 라이브러리 관리하는 것도 config 내에 정의해서 간편하게 & 효율적으로 관리할 수 있다는 점도 매력적이다. 특히나 무겁고 복잡한 JavaScript Framework 사이에서, 빠르게 적용할 수 있고 좀 덜 부담스러우면서 쉽게 접근 할 수 있는 게 바로 tipJS 가 아닐까 싶다.

tipjs.com 사이트 첫 화면에 나오는 개요와 기능, 동작개념도, 구조, 처리흐름 등도 잘 나와있다. 시작하기만 봐도 Action 에 Controller 적용해서 빠르게 사용할 수 있게 되어 있다. 예제 소스도 공개되어 있고. 리퍼런스도 잘 정리되어 있어서, 참고해서 활용하면 바로바로 사용할 수 있을 듯. 오픈 소스로 소스를 전부 공개하고 있으니 이또한 감사할 따름. ㅠ_ㅠ. tipJS, 이 좋은 건 널리 널리 퍼져야지~!

링크는 소스 저장소 : https://github.com/tipjs/tipjs-JavaScript-MVC-Framework

 

 

2012/08/07
댓글 남기기
css, HTML5, JavaScript, Korean Localization

HTML5 를 위한 기본 템플릿 HTML5Boilerplate

웹 개발을 위해 기본적으로 사용되는 프론트엔드 소스 코드들을 몇년에 걸쳐 모으고, 버릴 건 버리고 취할 건 취해서 기본 템플릿의 Best Practice 를 만들어냈다. 이름하여, HTML5Boilerplate (줄여서 H5BP)

이름에서 알 수 있듯이 HTML5 요소들을 사용하며, IE6+ 호환을 모두 고려하여 작성된 코드들이고, 모바일에도 최적화되어 있다.

간단한 코드들이지만, 한땀한땀 장인들 (많은 오픈소스 공헌자들) 에 의해 새롭게 추가되거나 변경/삭제되었다. 처음에는 @paul_irish 혼자 시작했지만 현재까지 많은 사람들이 코드 개선에 참여했다. 물론 코드 개선은 지금도 현재진행중이다. (https://github.com/h5bp/html5-boilerplate)

소스들을 살펴 보면 index.html 을 비롯해 견고하게 완성된 기본 style.css 를 제공하고, favicon 이나 모바일 기기의 홈 아이콘인 apple-touch-icon.png 파일도 사이즈별로 구성하고 있다.
(코드에 출처에 대한 링크가 코멘트되어 있어서 더 자세히 공부해 볼 수 있다)

살짝 index.html 만 가져다 살펴보면, 대략 아래와 같다.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<header>

</header>
<div role="main">

</div>
<footer>

</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

</body>
</html>

단순히 HTML/CSS/JS 만 모아 놓았지만, 처음 프로젝트 만들 때 간단하게 복사해서 필요한 부분만 쓰기에도 편하고 좋다. 추가적으로 웹서버 설정 (아파치 .htaccess 등) 파일등도 최적화 되어 있고 robots.txt , humans.txt (옵션) 등도 제공해주고 있다.

한글화에도 참여해 봤다. gnutext 라는 GNU기반 유틸리티에 의해 messages.po 파일만 한글화 작업을 해놓고 스크립트로 빌드를 돌리면, 자동으로 빌드해서 사이트를 만들어 준다. (물론 H5BP 의 템플릿 주석까지도 모두 한글화된다. 하지만 기본적으로 H5BP 는 영문 주석판만 공개하고 있다. 해당언어의 주석이 들어간 버전을 받고 싶다면, template 경로로 접근하면 된다. 한글 코멘트된 index.html 예 view-source:http://ko.html5boilerplate.com/template/index.html //다만 현재버전으로 생성된 게 아니라서 현재 버전에는 삭제된 코드들도 남아있다. -_-;;)

이 messages.po 파일도 msgId (영어원문) 와 msgStr (한글화될 문장) 으로 구분되어 한글화 하기에는 꽤 편하게 되어 있었다. 빌드를 하면 .mo 파일이 생성되고, 바로 빌드까지 해주니 결과물을 즉각적으로 볼 수 있어 좋았다.

HTML5Boilerplate 한국어 링크 : http://ko.html5boilerplate.com/
(2012년 8월 31일 확인결과 H5BP 4.0 업데이트와 함께, 현재 한국어 링크는 제공되고 있지 않음)

사이트에 들어가 보면 보다 자세한 내용들이 있고, 소스를 다운받아 하나씩 보면 더 자세하게 알 수 있다. (대부분 코드가 간단하게 코드 설명을 위한 코멘트가 되어 있고 보다 자세한 설명을 위해 링크까지 제공해준다. 링크를 따라가 보면, 코드 출처에 대한 자세한 설명을 얻을 수 있다.)

[2012년 8월 31일 현재]
H5BP 4.0 으로 버전업 되면서 사이트 개편과 함께, 다국어 링크가 사라졌다.

태그 지정됨 ,
2012/06/04
댓글 7개
JavaScript

자바스크립트기반 웹플랫폼 Meteor.js 란 무엇인가

자바스크립트 기반 웹 프레임워크 Meteor 에 대해 소개합니다.

Meteor is an ultra-simple environment for building modern websites. What once took weeks, even with the best tools, now takes hours with Meteor.

Meteor 는 2012년 4월 0.3.2 버전을 시작으로 꾸준히 업데이트를 진행하고 있는 자바스크립트 기반 웹 프레임워크입니다. (6월초 현재는 0.3.6 버전) 꽤 흥미로운 요소들이 많이 있는데, 빠르게 웹 개발을 해주고, 최초 진입장벽을 낮추어 개발자들이 쉽게 접근할 수 있게 만들어져 있습니다.

흥미로운 사실은, 클라이언트와 서버의 구분없이 모두 자바스크립트 언어를 사용한다는 점이고, 데이터베이스접근 API 까지도  클라이언트에서 동일하게 자바스크립트로 호출해서 사용가능합니다. 즉, 클라이언트에서 DB API 호출만으로 DB insert, update, remove 가 가능합니다.

지난 주 HTML5JS공부모임을 통해 발표하게 되었는데, 발표자료를 만들면서 꽤 공부가 되어서 부족한 내용이지만 공유해 보고자 블로그에 남겨봅니다.

발표자료 링크 : http://www.slideshare.net/juntai811/meteor-036-preview

Meteor 공식사이트 (meteor.com) 에 나와 있는 9가지 특징입니다.

001. Pure JavaScript.
002. Live page updates.
003. Clean, powerful data synchronization.
004. Latency compensation.
005. Hot Code Pushes.
006. Sensitive code runs in a privileged environment.
007. Fully self-contained application bundles.
008. Interoperability.
009. Smart Packages.

서버와 클라이언트 모두 순수 자바스크립트 언어를 사용하고, 서버든 클라이언트든 둘 다 모두 동일한 API 를 사용합니다. 게다가 DB API 까지도 동일하게 사용할 수 있습니다. 서버와 클라이언트를 동일 구조화(isomorphic) 해서 개발이 가능합니다.

기본적으로 템플릿 언어를 사용하고 있으며, 현재는 Handlebar (http://handlebarsjs.com/) 만 지원하고 있습니다. (HandleBar 는 Mustache 라는 템플릿 언어에 영감을 얻어, 확장시켜 만들었다고 합니다.) 그리고 Meteor 기반의 모든 페이지는 소스 수정시에 자동으로 업데이트 되고, 데이터가 변경되어도 모든 클라이언트의 페이지를 자동으로 업데이트 시켜 줍니다. (클라이언트의 유저가, 직접 웹을 새로고침할 필요가 없이, 자동으로 업데이트되어 보여집니다.) 살아있는 웹 (Live WEB) 을 지향하고 있고, 이는 Reactive Programming 의 특징이기도 합니다.

Meteor 의 Server 구조를 살펴보면 Node.js 기반으로 되어 있고 fiber 엔진(node-fibers on npm) 을 사용합니다. fiber엔진은 Node.js 의 비동기 콜백방식을 사용하지 않고, 일반적인 single thread per request 방식을 사용합니다. 서버쪽의 소스는 기본적으로 /app/server/ 밑에 있는 js 가 돌아가게 되어 있고, 클라이언트쪽 소스는 /app/client/ 밑에 있는 js 가 돌아가게 되어 있습니다. 다만, 동일구조를 가지고 있기 때문에 /app/ 밑에 있는 JavaScript 소스라면, 아래와 같이 Meteor.is_client 또는 Meteor.is_server 변수를 이용해서 클라이언트 또는 서버에서 동작하도록 조건을 줄 수 있습니다.

if (Meteor.is_client) {
  //client code
}
 
if (Meteor.is_server) {
  //server code
}

또 한가지 새로운 특징은 Meteor Client 에는 inMemory cache 를 가지고 있다는 점인데 이 클라이언트 캐쉬는 서버데이터와 동기화가 발생하고, 캐쉬 데이터의 변경 (insert, remove, update) 이 발생했을 때 서버데이터와의 자동 동기화를 통해 서버 데이터가 업데이트되는 형태로 이루어지고 있습니다. 고로 일반적인 웹 개발 처리 방식인, 서버단에서 DB 처리를 하고, 웹-클라이언트-에서 호출하는 방식이 필요없고 클라이언트에서 바로 DB 처리가 가능하다는 점입니다. (게다가 변경된 데이터는 바로 모든 클라이언트에 자동으로 리로드 처리를 해줍니다.)

설치부터 ~ 서버실행까지 간단한 명령어로 바로 바로 실행해 볼 수 있습니다.

설치 $ curl install.meteor.com | /bin/sh

새로운 프로젝트 생성 $ meteor create my_app

로컬에서 서버띄우기
$ cd my_app
$ meteor
Running on: http://localhost:3000/

바로 로컬에서 기본적으로 만들어진 템플릿 페이지를 띄울 수 있습니다. Meteor 에서는 간단한 웹 어플리케이션 예제도 제공해 주고 있는데, 아래 명령을 통해 간단한 todo 앱을 생성해 볼 수 도 있습니다.

todo앱 예제생성 $ meteor create –example todos

만들어진 소스는 deploy 명령을 통해 meteor.com 의 공개 무료호스팅을 이용해 배포할 수도 있습니다.
$ meteor deploy rkjun.meteor.com

또한, bundle 명령을 통해 Node.js 기반 어플리케이션으로 만들어서 (tar.gz) heroku 등의 Node.js 기반 호스팅에 올려 서비스할 수도 있다고 합니다.

Meteor 는 기본적으로 다른 패키지를 개발자가 임의로 추가할 수 있는 형태가 아닌, 모든 걸 다 가지고 있는 형태로 되어 있어서, 원하는 패키지는 meteor add 명령으로 추가할 수 있습니다. (현재는 지원하는 패키지에 한계가 있기는 하지만 jquery, bootstrap, sass, less, coffeescript 등 나름 꽤 많은 패키지를 지원하고 있고 점차 더 늘려간다고 합니다.)

정리하자면,
Meteor 는 간편하고 빠르게 개발 할 수 있는 환경을 제공해주는 웹개발 플랫폼으로, 자바스크립트 기반이며 서버와 클라이언트가 동일구조 (isomorphic) 로 되어 있고, 이는 DB api 역시 마찬가지로 적용됩니다. Node.js 와 HTML템플릿엔진, MongoDB 를 내장하고 있고 기본적으로 reactive programming 방식을 지원하며 hot code push 를 통해 모든 수정/변경이 모든 클라이언트에 자동으로 적용되게 하고 있습니다.  설치,생성,배포가 명령어 한번만으로 간단하게 이루어지므로 개발자 입장에서는 환경설정에 시간을 뺏기지 않고 웹 개발에 전념할 수 있습니다.

다만, Meteor 의 한계도 분명히 있는데,
일단 버전이 낮으므로 안전성이 크게 확보된 상태라 볼 수 없고 특히 Client 를 통한 DB 접근은 보안을 중요시하는 웹사이트에서는 달갑지 않을 수도 있습니다. (민간함 코드는 권한에 따라 실행할 수 있게 되어있다고 하는데 아직 어떻게 처리하는지는 잘 모르겠음 -_-; ) 그리고 아직까지는 UNIX (리눅스나 맥) 계열에서만 사용가능한 점도 한계점이긴 합니다. 이미 Node.js 는 윈도에서도 설치가 가능한데 말이죠.

그래도 쉽고 빠르다 는 특징을 전면에 내세우고 있고, 간단하게 Live WEB 환경을 제공해 준다는 점은 큰 매력이자, 앞으로의 웹 개발 플랫폼의 갈 길이 아닌가 생각해 봅니다.

여기까지 공부한 내용을 정리해봤습니다. 혹시 틀린 내용이 있다면, 가차없이 댓글 남겨주시면 수정하겠습니다.

참조링크

Meteor 공식 사이트 : meteor.com
미물님의 Meteor 에 대한 글 링크 : http://www.mimul.com/pebble/default/2012/05/09/1336558985350.html
Meteor 소개 관련글 (영문) : http://devblog.hedtek.com/2012/04/meteor-js.html
Meteor JS 로 문서공유사이트 만들기 (영문) : http://www.skalb.com/2012/04/16/creating-a-document-sharing-site-with-meteor-js/
Meteor JS 소개관련글 (일본어) : http://d.hatena.ne.jp/naoya/20120422/1335109615

태그 지정됨 , , , ,
2012/03/16
댓글 남기기
JavaScript

idiomatic.js (자바스크립트 코딩 일관성을 위한 가이드라인) 한글문서 소개

engfordev.com 에서, 누구나 참여하는 개방형(?) 공동번역을 진행하고 있어요.

이번에는 idiomatic.js -자연스럽고 일관성 있게 자바스크립트 코딩하는 원칙- 을 번역했고요.

JavaScript 를 공부하고 계시거나, 관심있으신 학생이나 개발자에게 도움이 될 것 같습니다. 혹시 JavaScript 를 이용해서 프로젝트를 진행하거나, 협업하는 경우에 한번 고려해볼 만 하기도 하고요. (물론 이 문서에 나온 그대로 따르기 보다는 적절하게 일관성을 갖춰 하는게 포인트겠지만요)

원문 링크 (English) : https://github.com/rwldrn/idiomatic.js/ – Principles of Writing Consistent, Idiomatic JavaScript

한글 링크 (Korean) : https://github.com/EngForDev/idiomatic.js/tree/ko/translations/ko_KR – 자연스럽고 일관성 있게 자바스크립트 코딩하는 원칙

한글 번역에 참여해 주신, engfordev 의, 홍환민(Hwan Min Hong) / 권민택(MinTaek Kwon) @leoinsight / 심태원(Tw Shim)@marocchino, github / 김나솔(Nassol Kim) @nassol99, github / 심민규 / 원강민 / 유정협 /이대엽 님 감사합니다.

engfordev 에서의 작업에 대한 정리글은 요기 ( http://opentutorials.org/course/167/1363 ) 에 있습니다.

 

태그 지정됨 , , , , ,
2012/03/09
댓글 7개
HTML5, JavaScript

basket.js – LocalStorage 에 script 캐싱/로딩해주는 자바스크립트

HTML5 에서 제공하는 웹 저장 기술중 하나인 localStorage 를 사용하여, 자바스크립트를 캐싱하고, 로딩해주는 자바스크립트로 basket.js 라는 간단하지만 (개념 증명정도의) 흥미로운 자바스크립트 오픈소스.

먼저 localStorage 를 간단히 언급하자면, HTML5 에서 추가된 저장기술 중 하나인데 브라우저마다 차이는 있지만 대략 5MB ?? 정도 제공을 해 주고요.  구글크롬을 쓰신다면 CTRL+SHIFT+I (도구-개발자도구) 에서 Resources 란에 보면 Databases 와 Session Storage 사이에, Local Storage 항목이 존재합니다. 그 영역에 저장되는 거죠.

자바스크립트 콘솔에서 직접 localStorage 를 접근해 보면, 아래 처럼 작동하구요.
> localStorage.setItem(“Name”, “rkJun”)
> localStorage.getItem(“Name”)
“rkJun”

basket.js 는 LocalStorage 를 활용하여, jQuery 같은 자바스크립트 라이브러리를 통째로 LocalStorage 영역에 저장하고 호출해서 이용하도록 자바스크립트로 구현해 놨습니다. 물론, 당연히 성능의 극대화를 끌어올리기 위해서구요. (시작은 트위터 -영문- 에서…) basket.js 소개페이지에는 jQuery , backboneJs, underScoreJs 를 담아놨습니다.
사용법은 간단합니다.

basket.require(‘js파일경로’) : 호출 (해당 js파일이 있는지 체크해서 localStorage 에 있으면 무시, 없으면 ajax 방식으로 가져와 localStorage 에 넣습니다. )

basket.remove(‘js파일경로’) : localStorage 에 제거
basket.add(‘js파일경로’) : localStorage 에 추가

물론 체인방식도 제공하고요.
basket.require(‘jquery.js’).require(‘underscore.js’).require(‘backbone.js’);

basket.require(‘jquery.js’).wait().require(‘jquery.plugin.js’)  를 통해, jquery.js 호출이 끝나고 나서 다음을 실행하도록 wait() 를 걸 수도 있습니다. jQuery plugin 을 실행하기 전에 jQuery 가 먼저 호출이 돼 있어야 하니까요.

다만, 이  basket.js 에서 캐싱을 위해 선택한 localStorage 가 고민끝에 선택한 건 아니라고 언급해 두며,  WE NEED TO KILL OFF THE LOCALSTORAGE API 라는 글도 링크걸려 있구요. (대략 localStorage 는 형편없고 후지다. IndexedDB 만이 대안이다 라고···.)

암튼 basket.js 의 성능 실험 자체가 꽤 흥미로워서, 소개해 봤습니다.

태그 지정됨 , , ,