New Language Dart

Google 에서 새로운 언어 Dart를 10일 발표했나보다.
써있는거 보면 구조화된 웹 애플리케이션 구축에 적합한 개발언어라고 한다.
여기 저기 한국에 올라온 기사를 보면 대충 모 이런 내용이다.

작고 비구조적인 프로젝트나 크고 구조적인 프로젝트 모두 활용할 수 있는 개발언어로 모바일 단말기나 서버에서도 고성능을 발휘하는 웹 애플리케이션을 만들기에 적합하다.

클래스 기반으로 돼 있으며, 좀 더 단순하고 효과적이다.

브라우저에 내장된 가상머신(VM)에서 실행되거나 컴파일러에서 자바스크립트로 변환해 실행된다.
구글은 자사의 크롬 브라우저에 다트 VM을 내장할 계획이다.

###Site

###Twitter

###Post

###News

###Video



나의 생각

Dart가 나오기전 Javascript 를 대체 할 것이라는 얘기가 돌아서 나는 새로 나올 언어가 궁금했었다.
근데 막상 Dart 를 보고 나서 들었던 생각은 모랄까… 이게 모지? 다른 언어들 몇개 합쳐 논건가?? 이런 생각이 들었다.

내가 다른 언어를 직접 써보질 않아서 인지 거리감도 생기고 현재로서는 브라우저에서 모두 지원하기 까지는 오랜 시간이 걸리지 않을까 싶다.

vm을 브라우저에 내장해서 돌린다고 해도… 무겁지 않을까 하는 생각이 든다.

지금까지 본것 만으로 생각해보면 Javascript보다 좀 빠르다는거?(이것도 직접 보지는 않았음) 빼고는 좋은 점을 모르겠다.

공유하기 댓글

jQuery Core Method Extend

jQuery Core
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;

// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}

// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}

// extend jQuery itself if only one argument is passed
if ( length === i ) {
target = this;
--i;
}

for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];

// Prevent never-ending loop
if ( target === copy ) {
continue;
}

// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];

} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}

// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );

// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}

// Return the modified object
return target;
};
공유하기 댓글

Become a Javascript Console Power User

Chrome, Firefox 에서 Javascript 개발을 하더라도 console 창에서 log(), dir() 만 사용했었다.

위 동영상을 보고 console에서 또 다른 기능 들에 대해서 알게되어 활용 할 수 있다면 javascript 개발을 좀더 손쉽게 할 수 있지 않을까 하는 생각이 들었다.

그래서 정리를 하고 확실히 알아 두기 위해서 Posting을 해볼까 한다.

위 동영상에서 소개 되고 있는 기능들은 목록은 다음과 같다.

  • XHR
  • console.time / timeEnd
  • console.dir() / dir()
  • $o / inspect()
  • $$
  • monitorEvents()
  • keys() / values()
  • copy()
  • super-cool Opera and Firebug
  • more devtools

위 동영상에서 사용되고 있는 소스는 다음과 같다.

HTMLjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href='http://fonts.googleapis.com/css?family=Merriweather|Droid+Sans+Mono&v1' rel='stylesheet' type='text/css'>

<h1>be a console power-user</h1>

<ul>
<li>XHR
<li>console.time() / timeEnd()
<li>console.dir() / dir()
<li>$0 / inspect()
<li>$$
<li>monitorEvents()
<li>keys()/values()
<li>copy()
<li>super-cool Opera and Firebug features
<li><a href="//code.google.com/chrome/devtools" rel="prerender">more devtools</a>
</ul>
CSSjsFiddle
1
2
3
4
5
6
7
8
9
10
body {
font-family: Merriweather;
font-size: 18px
}

textarea {
width: 100%;
height: 80px;
font-family: Droid Sans Mono;
}
JavascriptjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(){


var xhr = new XMLHttpRequest();
xhr.open("get", "/?" + Math.random(), true);
xhr.onload = function(evt){
txt = document.createElement('textarea');
document.body.appendChild(txt);
txt.value = evt.target.response;

};
xhr.send(null);

}

addEventListener('click', ajax, false);

XHR

console 창에서 위와 같이 메뉴창을 열어서 Log XMLHttpRequests 를 선택해 두면 XMLHttpRequests가 발생할때 마다 콘솔에 XHLHttpRequest 로그를 표시해준다.

Ajax를 이용해서 개발을 할때 기존에는 Network탭에서 확인하였지만 이렇게 직접 Console에서 바로바로 Ajax 호출을 확인할 수 있어서 개발할때 좋을꺼 같다.

또 다른 사이트 분석을 할때도 어느 시점에 Ajax를 사용하는지 쉽게 볼 수 있다.

console.time() / console.timeEnd()

JavascriptjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(){

console.time('ajax'); //시작 지점
var xhr = new XMLHttpRequest();
xhr.open("get", "/?" + Math.random(), true);
xhr.onload = function(evt){
txt = document.createElement('textarea');
document.body.appendChild(txt);
txt.value = evt.target.response;
console.timeEnd('ajax'); // 끝나는 지
};
xhr.send(null);

}

addEventListener('click', ajax, false);

Javascript 소스만 위와 같이 변경을 한다.

실행을 해보면 다음과 같은 결과를 console에서 확인 할 수 있다.

console.time console.timeEnd 는 결과와 같이 시작된 지점을 time() Method 와 끝나는 지점에 timeEnd() method를 써주고 인자 값으로 검사하고자 하는 함수 이름을 넘겨주면 소스코드가 실행된 시간을 화면에 출력해 준다.

최근에 프로젝트를 진행하면서 for 문으로 하는것이 빠를지 jQuery 의 $.each 문으로 하는것이 빠른지 궁금했던적이 있다. 이런 경우 직접 눈으로 확인 할 수 있는 좋은 방법이라고 생각 한다.

console.dir() / dir()

JavascriptjsFiddle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(){

var xhr = new XMLHttpRequest();
xhr.open("get", "/?" + Math.random(), true);
xhr.onload = function(evt){
txt = document.createElement('textarea');
document.body.appendChild(txt);
txt.value = evt.target.response;
console.log(txt); //log
console.dir(txt); //dir
};
xhr.send(null);

}

addEventListener('click', ajax, false);

Javascript 소스만 위와 같이 변경을 한다.

실행을 해보면 다음과 같은 결과를 console에서 확인 할 수 있다.

위와 같이 log 는 단순하게 인자값으로 넘겨준것을 console 에 반환해서 찍어주고 dir은 인자값으로 넘겨준 값을 자세하게 그 안에 어떤것들이 들어있는지 method, property등 을 보여준다.

HTMLTextAreaElement 앞에 화살표를 눌러보면 아래로 펼쳐 지면서 목록을 쭉 볼수 있다.
나같은 경우는 dir을 지정한 객체가 method를 가지고 있는지 혹은 prototype을 공부할때 prototype 을 만들어서 상속했을때 어떻게 상속이 되는지 이런것을 확인 할때 주로 사용 했었다.

동영상 예제에서 보면 dir()을 사용하는데 이건 소스에 그대로 사용해서 쓰면 오류가 발생한다.
다음과 같은 오류가 발생한다.

Uncaught ReferenceError: txt is not defined

$0 / inspect()

먼저 inspect() method는 console 창에서 inspect() Method를 호출하면 인자값으로 넘겨주 Element를 Elements탭에서 선택된 상태로 표시해준다.
페이지 에서 마우스 오른쪽 버튼을 누르고 “요소 검사” 검사를 통해서 선택하는거와 같은 기능이다.

$0는 inspect() 를 통해서 선택된 기준으로 $0 는 현재 선택된 Element를 나타내고 숫자가 증가하면 이전에 선택했던 Element를 기억하고 있다가 차례대로 반환한다.

$$

동영상에 보면 bling bling function 이라고 부른다. 달러 표시를 그쪽에서는 그렇게 부르는듯 하다.
console 창에서 $$ 를 입력해보면 다음과 같은 function 몸체를 볼수 있다.
대략 봤을때 인자 값을 받아서 querySelectorAll Method를 통해서 Element 를 반환해주는 함수 인거 같다.

예제로 확인해 보자. $$ 함수에 textarea 를 찾아보면 다음과 같이 textarea를 반환해 주는것을 확인 할 수 있다.

document 상에 있는 textarea를 배열로 반환해 준다. 현재 페이지에 textarea가 하나밖에 없어서 하나만 나온것이고 li element를 확인해보면 배열로 여러개의 li element를 반환해 주는것을 볼 수 있다.

monitorEvents()

monitorEvents 함수는 인자값으로 받은 Element 에서 발행하는 Event를 모니터링 해주는 함수이다.

예제를 확인해 보자.

위와 같이 monitorEvents() 함수에 인자값으로 $$ 함수를 사용해서 textarea를 넘겨주면 textarea 위에서 발생하는 마우스 이벤트, 키보드 이벤트를 확인 할 수있다.
console에 나와 있는 화살표를 눌러서 자세하게 확인 할 수도 있다.

keys() / values()

keys() , values() 함수는 다음 예제와 같이 인자값으로 넘겨준 값이 가지고 있는 모든 key 값과, value값을 console창에 반환해서 보여주는 함수이다.

copy()

동영상에서 보면 알겠지만 copy() 함수는 console에 보여질 내용을 보기 힘들때 반환값을 copy 해서 다른 에디터라던지 등등 옴겨서 볼때 사용하는 함수이다.

예제를 확인해 보면 copy함수를 통해서 keys 값을 복사 하는 것을 확인 할 수있다.

super-cool Opera and Firebug

Opera의 Dragonfly

FireFox의 Firebug

이 두가지는 따로 얘기 하지 않고 링크만 걸어두겠다.

more devtools

more devtools 는 Chrome Developer Tools: Console 에서 console에 대한 자세한 내용을 볼 수 있다는 설명입니다.

설명에 보면 Console은 Firebug 의 Command Line API 를 지원한다고 써 있습니다. 이곳에 가면 console에서 사용 할 수있는 API 를 자세하게 확인 할 수 있습니다.

공유하기 댓글

Javascript Global Object

##Global Object##

Javascript에는 Global Object가 있다.

쉽게 말하면 Javascript에서 기본적으로 제공되는 전역객체 이다.

어떤것들이 있는지 알아보자.

  • Array
  • Boolean
  • Date
  • Function
  • Number
  • Object
  • RegExp
  • String

Javascript Core 부분을 공부할때 나오는 것들이지만 자세히 보지 않고 지나처 버려 잘 알지 못하는 것들이다.

보통 Javascript를 공부한다고 하면 DOM 부터 공부를 많이 하게 된다.
이유를 생각해보면 간단하다 당장 웹페이지 개발을 할때 써야 할 것 들은 DOM을 조작하는 일이 많기 때문에 DOM을 먼저 공부하게 되고 Core 부분은 그냥 넘어가 버리게 되고 만다.

이렇게 되면서 어느덧 DOM이 Javascript인것 처럼 여겨 지게 된거 같다. 실질적으로 DOM은 Javascript 가 아니다 단지 Javascript 로 DOM 을 접근할 수 있는 DOM API가 있을 뿐이다.
ECMAScript에서도 확인해보면 DOM 은 나와 있지 않다.

내가 생각하는 Javascript 를 공부할때 우선 순위는 Global Object(Core)를 알고 그것들의 Property, Method를 아는게 Javascript의 기초라고 생각한다.
Global Object 의 Method를 알고 나면 내가 숫자, 문자, 배열을 만들었을때 자신이 만들지도 않은 Method를 왜 쓸수 있는지 또 prototype은 무엇인지 궁금하게 되고 자연스럽게 공부 할 수 있다고 생각한다.

나도 그동안 소홀했던 부분을 이제 부터 차근차근 Core 부분의 Global Object의 Method 를 정리 해볼까 한다.

항상 블로그를 만들고 마음을 먹고 정리하다 보면 Array Method만 하다가 끝났었는데 이번에는 꼭 끝까지 다 정리 하는 것을 목표로 하고 실천해 볼려고 한다.

공유하기 댓글

Remembering Steve Jobs

좋은 곳에서 편히 쉬길 바라며…

공유하기 댓글

Octopress Blog Start

그동안 Wordpress를 웹호스팅에 설치해서 사용을 하다가 만료가 되어서
Tumblr에서 블로그를 사용하고 있었는데 Twitter에서 우연찮게 Octopress를 알게되었다.

@reiot님의 블로그를 Octopress 로 이전하시면서 Wordpress to Octopress 라는 Title로 Posting을 하셨다.

Octopress 에 대한 설명을 써주셨는데 Octopress는 정적 사이트 생성기인 Jekyll을 이용해서 블로그를 손쉽게 구성하도록 해주는 루비 프레임워크다. 로컬에서 작성을 하고 HTML을 생성해서 Github, Amason S3, 구글 앱엔진에서 블로그 서비스를 가능하게 해준다 라고 써주셨다. 설명처럼 Octopress는 DB를 따로 사용하지 않고 다른 서비스에 만들어진 HTML을 올려서 HTML페이지를 보여주게 된다.
또 여러가지 Plugins를 지원하고 있는데 그중에서 Code blocks, Gist Tag, Include Code는 개발자들이 블로깅을 할때 code 를 이쁘게 보여주므로 예제 소스작성 할때 아주 멋진 블로깅을 할 수 있을꺼 같다.내가 Octopress를 사용할려고 마음 먹은 가장 큰 이유 중에 하나 이다.

사용하면서 느끼는 점이지만 웹에서 어드민을 따로 두고 사용하지 않고 로컬에 자신이 사용하는 에디터로 Markdown 문법으로 작성해서 변경된 부분도 로컬에서 확인이 가능하다는 점이 개인적으로 마음에 든다. 웹 에디터는 왠지 불편한점이 있었다. Octopress는 블로깅을 한다기 보단 웹페이지를 만든다는 느낌이 있어서 마음에 든다.

Setup

http:// octopress.org/docs/setup 페이지에 가면 Octopress Setup 이 있다.

첫째 줄에 나오는 설명에 보면 Octopress is a blogging framework for hackers. 라는 문구가 있다.
개발자를 위한 블로깅 플레임웍 얼마나 멋지 구리 한가 약간 geek 스럽긴 하지만 내 맘에 들면 그만이다~ ㅋㅋ

이제 설치 방법을 알아보자.
가장 먼저 할것은 Ruby 1.9.2 버전을 설치 해야 한다. 여기선 설치방법을 두가지를 설명해주고 있다.
RVM 과 rbenv 요렇게 두가지다. 루비를 잘 모르므로 그나마 많이 들어 봤던 RVM으로 설치를 진행했다.
RVM이 설치 되어 있다면 Ruby 설치 부터 진행하면 되지만 RVM이 설치가 되있지 않다면 RVM설치부터 진행 하면 된다.

RVM설치Installing RVM
1
2
3
4
5
6
7
8
$ bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)
# curl로 rvm 을 받는다.

$ echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" #Load RVM function' >> ~/.bash_profile
# .bash_profile rvm PATH 을 설정한다.

$ source ~/.bash_profile
# .bash_profil 파일 갱신

이제 RVM으로 Ruby를 설치하고 1.9.2버전을 사용한다.

Ruby Install
1
$ rvm install 1.9.2 && rvm use 1.9.2

다음은 github에 있는 octopress 를 clone 받는다.

Clone Octopressgithub
1
2
$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress

octopress 디렉토리에 처음 접근 할 RVM으로 설치를 했을경우 .rvmrc 파일을 신뢰하는냐? 라고 물어본다.
yes 라고 하면 된다.때

다음은 의존성 설치이다.

Install dependencies
1
2
$ gem install bundler
$ bundle install

gem install bundler 할경우에 혹시 “ERROR: LOADING COMMAND:INSTALL (LOADDEROR) ZLIB” 라고 에러 메시지가 나온다면 zlib 가 없어서 그런듯하다.
RVM으로 Ruby 를 삭제하고 Ruby 설치 할때 옵션을 주면 된다.

Ruby reinstall with option
1
2
3
4
5
6
7
8
$ rvm remove 1.9.2
# Ruby 삭제

$ rvm install 1.9.2 --with-zlib-dir=$rvm_path/us
# 다시 설치

$ gem install bundler
# 의존성 다시 설치

다음은 default Octopress theme 을 인스톨 한다.

Octopress Default Theme Install
1
$ rake install

다음은 github 에 올리기 위한 설정이다.

github의 계정에 가서 새로운 Repository를 생성한다. Repository 이름은 다음과 같이 username.github.com (여기서 username은 자신의 github계정을 말하는 것입니다.)으로 해준다. github 계정으로 블로그 서비스를 하기 위한 Repository 생성 방법이다. 이렇게 생성을 하게 되면 http://j2p.github.com 처럼 페이지 접근이 가능하게 된다. 이것은 github에서 지원해주는 것이다.

계정이 생성 되었으면 Octopress 디렉토리에서 다음과 같은 명령어를 입력한다.

Setup github
1
2
$ rake setup_github_pages
# github url을 물어보면 이전에 생성한 Repository 주소를 입력한다.

위와 같이 하면 github와 연동이 된다.

다음은 블로깅을 하기 위한 명령어 들이다.
간단하게 3가지 명령어 만으로 적용하고 미리보고 올리기 된다.

명령어
1
2
3
4
5
6
7
8
$ rake generate
# 변경된 내용을 적용하고 html을 생성

$ rake preview
# 변경된 내용을 로컬에서 미리 보기한다. (http://localhost:4000)

$ rake deploy
# 변경된 내용을 github 에 push 해준다.

여기 까지 진행하면 http://username.github.com 에서 자신의 블로그가 생성된걸 확인 할 수 있다.

이렇게 해서 Octopress 설치가 끝났다. 이렇게 결과를 보는데만 4일이 걸렸다.
처음에 이해를 잘못했던 부분들이 있어서 시간이 더 오래 걸렸던거 같다.
그래도 @reiot님의 도움을 받아서 정확하게 이해를 하고 설치를 끝낼수 있었다. 초면인데 질문에 대한 답변을 해주신 @reiot님께 다시 한번 감사드립니다.

공유하기 댓글