UIX

Jquery 버전 가져오기

2013-04-04T00:00:00+00:00

// Returns string Ex: "1.3.1"
$().jquery;

// Also returns string Ex: "1.3.1"
jQuery.fn.jquery;

프론트엔드 개발시에 유용한 크롬 확장들

2012-09-17T17:53:14+00:00

소개되는 확장기능중엔 비슷한 확장들이 많지만 그래도 맘에들어 현재 쓰고 있는 확장들

Sight

js,css 소스 하이라이트 , 압축된 js 이쁘게도 보여줌
확장 옵션에서 배경색을 흰색톤으로 맞춰주면 보기 좋음

jQuery - dom 요소 위치 변경하기 예제들

2012-09-15T00:12:02+00:00

<div id="menu">
  <p class="about">이곳은?</p>
  <p class="jquery">jQuery 맛보기</p>
  <p class="nodejs">node.js 맛보기</p>
  <p class="mongodb">mongo DB 맛보기</p>
</div>

위와 같은 메뉴에서 jquery와 mongodb의 위치를 jQuery를 이용해서 바꿔보자.

아래 실행되는 코드는 이곳에서 테스트 가능하다.

코드 1

$('.jquery').clone().appendTo( $('#menu') );    
$('.mongodb').replaceAll( $('.jquery').eq(0) );

.jquery를 하나 더 만들어서 #menu 제일 하단에 넣는다
.mongodb로 첫번째 .jquery를 대체

코드 2

$('.jquery').replaceWith( $('.mongodb') ).appendTo( $('#menu') );

.jquery를 .mongodb 로 대체하고 바로 #menu 하단에 넣는다

코드 3

$('.mongodb').after( $('.jquery') );
$('.about').after( $('.mongodb') );

.mongodb뒤에 .jquery 두고
.about 뒤에 .mongodb

코드 4

$('.mongodb').after( $('.jquery') ).insertAfter( $('.about') );

.mongodb뒤에 .jquery 두고, 바로 .about 뒤에 두기

replaceAll(), replaceWith()
after(), insertAfter()
append(), appendTo()

누가 selector이고 target인지만 잘 구별 할수 있으면 될듯.. 머리 아픔

jQuery - 페이지에 위로가기 버튼을 넣어보자

2012-09-11T00:36:03+00:00

스크롤이 길게 생기는 페이지에서 글을 다읽고 위에 있는 메뉴등을 접근하기 위해서 제공되는 ‘위로가기’ 버튼을 넣어보자

HTML 만들기

테스트용 html은 html5 doctype으로 생성하고 jQuery최신버전을 호출하자

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>위로가기 버튼 만들기</title>
<style>
</style>
</head>
<body>
<img src="test.jpg" alt="스크롤 생기게" width="600" height="2000">

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
//이곳에 위로가기 버튼 동적으로 넣기
</script>
</body>
</html>

위 코드에서 <img>태그는 문서에 스크롤이 생기게 해주는 더미 태그이다.

CSS 만들기

‘위로가기’ 버튼을 이미지로 할 예정이다. <div class="top" />에 background로 이미지를 넣어주자.

.top {
    position: fixed;
    bottom:20px;
    right:30px;
    background: url(http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/go-up.png) no-repeat;
    width:48px;
    height:48px;
}

위로가기 버튼은 항상 그 위치에 있어야 하기에 position:fixed 를 주고 오른쪽 하단에 위치하게 bottom:20px;right:30px를 주었고 widht,height는 이미지 사이즈와 동일하게 48px 로 세팅

javascript 만들기

이제 script 로 동적으로 위로가기 버튼을 넣어줄 차례이다.

스크롤위치(scrollTop())가 100이상 일때만 보이게 하고 위로가기 버튼을 눌렀을때도 스무스하게 올라가게끔 처리.

$(document).ready(function(){
    var $body = $(document.body), //자주 사용하기에 캐시되게 변수에 넣어준다
        $top = '';

    $top=$('<div>') //div 를 만들고 
            .addClass('top') //top className을 주고
            .hide() //처음에는 숨겨둔다
            .click(function(){  // 클릭이 이벤트 할당
                $body.animate({ scrollTop: 0 }); //animation효과로 scollTop=0으로 이동
            })
            .appendTo($body); // body에 top을 넣는다

    //윈도우의 스크롤위치로 위로가기 버튼을 보여줘야기에 핸들러 작성
    $(window).scroll(function(){

        var y = $(this).scrollTop();

        if(y >= 100){
            $top.fadeIn();
        }
        else {
            $top.fadeOut();
        }
    });
});

데모보기

http://jsbin.com/etoduc/1/

jQuery - 이벤트전파방지, 기본동작막기

2012-09-08T12:12:20+00:00

event.preventDefault()

링크,폼등의 기본동작 중지

예제보기 - http://jsbin.com/amized/1/

$(a).click(function(event){
    //동작구현

    //이벤트막고 , 기본동작 중지
    event.stopPropagation();
    even.preventDefault();

    //return false; 로 대체가능

});

jQuery - html문서 손쉽게 불러서 끼워넣기 .load()

2012-09-08T10:02:50+00:00

a:http://jsbin.com/orafim/1

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <div id="result"></div>
<script>
$('#result').load("http://jsbin.com/alijey/3 #msg");
</script>

b:http://jsbin.com/alijey/3/

 <h1>테스트</h1>
<div id="msg">Hello World!!</div>

a문서의 #result에 b문서의 #msg부분을 불러서 넣는 간단한 예제

BigNews - BigVideo.js의 프로토타이핑 서비스

2012-08-30T11:39:11+00:00

브라우저 전체화면에서 동영상을 재생시켜주는 BigVideo.js을 이용한 프로토타이핑

크롬에서 작업했는데 BigVideo.js에서 크로스브라우징을 잘 처리해주어 다행^^

http://niceaji7.github.com/big-news/

node.js - 간단한 Static 서버 만들기

2012-08-30T10:36:22+00:00

로컬에서 개발하다보면 WAS까지는 아니더래도 서버환경을 구성하고 개발할 필요가 생기게 된다.

이때 보통 apache서버를 이용하는 경우가 많은데 간단하게 node.js로도 static서버가 가능하다.

node-static 모듈을 사용하면 간단하다.

터미널 환경에서 사용할 예정이니 global로 설치하자

sudo npm install -g node-static

이제 터미널에서 root가 될 디렉토리로 가서 static 이라고 입력하면 static 서버가 올라간다.

javascript 만으로 파일 업로드 구현

2012-07-26T13:01:54+00:00

이전에 봤던 imgur.com API 를 이용해서 javascript 만으로 직접 업로드를 구현해보자

http://www.uix.kr/drag-uploader/

html5 file API를 이용해서 간단하게 가능한데 소스를 보면 쉽게 이해 가능하다.

이미지를 브라우저에 드래그앤 드랍으로 떨구면
file API로 이미지를 읽고
imgur.com에 base64방식으로 업로드 ~

간단하게 js,css minify 해보자 - Yuicompressor Online

2012-07-23T18:31:17+00:00

js,css 를 실제 서비스에 배포할때는 압축(minify)를 하게 된다.

미디어다음 js - http://s1.daumcdn.net/photo-media/static/media/3.3.2.3/dist/news.commons.min.js

minify 하게되면 지역변수가 짧아지고 공백과 주석이 제거되어 성능향상(용량)과 소스보안에도 도움이 될수 있다.

이때 주로 Yuicompressor 가 사용되어지는데 매번 그 환경을 구성하기가 번거롭다.

그래서 간단하게 js파일을 업로드하면 압축된 js소스를 뱉어주는 서비스를 만들어 보았다.

http://yuionline.herokuapp.com/

heroku에 올려보았다. 나중에 정리예정
참고 - heroku nodejs, H14 에러
이미 비슷한 서비스도 존재

알수없는 npm install 에러 발생시?

2012-07-23T16:33:20+00:00

express.js를 npm 설치하려는데 계속 알수 없는 에러가 발생하여 찾은 해결책

npm cache clean

에러를 기억?하고 있는 npm의 캐시를 날리는듯~

lazyload - 이미지를 늦게 load하여 웹성능 향상하기

2012-07-19T15:35:19+00:00

요즘의 웹페이지에는 많은 이미지를 포함하게 된다.

웹페이지 첫 로딩시에는 사용자의 브라우저 영역안의 이미지만 로드를 하고 스크롤될때 해당 영역의 이미지를 로드하면 성능이 좋아질수 있는데 이러한 방법을 lazyloading이라 한다.

실제 실무에서 사용하는 방법은 여러가지가 있을수 있는데 그중에 lazyload라는 간단한 js모듈을 소개 한다.

<img
    data-src="real/image/src.jpg"
    src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
    onload=lzld(this) onerror=lzld(this) />

lazyload js을 head에서 부르고 위처럼 img 태그를 구성하면 끝이다.

실제 테스트는 이곳에서 해보자 ( 브라우저 창 높이를 작게 해서 보자 )

위의 그림을 보듯이 하단에서 불려지는 이미지는 아직 로딩전이고 스크롤을 내리면 로딩되는것을 확인할수 있다.

프로토타이핑에 유용한 이미지 업로드 API - imgur.com

2012-07-16T20:13:15+00:00

프로토타이핑할때 간단하게 이미지업로드를 할경우에 간단하게 사용할수 있는 OpenAPI를 살펴보자

imgur 서비스는 간단하게 이미지를 공유하는 심플한 서비스이다.

간단하게 사용자 등록만 하면 Anonymous Upload API를 제공하니 써볼만 하다. (복잡한 OAuth 없이 ^^)

사용자 등록을 하면 바로 (귀찮은 이메일인증도 없다) Developer API Key를 발급해준다.

어딘가에 잘 카피하고 이제 api문서에서 upload 부분을 살펴보자

http://api.imgur.com/2/upload 에 POST로 key와 image파라미터를 넘기면 된다.

key는 아까 등록할때 받았던 Developer API Key이고, image 에는 ‘A binary file, base64 data, or a URL’ 같은 이미지 정보를 넘겨주면 된다

curl로 바로 테스트 해보기 위해 터미널을 열고 테스트 image 를 다운로드 하자

curl  http://icon.daumcdn.net/w/c/12/03/77951173032424319.png -o daum.png

다운로드 된 daum.png를 바로 imgur서버로 업로드 해보자

curl -F image=@daum.png -F "key={Developer API Key}" http://api.imgur.com/2/upload

이젠 리턴문구가 성공인지만 확인하면 된다.

Dev HTTP Client - API 테스트 크롬 익스텐션

2012-07-16T19:27:53+00:00

curl로 api 테스트하는 방법을 살펴보았다

GUI로 할수 있는 방법도 매우 많은데 그중에 크롬익스텐션으로 나온 Dev HTTP Client 를 소개한다.

사용법은 간단하다. 크롬웹스토어에서 다운로드 받아 실행하고

api url를 적고 post,get 처럼 http method를 선택후에 ‘send’버튼을 누르면 응답이 아래에 펼쳐지게 된다.

post 일경우엔 body부분에 파라미터 스트링을 적어주고 header에 Content-Type:application/x-www-form-urlencoded를 빼먹지 말자.

curl로 api테스트 하기

2012-07-13T14:06:47+00:00

curl은 명령행 기반 웹 요청 도구이다.

개발초기에 백엔드에서 만들어준 api를 테스트할때 요긴
REST 애플리케이션을 개발 테스트시에 유용

터미널을 실행하고 아래 명령들을 날려보자

// get
curl http://uix.kr/widget/parameter.php?a=1&b=2

// post
curl -F "a=1&b=2" http://uix.kr/widget/parameter.php

// file upload  (해당디렉토리에 test.js가 필요)
curl -F upfile=@test.js -F "type=file"  http://uix.kr/widget/parameter.php

http://uix.kr/widget/parameter.php의 소스는 여기서 확인 가능하다.

Twitter Bootstrap 관련 위젯 모음

2012-07-02T19:39:38+00:00

트위터에서 만들어서 공개한 Bootstrap은 웹사이트를 아주 쉽게 만들게 해준다.

주로 관리자화면이나 프로토타이핑을 할때 디자인을 신경쓰지 않고 빨리 만들때 무척이나 용이하다

요즘 대세인 GitHub에서도 가장 활발한 커뮤니케이션이 이루어지고 있는 프로젝트 이기도 하다 https://github.com/popular/watched

그래서인지 Bootstrap과 관련된 위젯,플러그인들이 아주 많은데 쉽게 모아볼수 있는 서비스를 간단하게 구성해 봤다. GitHub에서 호스팅하는 이유는 대세이기도 하지만 혹시나 누군가 수정을 하고 좀더 나은 프로젝트가 될수 있지 않을까 하는 기대감 때문이기도 하다;

http://bf.uix.kr

jQuery 팁2 - ajax로 폼값 쉽게 넘기기 serialize()

2012-06-14T10:08:03+00:00

serialize()는 form요소들의 값을 한번에 url parameter형식으로 변환

ajax형태의 submit등에서 유용

html 코드

<div id="debug"></div>
<form id="wform">
    id : <input type="text" name="id" value="aji" > <br>

    sex :<input type="radio" name="sex" value="m" checked >
    <input type="radio" name="sex" value="f" > <br>

    <button type="submit">전송</button>
</form>

js 코드

$('#wform').submit(function(evemt){

    $('#debug').html( $('#wform').serialize() );

    //ajax 구현

    event.preventDefault();
});

동작예제를 참고

jQuery 팁1 - jQuery.when()

2012-06-13T16:28:21+00:00

js애플리케이션 개발시에 다수의 api 들을 비동기로 호출하는 일이 빈번하다.

이때 A라는 api에서 B라는 api데이터를 참조해야할때 ‘A api’ callback에서 ‘B api’ 를 호출 하기도 하는데 ..

jQuery.when()은 이때 사용하면 좋은 메소드이다.

function showData(data1, data2) {
    $('#debug').html( data1[0].max_id  +":"+ data2[0].max_id );
}

function method1() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'niceaji'
        },
        dataType: 'jsonp'
    });
}

function method2() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'niceaji'
        },
        dataType: 'jsonp'
    });
}

$.when(method1(), method2()).then(showData);​

직접 작동예제를 보면 이해가 쉽다.

jQuery 이해10 - DOM요소를 추가하는 여러가지 방법

2012-06-12T19:04:46+00:00

동적으로 요소를 추가하고 (createElement())하는 방법을 살펴보자

소개되는 예제코드는 예제페이지로 이동한후 개발자도구 콘솔을 열어서 실행하면 된다.

//#box에 <div>를 추가해
$('#box').append('<div>난 div 요소</div>');

간단하다. 좀 다른느낌? 으로도 가능하다.

// <div>요소를 #box에 추가해
$('<div>').appendTo( $('#box') )
        .text("난 div 요소")
        .addClass("border")
        .css("background-color","#fff");

메소드 체이닝으로 요소의 어트리뷰트를 수정했다. 이 부분을 좀더 다른느낌으로 만져보자

$('<div>', {  
    text : '난 div 요소',
    addClass : 'border',
    css : {
        "background-color":"#fff"
    }
}).appendTo( $('#box') );

재밌지 아니한가?

jQuery 이해9 - delegate로 이벤트 한방 등록

2012-06-12T15:55:06+00:00

jQuery에는 이벤트등록을 할수 있는 흥미로운 방법이 존재한다.

바로 delegate()인데 1.7버전 이상부터는 on()메소드를 권장하니 on()으로 살펴보자.

소개되는 예제코드는 예제페이지로 이동한후 개발자도구 콘솔을 열어서 실행하면 된다.

delegate형태로 이벤트 등록

$(document.body).on('click', 'div', function(event){
    console.log(event.target,   event.currentTarget);
});

on()메소드의 두번째 인자가 div이다.

해석해 보자면 document.body에 click이벤트를 주고 document.body > div 만 감시하겠다. 라는 의미 이런 delegate방식은 동적요소가 추가될경우 빛을 발한다!

동적요소 추가시 이벤트 등록

$('#box').on('click', 'p', function(){
    $('#box').append("<p>나도 p태그, 클릭해보아요</p>");
});

위의 코드로 새로 생기는 p태그에도 동일한 이벤트를 할당하게 된다.

예제 http://jsfiddle.net/niceaji/ea7v7/

delegate는 dom요소가 렌더링이 되기전에 이벤트 등록이 가능하고 이벤트 등록갯수를 줄이게 되어 결국 퍼포먼스 향상으로 이어질수 있다

jQuery 이해8 - 이벤트 등록

2012-06-11T10:48:44+00:00

jQuery에서 이벤트 관련 메소드들은 무척 많다.

그중에 편한방식,마음에 드는 방식을 선택하면 되는데 하나씩 살펴보자.

소개되는 예제코드는 예제페이지로 이동한후 개발자도구 콘솔을 열어서 실행하면 된다.

이벤트 등록

$('#box').on('click', function(event){
    console.log(this,event);
});

//이렇게도 가능
$('#box').click(function(event){
    console.log(this, event);
});

on메소드를 사용해서 간단하게 이벤트 등록이 가능하다.

이벤트콜백함수 안에서의 this는 이벤트가 발생된 엘리먼트 그대로를 가르키고 event인자는 jQuery Event객체를 가르킨다. 특이하게 click()처럼 이벤트명의 메소드들도 존재하는데 편한대로 사용하면 된다.

jQuery Event객체

기본 js Event객체가 크로스브라우징이 필요하기에 통일된 jQuery Event객체를 제공한다.

$('#box').on('click', function(event){
    console.log('#box 이벤트를 시작한 요소', event.target );
    console.log('#box 이벤트 요소', event.currentTarget );

    console.log('#box 네이티브 event객체', event.originalEvent );
});

$(document.body).on('click', function(event){
    console.log('body 이벤트를 시작한 요소', event.target );
    console.log('body이벤트 요소', event.currentTarget );
});

이벤트 전파방지, 기본동작 막기 : http://uix.kr/archives/1153

js 즉시 실행함수로 안전하게 사용하기

2012-06-08T14:18:12+00:00

프로젝트를 진행하다보면 여러 개발자들의 짜는 js소스들의 변수,함수 이름이 겹치기도 하여 예상치 못한 버그를 만들어 내기도 한다. 이때 즉시 실행함수 패턴을 사용하면 보다 안전하게 개발할수 있다.

(function(){
    //이곳에서 코드작성 

    var myName = 'aji'; //지역변수

    window.myName = myName; //전역화
})();

js는 함수스코프를 갖기에 임의의 함수를 만들고 바로 실행시키는 간단한 패턴이다.

안에서 변수,함수는 var로 선언하여 전역변수가 안되게 하는게 포인트 .

jQuery등의 라이브러리 사용시에도 해당 라리브러리에서 주는 별칭끼리 충돌을 피하려면 이런방법이 효율적이다

(function($){
    //이곳에서 코드작성 

    $('#box').hide();
})(jQuery);

pjax 배워보기

2012-06-05T10:14:34+00:00

pjax ?

pushState + ajax 의 합성어인 pjax는 github의 창립자,CEO인 defunkt가 개발했단다.

천천히 뜯어보자.

pushState()

pushState() 는 html5의 포함된 메소드로 history객체를 조작 가능하게 해준다.

아직 ie에서는 지원되지 않으니 크롬이나 파폭에서 아래의 예제를 보자.

예제 : http://uix.kr/ex/push-state-example/html5.html

예제의 링크를 클릭하면 주소표시줄에 url이 변경되지만 실제로는 서버에 요청이 가지 않는다.

window.history객체에 pushState()가 이러한 작업을 가능하게 해주는데 세번째 인자로 url를 변경하고 두번째 인자로 문서의 title를 변경하게 된다(title변경은 잘되질 않는다.버그인듯). 더 자세한 설명은 매뉴얼을 참고

history.pushState({url:url}, title, url);

pushState()로 히스토리를 추가한후에 뒤로가기,앞으로가기(history.back()) 버튼을 누르면 popstate 이벤트가 발생한다.

$(window).on('popstate',function(event){
    var state = event.originalEvent.state;
    console.log("popstate:", state );
});

이때 event.state(event.originalEvent.state)는 pushState()에 첫번째 인자값을 가져오게 된다.

pjax 간단 예제 보기

php를 사용하는 간단한 웹서비스 예제를 살펴보자

컨텐츠 동적으로 가져오기

$('a').pjax('#main');

자동으로 a태그의 href부분을 ajax 로 읽어서 #main 에 넣어준다.

ajax로 호출될때와 직접 호출될때 달라지는 문서내용

이 부분의 pjax의 핵심이다.

<?
//문서 호출시에 request header에 넣어주는 값으로 pjax인지 체크
$pjax = ($_SERVER['HTTP_X_PJAX']==="true");

if($pjax){
    //타이틀 변경하기 위해서
    echo "<title>{$title}</title>";
    return;
}
?>

$pjax이면 header.php와 footer.php를 include하지 않는다

브라우저 개발자도구로 실제 a.php클릭시에 호출되는 내용 확인

pushState() 지원하지 않는 브라우저는?

링크 그대로 이동하기에 안전하다. 실제 ajax 에러시에도 직접 링크로 이동한다.

정리

pjax는 ajax를 사용하는 웹서비스에서 해쉬뱅(뒤로가기나 퍼머링크 구현을 위한)이 아닌 pushState()를 이용하여 실제 url를 변경하게 되어 해쉬뱅이 갖는 단점들을 보완할 수 있다.

도움글

PHP Selector 소개

2012-05-30T09:54:21+00:00

PHP Selector 풍기는 이름에서도 대충 어떤일을 하는 라이브러인지 짐작이 가능할것 같다.

PHP로 html문서를 파싱할때 CSS Selector문법으로 쉽게 요소를 가져올수 있게 도와준다. (PHP DOM parser / queries with CSS selectors)

자주쓰던 php용 라이브러리 PHP Simple HTML DOM Parser 보다 더 심플하다.

include "selector.inc";
$dom = new SelectorDOM($html);
$links = $dom->select('a');
$list_links = $dom->select('ul li a');

한글이 있을경우 깨질때는 html 스트링 맨처음에 아래 코드를 넣어주면 해결된다;

<meta http-equiv="content-type" content="text/html; charset=utf-8">

타임라인 프로토타이핑 할때 사용한 소스를 참고.

Timeline JS 붙여보기

2012-05-29T17:57:57+00:00

괜찮은 타임라인 라이브러리가 공개가 되어 오랫만에 프로토타이핑 진행

미디어다음에서 서비스하는 주요이슈들을 타임라인에 얹혀보았다.

http://uix.kr/ex/issue-timeline/

횡설수설

jQuery 필요!
이런 라이브러리 특징이 그렇듯 json포맷만 맞춰서 넘겨주면 알아서 그려준다.
특이하게 데이터포맷은 구글닥스 url로 넘겨줘도 된다
이제껏 공개된 타임라인 라이브러리중 비주얼은 최고;

jQuery cdn서비스 이용시 안전한 방법

2012-05-25T19:01:15+00:00

jQuery를 문서에 삽입할경우 cdn서비스를 이용하면 편리하다.

이때 만약 cdn서비스가 죽는다면 내 웹사이트는 어떻게 보장하지? 라는 물음이 들때 사용할수 있는 방법

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

당신의 브라우저의 javascript 버전은?

2012-04-30T18:44:24+00:00

프론트엔드 개발자들은 js버전에 대해선 다들 무관심? 하다.

브라우저 버전이 곧 js 개발환경을 말해주기에 굳이 알필요가 있을까 싶다. 갑자기 궁금증해져 검색해보니 단순하고 무식한 방법으로 js버전 체크가 가능했다;

주요 브라우저 js 버전

크롬 18 - 1.7
파폭 11 - 1.8
ie9 - 1.3
사파리 5.1.5 - 1.7

버전 확인!

근데 ie9 는 정말 1.3 인겨??

워드프레스로 만든 Code Snippet 서비스

2012-04-19T13:59:15+00:00

워드프레스를 이용하여 간단하게 구현해본 Code Snippet 서비스 소개한다

http://snippet.uix.kr

개발시에 까먹기 쉬운 코드들을 온라인상에 정리하여 쉽게 가져다 쓸수 있고 소셜 로그인 기능으로 누구든지 쉽게 snippet 추가가 가능하다.

사용된 플러그인 & 테마

Random Post Link - 랜덤한 포스트를 선택할수 있게 해줌
Social Login - 트위터등으로 워드프레스 로그인을 가능하게 해줌
WP Tweet Button - 트위터 버튼 추가
WordPress Bootstrap 테마 - 반응형웹디자인 지원

도전! 워드프레스로 SNS 만들기

Canvas를 이용한 TreeMap 인포그래픽

2012-03-18T20:40:57+00:00

예전에 프로토타이핑을 해보며 봐왔던 JavaScript InfoVis Toolkit에 TreeMap 라이브러리를 사용하여 이번 19대총선 웹서비스에 SNS맵 인포그래픽을 선보였다.

라이브러리에서 HTML5의 Canvas를 사용하여 표현하고 지원하지 않는 IE8이하에서는 excanvas를 사용하여 렌더링을 하게된다.

보통 포털처럼 여러종류의 사용자를 커버해야하는 서비스등에선 HTML5의 최신기술들을 사용하기가 꺼려지는게 사실이다. 낮은 버전의 브라우저에 대한 하위호환성을 유지하기가 쉽지만은 않기 때문이다. 그리고 이런 부담들은 대부분 프론트엔드개발자들의 몫이 될수 밖에 없다.

API

라이브러리의 사용은 쉽다. 예제코드에서 보이는 json형태로 데이터를 구성하고 호출해주면 끝이다. 백엔드에서 받게되는 API를 똑같이 맞추긴 보다 프론트엔드에서 라이브러리에서 원하는 형태로 다시 맞춰주는게 일이 보다 수월해 진다.

SNS맵 백엔드 API 보기

IE9 문제

IE9에서는 Canvas로 렌더링함에도 Area에서 mouseover가 발생하지 않고 Area안 텍스트에서만 mouseover가 발생하였다 그래서 아쉽지만 IE8 문서모드로 고정하는걸로 문제를 해결했다

<meta http-equiv="X-UA-Compatible" content="IE=8">

다른 TreeMap

많은 웹서비스에서 TreeMap 인포그래픽을 사용중이다.

블로그를 뛰어넘는 워드프레스 CMS

2012-03-18T16:13:02+00:00

2001년경에 개발된 워드프레스는 Content Management System(CMS) 이다.

CMS툴로써 세계에서 가장 많이 사용하는 워드프레스는 우리나라에선 NHN의 익스프레스엔진(제로보드의 발전된) 다음으로 많이 사용되어 진다

국내에선 블로그툴로만 관심을 받다가 이제 점차 해외에서처럼 CMS툴로 점차 인식이 바뀌어 나가는듯 하다. 컨텐츠를 관리하는 시스템이라는 의미를 가진 CMS는 단순히 컨텐츠의 효율적인 관리를 벗어나서 ‘지속가능한 웹’을 지향한다는 의미가 더 클 것 같다.

장점

쉽다(설치, 운영….)
오픈소스, 무료
수 많은 테마(스킨) 들과 확장 플러그인들
쉬운 컨텐츠 업데이트
개발기술 없이도 손쉽게 확장 가능

도움 링크

워드프레스로 만들어진 웹사이트

Node.js로 외부 프로그램 실행

2012-03-08T00:08:06+00:00

노드로도 당연히 외부 프로그램을 실행할수 있다.

외부 프로그램 실행 프로그램 만들기

우선 터미널상에서 테스트용 디렉토리를 만들고 nodedate.js파일을 생성하자

> mkdir exec-test       
> cd exec-test          
> vi nodedate.js            ## vi에디터로 nodedate.js생성&열기

이제 아래소스를 nodedate.js에 넣으면 된다

var exec = require('child_process').exec;
exec("date", function (error, stdout, stderr) {
   console.log(stdout);
});

date 는 현재 시간을 보여주는 명령어다. node nodedate.js 로 실행하면 현재시간이 출력 된다

커맨드라인 명령처럼 실행

nodedate.js에 맨상단에 한줄을 추가하면 파일 실행권한을 주게 되면 커맨드라인 명령처럼 사용이 가능해진다

#!/usr/bin/env node
var exec = require('child_process').exec;
exec("date", function (error, stdout, stderr) {
   console.log(stdout);
});

파일의 실행권한을 부여하자

> chmod 755 nodedate.js

자~ 이제 ./nodedate.js 로도 실행이 가능해 진다

exec-test > chmod 755 nodedate.js
exec-test > ./nodedate.js
2012년 3월  8일 목요일 00시 21분 47초 KST

도움글

Child Process

Node.js로 js 소스 압축하기 - UglifyJS

2012-03-06T18:03:27+00:00

UglifyJS 를 이용하면 자바스크립트 소스를 압축할수 있다. 실 서비스에 배포되는 자바스크립트를 압축하면 용량면이나 소스보안? 면에서 이익을 가질수 있다.

콘솔에서 사용하게될 모듈이므로 글로벌 설치 하자. npm install uglify-js -g 글로벌 설치를 하면 어느 디렉토리에서든 uglifyjs 명령이 사용가능 하다.

일단 압축할 js파일을 구하자. 터미널에서 아래와 같은 명령으로 jquery를 다운로드 하자

> curl --output jquery.js http://code.jquery.com/jquery-1.7.1.js

다운로드 되었으니 바로 압축!

> uglifyjs --output jquery.min.js jquery.js

매뉴얼에서 사용할수 있는 여러 옵션도 살펴보자

도움

주요 자바스크립트 압축 도구

손쉽게 코드 하이라이트 추가

2012-03-05T21:50:14+00:00

블로그 글 내용중에 소스코드를 삽입하게 되는데 이때 에디터처럼 컬러풀하게 적용하면 유저들이 좀더 쉽게 소스관찰이 가능하다.

여러종류의 코드하이라이터 중에 내가 선택한 기준은 편리함이다. 마크다운을 사용하는 이유로 작성시에 오직 글에만 집중해야기에 코드하이라이트를 위해 마크업을 추가 작업하는 일은 피곤한 일이다.

google-code-prettify 를 사용하여 이미 작성한 글에도 손쉽게 코드하이라이트를 추가했다. 워드프레스 하단스킨(footer.php)에 추가한 소스는

<link href="/wordpress/wp-content/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/wordpress/wp-content/google-code-prettify/prettify.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
    $('pre').addClass('prettyprint');
    prettyPrint();
});
</script>

이 방법은 페이지 하단에서 불러오기에 페이지 영향속도에 영향을 덜주고 글 작성시에도 피곤하지 않다^^

Node.js 에서 mongoDB 제어하기 – mongoose

2012-03-04T15:52:59+00:00

이전시간에 노드에서 몽고db를 제어할때 몽고리안모듈을 살펴봤다. 이번엔 좀더 색다른 몽구스라는 모듈을 살펴보자

npm으로 설치가 가능하다. npm install mongoose 설치하고 바로 예제소스를 보자

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

// localhost 에 testdb Database에 접속
mongoose.connect('mongodb://localhost/testdb');

//모델의 스키마를 작성한다
var CommentSchema = new Schema({
    desc : String,  //내용
    hit : Number,   //조회수
    date : Date     //작성일
});

// CommentSchema에 맞는 CommentModel 만들기
// comment는 Document , 자동으로 comments Collection 에 모델이 저장된
var CommentModel = mongoose.model('comment', CommentSchema);

//CommentModel의 인스턴스생성
var comment = new CommentModel();

//인스턴스에 값을 할당하고
comment.desc = "nodejs test";
comment.hit = 0;
comment.date = new Date();

//저장하면 바로 몽고db에 올라간다
comment.save(function (err) {
    if (!err) console.log('Success!');
});

좀 복잡하다. Document 에 해당하는 모델을 생성하고 그 모델을 저장하면 몽고db 에 저장이 되는 형태이다. 모델을 만들기전에 스키마(구조)도 만들어줘야 한다. 몽고리안보다 뭔가 있어 보이지만? 불편해 보인다;;

위 소스를 mongoose.js 로 만들고 실행후에 몽고쉘로 접속해서 데이터가 잘 들어갔는지 보자

도움글

mongoDB 5 - _id Field

2012-03-04T13:13:24+00:00

우선 몽고쉘로 접속하여 아래와 같이 testdb 에서 comments에 하나의 row를 추가해서 find() 해보자

방금 추가한 desc필드외에 _id 필드가 보인다.

_id필드는 Document의 고유한 key

위 쉘에서 한번 더 똑같은 Document를 넣어보자.

db.comments.save({desc:'my comment!'})
db.comments.find();

여기서 또다른 고유한 _id필드가 생성된것을 볼수 있다.

_id필드 직접 넣어주기

Collections에 Document를 추가할때 _id필드를 생략하면 자동으로 유니크한 문자열로 생성이 되지만 직접 넣어줄수도 있다

db.comments.save({_id:1,desc:"desc 1"})
db.comments.save({_id:1,desc:"desc 2"}) // _id=1 인값이 update 된다

도움글

mongoDB Object IDs

Node.js 에서 mongoDB 제어하기 - Mongolian

2012-03-03T22:15:46+00:00

몽고db는 프론트엔드개발자가 사용하기에 아주 적합한 데이터베이스이다. 노드에서 몽고db를 컨트롤 해보자

노드의 Mongolian모듈을 설치해 보자

npm install mongolian

테스트 예제는 매뉴얼에서 고대로 퍼왔다

var Mongolian = require("mongolian");
var server = new Mongolian;

var db = server.db("test"); // test Database선택
var posts = db.collection("posts"); //posts Collection 선택

//posts Collection 에  Document 넣기
posts.insert({
    pageId: "hallo",
    title: "Hallo",
    created: new Date,
    body: "Welcome to my new blog!"
});

소스는 이제까지 모든 내용들을 쫒아왔다면 이해하기 아주 쉽다.

파일을 mongolian.js로 저장하고 실행해보면 몽고db 에 하나의 row가 생긴걸 확인할 수 있다

매뉴얼에 insert 말고 다른 예제들도 꼭 따라해 보자

jQuery 이해7 - Effects 메소드들

2012-03-03T11:29:49+00:00

이번엔 좀 재밌는 이펙트관련 메소드를 살펴보자. 소개하는 메소드들은 예제페이지로 이동한후 개발자도구 콘솔을 열어서 입력하면서 테스트 해보면 된다.

.hide()

엘리먼트를 숨긴다

// $('div').css("display","none") 과 동일
$('div').hide()
//천천히 사라지게
$('div').hide('slow',function(){ console.log('hide ok!') });

.show()

엘리먼트를 보여준다

$('div').show()
$('div').show('fast')

.toggle()

엘리먼트 show(),hide() 를 toggle 처리

$('div').toggle('fast')

.fadeOut()

엘리먼트가 opacity값이 빠지면서 사라진다

//모든 태그 사라짐 
$('*').fadeOut()

.fadeIn()

엘리먼트가 opacity값이 채워지면서 나타남

$('*').fadeIn('fast')

.fadeTo()

두번째 인자로 엘리먼트의 opacity를 결정한다

$('*').fadeTo('slow', 0.3, function(){ console.log('done') })

.fadeToggle()

fadeIn(), fadeOut() toggle

.slideUp()

엘리먼트를 슬라이드가 올라가는 형태로 숨긴다

$('#box').slideUp();

.slideDown()

엘리먼트를 밑으로 슬라이드 펼쳐지는 형태로 보여준다

$('#box').slideDown();

.slideToggle()

slideDown(), slideUp() toggle

.animate()

엘리먼트 CSS속성에 에니메이션 효과를 적용하여 변경한다. API 참고

$('#ani').animate({ 
    'background-color' : '#ff0000',
    'top' : '200',
    'left' : '500',
    'width' : 200
},5000, function(){
    console.log('animate end!');
})

.delay()

지연 타이머를 설정

$('#box').slideUp(300).delay(800).fadeIn(400)

이 외에도 현재 동작중인 모든 에니메이션을 멈춘다든가 (jQuery.fx.off), 에니메이션의 framerate를 변경 하는(jQuery.fx.interval) 등의 전역변수들도 참고하자

도움글

jQuery Effects 메소드

jQuery 이해 6 - 메소드 특징 이해

2012-03-02T20:01:44+00:00

jQuery의 Selector메소드, CSS메소드, Attribute메소드를 살펴봤다. jQuery 특징이 보이는가?

그럼 몇가지 특징을 찾아보자. (소개하는 예제들은 예제페이지로 이동한후 개발자도구 콘솔을 열어서 입력하면서 테스트 해보면 된다)

어떤 엘리먼트를 타겟으로 하는가?

// 모든 div안에 text를 집어넣는다
$('div').html("text")

// 모든 div가 아니라 $('div') 에서 가장 처음에 발견된 엘리먼트의 width를 구한다
$('div').width();

jQuery객체를 리턴하는가?

많은 메소드들이 jQuery 자기 자신을 리턴한다. 이렇게 되면 메소드체이닝이 가능하게 된다

//  bgcolor 를 변경하고 uix.kr 텍스트를 집어 넣어라!
$('#box').css("background-color","red").html("uix.kr")

css() 메소드에서 처음 선택했던 엘리먼트인 jQuery객체 $(‘#box’) 를 그대로 리턴한다. 그래서 바로 이어서 html() 이 사용가능해 지는 이유이다.

그럼 아래소스는 어떨까?

// width를 구하고 uix.kr 텍스트를 집어넣어라?
$('#box').width().html("uix.kr")

width() 메소드는 width값을 리턴하기에 메소드체이닝이 불가능하다. 위의 소스를 콘솔에서 실행하면 에러가 발생한다.

수많은 인자 타입들

메소드들에 많은 인자타입이 존재한다 (오버로딩)

//모든 div에 border 클래스를 추가
$("div").addClass("border")

//모든 div에 div-{index} 클래스 추가
$('div').addClass(function(index){   return "div-" + index  })

인자가 없을경우엔 getter 가 되고 있을경우엔 setter 가 되는 경우도 있다

$('#box').width(300) //300px 로 설정
$('#box').width() // width 구하기

Raphael로 구현한 SVG 지도 인포그래픽

2012-03-01T14:39:12+00:00

이번에 19대 총선 서비스를 오픈하면서 역대 선거구별 당선현황을 지도 인포그래픽으로 구현해 보았다.

지도는 Raphael 자바스크립트 라이브러리를 사용해서 그려졌는데 SVG와 VML 중 브라우저에서 지원하는 방식으로 표현을 한다. 보통 지도에 인터랙티브 UI를 구현할때 플래시를 자주 사용하게 되는데 HTML5 이슈 등으로 이 방식을 선택했다.

주요 PC브라우저와 iOS는 커버했지만 아쉽게도 안드로이드에서는 SVG를 지원하지 않기에 보이지 않는다

지도 Path

지도 Path는 사내에서 사용중인 데이터를 그대로 SVG로 익스포트 하였기에 디자이너의 수작업은 필요치 않았다. 그 내려진 SVG를 다시 JSON형태로 변환하여 사용을 한다. 아래는 18대 서울지도(위 이미지)의 Path와 선거구포인트,명의 JSON이다

http://s1.daumcdn.net/photo-media/static/2012g_election/path/109/map18-11.js

Raphael 라이브러리

path 그리기

Raphael 로 그리는건 간단하다. 위 JSON 에서 보이는 path 프로퍼티를 그대로 넣어주면 된다

var paper = Raphael(0, 0, 500, 500);
paper.path( path ).attr("fill", "#eee");

정당별 컬러값을 채우기 위해 attr() 메소드를 사용하여 폴리곤에 색상을 채우게 된다.

선거구명 표시

텍스트(선거구명)를 추가 할경우 text() 메소드를 사용하면 낮은버전 ie 에서 폰트가 제대로 표시가 안되기에 html에서 직접 올려서 표시했다.

Raphael.fn.hangulText = function(x, t, text, style) {
    var wrap = daum.getParent(this.canvas);
    var div = daum.createElement('<div style="position:absolute;">' + text + "</div>");
    wrap.appendChild(div);
    daum.setLeft(div, x - (div.offsetWidth / 2));
    daum.setTop(div, y - (div.offsetHeight / 2));
    if (style) {
            daum.setStyle(div, style)
    }
    return this.set()
};

정리

지도 인포그래픽은 어떻게 구현하든 조율이 많이 필요한 작업이다. 장점을 따져보자면

액션스크립트 지식없이 자바스크립트로 가능
플래시 없이 인터랙티브 지도 가능 (요새 악의축이 되어버린듯한;)
iOS 에서 지도 표시

물론 플래시 보다 단점도 존재한다

폴리건에 mouseover 시에 지역명에 가면 mouseout 발생. 툴팁 유지하기가 힘들다
디자이너가 직접 path와 포인트들을 다듬기엔 불편할수 있다
플래시보다 피곤하다;(폰트, 마우스오버이슈 등)

다음, 4월 총선특집 페이지 개설

jQuery 이해5 - Attributes 메소드들

2012-02-29T17:15:57+00:00

이번 시간에는 엘리먼트의 Attribute 관련된 메소드들을 살펴보자

소개하는 메소드들은 예제페이지로 이동한후 개발자도구 콘솔을 열어서 입력하면서 테스트 해보면 된다. 자 하나씩 따라해보자

.addClass()

엘리먼트에 css클래스명을 추가할때 사용한다.

$('#box').addClass('red');

//모든 div엘리먼트에 border 클래스 추가
$('div').addClass('border');

.removeClass()

엘리먼트에 css클래스명을 제거 한다

$('#box').removeClass('red');
$('div').removeClass('border');

.hasClass()

클래스명의 존재여부를 true,false 로 리턴한다

if($('#box').hasClass('red')){
    $('#box').removeClass('red'); 
}

.toggleClass()

인자로 주어지는 클래스명이 toggle 된다

.attr()

엘리먼트에 있는 어트리뷰트를 읽거나 세팅할때 사용된다.

$('#box').attr('data','i am box');
$('#box').attr('data'); //i am box 출력

.removeAttr()

엘리먼트에 있는 어트리뷰트 제거

$('#box').removeAttr('data');

.html()

엘리먼트의 내용을 html형태로 가지고 오던가 세팅한다

$('#box').html(); // id=box
$('#box').html('hello box');  

.prop()

엘리먼트의 프로퍼티에 직접 접근하여 값을 가져오거나 세팅한다

$("input[type='checkbox']").attr("checked") // checked
$("input[type='checkbox']").prop("checked") // true
$("input").prop("disabled", true) // 폼요소를 사용하지 못하게 세팅
$("input").prop({"disabled": false}) //인자를 object 형태로도 전달 가능

.removeProp()

프로퍼티를 제거한다

.val()

value어트리뷰트가 있는 엘리먼트에서 value값을 가져온다

$('input[type=text]').val()

엘리먼트의 어트리뷰트와 프로퍼티의 차이점을 이해 해보고, 자주 사용하게 되는 메소드들이니 API페이지에서 더 많은 예제를 보고 완벽히 학습하도록 하자!

jQuery 이해4 - CSS 메소드들

2012-02-29T17:12:50+00:00

CSS 와 관련된 속성을 얻고 설정하는 메소드를 살펴보자. 소개하는 메소드들은 예제페이지로 이동한후 개발자도구 콘솔을 열어서 입력하면서 테스트 해보자.

.css()

엘리먼트의 첫번째 인자의 style값을 가져오거나 style을 적용한다

$('#box').css("background-color");

$('div').css("background-color", '#eee');

$('ul').css({'list-style':'none','border':'1px solid red'});

.height()

엘리먼트의 높이값을 구하거나 인자값으로 세팅한다

$('#box').height()    //200
$('#box').height(500) //500으로 늘림 

.innerHeight()

엘리먼트의 패딩을 포함하는 높이값을 구함

$('#box').innerHeight()   //220

.outerHeight()

엘리먼트의 외부 padding,boder를 포함한 높이를 구함, 인자값이 true 일경우 margin 도 포함 합니다

$('#box').outerHeight()   //222
$('#box').outerHeight(true)   //242

.width()

.innerWidth()

.outerWidth()

.offset()

엘리먼트의 절대좌표를 반환한다.

$('li.a1').offset().top
$('li.a1').offset().left

.position()

엘리먼트의 부모엘리먼트 기준 좌표를 반환한다

$('li.a1').position().top

.scrollLeft()

엘리먼트의 수평 스크롤 위치를 구하거나 인자로 주어진값으로 세팅한다

.scrollTop()

엘리먼트의 수직 스크롤 위치를 구하거나 인자로 주어진값으로 세팅한다

도움글

이미지는 jQuery홈페이지에서 가져왔다
CSS 관련 메소드

jQuery 이해3 - Selectors 메소드들

2012-02-28T18:23:14+00:00

웹개발에서 대부분의 자바스크립트의 작업이 DOM을 조작하는 일로 이루어진다.

문서의 특정 태그엘리먼트에 접근하여 이벤트를 주거나 class명을 변경, 내용을 채워넣는(innerHTML)일등을 하기위해선 그 특정 태그엘리먼트를 쉽게 찾을수 있어야 하는데 이때 사용 되어지는게 Selector 이다. jQuery에서 사용되는 Sizzle CSS Selector Engine은 현재 가장 빠른 속도를 자랑하기도 한다.

자주 사용하는 기본 셀렉터

태그 셀렉터

$('div'); //모든 div 태그엘리먼트를 가지고 온다

id 셀렉터

$('#daum'); // id="daum" 엘리먼트를 가지고 온다

class 셀렉터

$('.bar'); // class="bar" 엘리먼트를 가지고 온다

Multiple 셀렉터

$('div','span','img'); //div ,span, img 엘리먼트 모두를 가지고 온다

중복 사용과 해당 엘리먼트 내부에서만 검색도 가능하다

$('div.bar'); //div 태그엘리먼트중에 bar 클래스명을 사용하는 엘리먼트
$('img' , '#content'); // id="content" 안에 img 태그 엘리먼트만 가져온다

이 외에 많은,유용한 셀렉터들이 존재하는데 꼭 하단에 ‘도움글’들을 참고하여 학습하도록 하자

도움글

mongoDB 4 – 몽고쉘 맛보기

2012-02-28T00:31:43+00:00

이전시간에 설치도 했고 몽고db 데몬도 올렸다. 이제는 몽고쉘로 접속해서 가지고 놀아볼 차례이다.

path를 설정했으니 터미널을 띄우고 바로 쉘로 접속해보자

> mongo

프롬프트가 입력을 기다리고 있다. 바로 또 아래 명령어들을 차례대로 입력해보자

> use testdb  //testdb Database 를 사용하겠음

> db  // 현재 사용하고 있는 Database 인 testdb 를 표시 

> todo = {text:'study mongodb'}  // todo Document 생성

> db.todos.save(todo) //todos Collection 에  todo Document 넣기

> db.todos.save({text:'jquery study'})    //새로운 Document 저장

> db.todos.find()   // todos Collection에 모든 내용 가져오기

>db.todos.count()   //todos Collection count

> show collections // 현재 사용하는 Database에 모든 Collection 보기

아주 쉽지 않은가? 좀 더 살펴보자

> var ids = ['a','b','c','d','e','f','g','h','i','j'];  // 배열생성
> for(i=0; i<10; i++) { db.users.save({ id : ids[i],level : i }) } // users Collection에 10개의 유저 Document 저장

> db.users.find({level:4})  //level 이 4 인 유저 뽑기

> db.users.find({level:{$gt:4}})    // level 이 4보다 큰 유저만 가져오기

> db.users.find({level:{$lt:4}})        //4보다 작은 유저 가져오기

이번엔 데이터를 업데이트 해보자

>  db.users.update({id:'a'}, {id:'a', level:100})       //a id를 가진 유저의 level를 100으로

> db.users.update({id:'a'} , {$set: {nick: 'aji'} } )   //  nick Field 추가

> db.users.remove({nick:'aji'})       // aji 유저 삭제

>  db.users.remove()    //users Collection 에 모든 요소 지우기

> show collections      //  현재 Database 에 생성된 모든 Collections 보기

> db.users.drop()       // users Collection 삭제

자바스크립트와 별반 다르지 않은 코드들로 그냥 쉽게 넣고, 빼고, 수정하고, 삭제 하면 된다.

도움글

mongoDB 3 - mongod config 파일로 실행

2012-02-27T22:17:27+00:00

$PATH 설정

몽고db 데몬을 쉽게 올릴수 있게 어느 디렉토리든 mongod가 실행이 되게 설정해 보자 (mac같은 유닉스시스템 기준) 터미널에서 아래 명령을 실행한다

> echo $PATH

위 명령으로 보이는 디렉토리 목록이 경로 지정 없이도 프로그램이 실행되는 디렉토리 모음이다. 이제 $PATH에 mongodb 설치경로를 지정해 보자.

> vi ~/.profile

현재 계정의 .profile 파일을 vi 에디터로 열고 아래 내용을 한줄 추가한다

export PATH=/Applications/mongodb/bin:$PATH

/Applications/mongodb/bin 이부분은 자기가 mongodb 를 둔 디렉토리 기준으로 작성하면 된다. .profile 파일은 처음 터미널에 접속할경우 해석되는데 우린 이미 접속 하고 있기에 갱신 명령으로 바로 사용할수 있게 하자

> source ~/.profile

이젠 바로 터미널에서 mongod 를 실행시켜 보면 path가 잡힌걸 확인가능 하다.

config파일로 옵션 지정하기

mongod 를 올릴때 여러 옵션들을 config 파일을 지정하면 좀더 손쉽게 올릴수 있다.

> mongod --config /Applications/mongodb/mongo.conf

mongo.conf 파일명과 위치는 원하는대로 하면 된다. 이제 mongo.conf 에 파일을 만들어보자

port = 27017 # 몽고데몬이 돌아갈 포트
fork = true # 데몬모드
logpath = /tmp/mongodb.log  #로그파일 위치
dbpath = /Applications/mongodb/data  # DB 파일의 path (기본 /data/db)

위 처럼 자신의 환경에 맞게 옵션을 설정하고 저장한다

자 이제 몽고db를 띄워보자!

> mongod --config /Applications/mongodb/mongo.conf

도움글

윈도우에서 환경변수 설정

jQuery 이해2 - $(document).ready()

2012-02-27T20:50:12+00:00

ready() 메소드는 DOM이 모두 로드된후에 실행될 함수를 지정한다.

웹문서에서 자바스크립트의 개발은 DOM을 조작하는 경우가 많은데 이때 DOM이 로드가 되기전에 자바스크립트를 작성할경우 예상치 못한 버그나 에러를 발생할수 있다. 그래서 DOM 로드가 완료된후에 자바스크립트 코드를 작성하는 방식을 권장하고 이럴경우 차후에 마크업과 코드와의 분리도 수월할수 있다.

위 그림은 uix.kr이 로딩될때 네크워크 콘솔을 확인한 모습이다. 파란색 라인이 DomContentLoaded 가 발생한 시점인데 1.30초쯤에 발생한것을 확인할수 있다. onload 이벤트는 이미지를 포함한 모든 문서의 로딩이 끝난후에 발생하게 된다.

jQuery에서 DomContentLoaded 이벤트핸들러의 작성은 아래코드 처럼 가능하다.

$(document).ready(function() {
    //이곳에 실행될 함수를 작성한다

});

//축약형
$(function() {
    //이곳에 실행될 함수를 작성한다

});

jQuery 이해1 - 시작

2012-02-26T23:20:25+00:00

jQuery는 수많은 자바스크립트 라이브러리중에 현재 가장 많이 사용하는 프레임웍이다.

jQuery홈페이지에서 말하고 있듯이 빠르고 간결하며 기존 자바스크립트와는 달리 작성하는 방식을 달리 할수 있도록 설계되었다(메소드체이닝). 당연히 프론트엔드개발을 하고있는 개발자들은 반드시 이해를 하고 있어야 하는 라이브러리이다.

jQuery 삽입

자바스크립트 라이브러리들의 사용방법은 간단하다. 문서에 스크립트를 삽입해주면 되는데 jQuery도 동일하다. 다운로드 페이지에서 원하는 버전을 내려받아서 사용하던가 CDN이 적용된 주소를 그대로 사용해도 무방하다

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>

jQuery 사용

jQuery를 삽입하면 jQuery() 함수가 만들어 지는데 축약형태로 $ 로 사용이 가능하다. jQuery홈페이지에서 브라우저에서 콘솔을 열어서 아래코드를 넣어보자 ( 크롬에서 개발자도구를 사용하여 해보기를 권장한다)

$('body').fadeOut().delay(1000).fadeIn();

사용방법이 특이한가? 메소드를 연결해서 (method chaining) 계속 호출하고 있다. jQuery의 많은 메소드들이 jQuery객체를 그대로 리턴하기에 이러한 문법으로 작성이 가능하다.

$ 충돌방지

기존에 다른프레임웍을 사용한다는 이유등로 이미 $를 선언해서 사용하고 있다면 jQuery별칭인 $ 를 다른이름으로 변경 할수 있습니다

var j = jQuery.noConflict();
j('body').fadeOut().delay(1000).fadeIn();

jQuery 장점

오픈소스이다
브라우저마다 javascript,DOM,이벤트 구현등이 처리가 다른데 이런 크로스브라우징 문제를 쉽게 해결 가능
수많은 플러그인이 존재하여 개발시간을 단축 시킬수 있다

node.js 맛보기12 – 앱 백그라운드 실행 forever

2012-02-26T20:44:04+00:00

forever 모듈은 node.js의 앱을 실행시키고 이때 생성된 프로세스를 관리해주는 모듈이다. supervisor모듈처럼 커맨드에서 사용이 가능한 모듈이므로 글로벌설치를 권장한다. 개발시에는 supervisor모듈로 앱을 실행시켜서 테스트를 하다가 실제 서비스에 올릴경우 사용하면 유용 하겠다

npm install forever -g

설치가 완료되면 이제 forever로 노드앱을 실행시켜보자

forever start app.js

forever로 관리되는 앱의 프로세스 목록을 볼수도 있다

forever list

프로세스를 kill 하려면 stop에 forever list에서 확인가능한 프로세스id 를 인자로 주면 된다

forever stop 0

도움글

북마클릿 배워보기 - Daum사전 북마클릿

2012-02-25T12:02:21+00:00

문서내에서 찾고자하는 단어를 드래그로 선택하면 Daum사전으로 검색해주는 간단한 북마클릿이다. Daum사전은 이번에 반응형웹으로 개편되었기에 새창으로 띄워도 최적화된 화면으로 잘 보인다.

북마클릿 추가

[Daum사전](javascript:(function(){var dic=’http://alldic.daum.net/’,query=’‘;if(window.getSelection){query=window.getSelection().toString()

’’;}else if(document.selection.createRange){query=document.selection.createRange().text

’’;}var url=(query)?dic+’search.do?q=’+query:dic;window.open(url,’’,’width=400px,height=500px’);})())

소스

아래소스로 북마클릿을 쉽게 만들수 있게 도와주는 Bookmarklet Builder에서 쉽게 만들수 있다.

도움글

mongoDB 2 - 구조 이해 하기

2012-02-24T12:30:42+00:00

mongoDB는 프론트엔드 개발자가 꼭 배워야 하는 데이터베이스 이다.

쉽고 빠르다
JSON형식으로 저장과 출력을 하기에 더욱 더 우리에겐 익숙하고 유리하다.
기존에 다른 데이터베이스를 경험하지 않아도 쉽게 익힐수 있다.
빠른 프로토타이핑을 도와준다 (데이터베이스 설계 따위는 필요없다)
자바스크립트 스럽다?!

데이터베이스 ?

쉽게 데이터를 저장하고 간편하게 꺼내 쓰게 만든것이 바로 데이터베이스이다. 다른 개념이나 이론들은 나중에 찾아보고 지금은 일단 이 부분만 빠르게 습득하는걸 목표로 삼자

Document (row)

가장 최소의 데이터 단위를 Document라 부른다. 아래는 aji라는 사람의 점수(score)를 표시하는 Document 이다. 우리에게 매우 익숙한 json 형식라 이해도 빠르다. 여기서 name, score 를 field 라고 한다.

//score Document
{
    "name" : "aji",
    "score" : 100 
}

Collection (table)

Document 가 여러개 모여서 Collection를 이룬다고 보면 된다. 위에 score Document 가 여러개 모여서 scores Collection를 만들었다

//scores Collection
{
    "name" : "aji",
    "score" : 100 
},
{
    "name" : "cat",
    "score" : 95 
},
{
    "name" : "bat",
    "score" : 80 
}

Database

여러개의 관련된 Collection 이 모여서 한개의 Database를 만든다. 그냥 쉽게 최상위 폴더 개념이라고 보면 된다.

정리

mongoDB 1 시작하기 - 설치,실행

2012-02-23T19:47:02+00:00

mongoDB 는 프론트엔드개발자가 꼭 배워둘만한 데이터베이스 이다. 일단 겪어보려면 mongoDB가 필요하다. 얼른 설치해 보자

설치

환경에 맞는 mongoDB 를 다운로드 받아 압축만 풀면 바로 데몬을 올릴수 있다. 퀵가이드에 따라 설치를 진행해 보자

윈도우에 설치하기

서버 띄우기

mongoDB는 데이터베이스 서버이기 때문에 서버를 띄워줘야 한다.

기본 데이터베이스 저장 디렉토리는 /data/db (윈도우 c:\data/db ) 이기에 경로를 만들어주고 콘솔로 설치된 디렉토리에 bin/mongod (윈도우는 mongod.exe) 를 실행 시켜주면 바로 서버가 올라온다. (데이터베이스가 저장되는 경로는 물론 변경할수도 있다)

서버 접속

데이터베이스에 쿼리를 날려보려면 접속을 해야한다. 이 또한 간단하다. 콘솔로 설치된 디렉토리에 bin/mongo 를 실행해주면 바로 관리쉘로이 뜬다. 쉘이 우리의 입력을 기다리고 있다. 이제 가지고 놀 준비는 끝났다.

mongoDB 홈페이지에서 “Try it Out”메뉴를 클릭하면 간단하게 쉘을 실행시켜 볼수 있다. 잘 만들어진 튜토리얼을 진행해 보자!

도움글

mongoDB를 Demon으로 실행하고 정상적으로 종료하기

node.js 맛보기11 – jQueryMobile 프로토타이핑 만들기2

2012-02-21T22:10:10+00:00

이번 시간에는 이전 포스팅 에 이어 좀더 프로토타이핑 완성도를 높여보자.

실제 완성모습 (동영상 보기)

기능별로 모듈로 만들기

리스트페이지,뷰페이지, 리스트 스크랩핑, 뷰 스크래핑….등 각 기능별로 파일,모듈로 빼자. 하나의 파일로 관리하는것보다 직관적이고 효율적이다.

news-history 프로젝트 파일구조

app.js - 첫 실행되는 메인프로그램 이다. 웹서버를 구성하는 부분
index.html - 리스트를 표시한다
view.html - 기사뷰를 표시한다
news-list.js - 뉴스리스트를 스크래핑하여 json형태로 리턴하는 모듈
news-view.js - 뉴스뷰를 스크래핑하여 json형태로 리턴하는 모듈
file-content.js - index.html,view.html 파일을 읽어서 출력하기위한 모듈
loadurl.js - 특정 url를 가져오는 모듈

app.js

http서버를 띄우고 요청이 들어오는 url마다 분기처리하여 맞는 문서,api 를 출력한다. 전체 소스보기

http.createServer(function (req, res) {

    var urlObj = url.parse(req.url, true),
        output = '';

    //들어오는 주소에 따라 분기처리 
    if(urlObj.pathname == "/") {
        //index.html 출력
    }
    else if(urlObj.pathname == "/view") {
        //view.html 출력 
    }
    // /api/list 
    else if(urlObj.pathname == "/api/list") {
        //news-list.js 모듈을 호출하여 json api 출력  
    }
    // /api/view?newsid=1234....
    else if(urlObj.pathname == "/api/view"){
        //news-view.js 모듈을 호출하여 json api 출력  
    }
    else {
        // 404 
    }

}).listen(8889, "127.0.0.1"); 

news-list.js

$(‘.section_statsbox a’) 에서 보다 디테일 하게 뉴스링크만 빼보도록 하자.

콘솔을 열어서 document.querySelectorAll(‘.section_statsbox a’) 로 dom 을 살펴보면 뉴스링크일경우에는 newsid 라는 17자리 숫자형태의 키를 발견할수 있다. 이 newsid 를 가 있을경우에만 api로 뱉어주도록 변경 해보자. 소스보기

news-view.js

newsid 를 가지고 뉴스제목과 내용을 가져오는 모듈이다. 소스보기

전체소스 다운로드

전체소스를 다운로드 하고 해당폴더에서 node app.js로 실행시키고 http://localhost:8889/ 를 브라우저에서 열어보자

필요한 모듈

프론트엔드개발자를 위한 RESTful

2012-02-21T15:52:45+00:00

소개

REST : ROA(Resource Oriented Architecture) 를 따르는 웹서비스 디자인 표준
REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭

도움글

RESTful API

HTTP로 CRUD 할수 있는 자원을 관리하는데 사용되는 웹 서비스 API
HTTP Method로 CRUD 구분
- POST - 아이템 작성 (Create)
- GET - 아이템 검색 (Read)
- PUT – 아이템 업데이트 (Update)
- DELETE - 아이템 삭제 (Delete)
실제 대부분의 브라우저는 GET,POST 메소드만 제공, 하지만 javascript XMLHttpRequest() 에서는 모두 가능
많은 openAPI가 RESTful 인터페이스 제공
- Twitter REST Api
- 구글맵
많은 개발 프레임웍 지원
- backbone.js
- mongoDB REST 인터페이스

Canvas를 파일로 저장하는 방법

2012-02-20T12:38:55+00:00

Canvas로 그린 그림을 파일로 저장할수 있다. canvas2image 라이브러리를 사용하면 js만으로 브라우저 다운로드까지 구현이 가능하지만 이번엔 php로 서버에 파일로 저장하는 방법에 대해 살펴보자

동작방법

Sketch.js 로 드로잉 구현

간단하게 캔버스 드로잉툴을 제공해주는 Sketch.js를 사용해서 예제 구성

Canvas.toDataURL() 로 데이터 가져오기

캔버스에 그려진 path들은 Canvas.toDataURL() 를 사용하면 DataURI형태의 스트링으로 가져올수 있음

php로 데이터 파일로 저장

DataURI 의 데이터를 php로 넘겨서 바로 저장

예제

http://uix.kr/ex/canvas2image/sketch.html

canvas2image.php 소스

<?php 
$data  = $_POST['data'];

$filename = "test"; 
$filename .= ".png";

//파일로 저장!
file_put_contents($filename, base64_decode($data)); 

echo $filename;
?>

node.js 맛보기10 – 모듈 만들기

2012-02-19T20:15:38+00:00

프로젝트가 커지면 1개의 파일로 개발은 불가능하다. 웹개발 할때처럼 기능에 맞게 모듈로 만들어서 require()하여 사용해 보자

아래 예제는 일전에 설치했던 request 모듈을 가지고 간단히 모듈화 해본 예제이다. 맨 마지막줄에 exports 하는 부분이 포인트이다. loadurl.js 로 저장하자

// loadurl.js 
var request = require('request');

function call(url, callback){
    //https://github.com/mikeal/request
    request(url, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            callback(body); //인자로 받은 callback() 호출 
        }
    });
}

//함수 export 
exports.call = call;

이제 loadurl 모듈을 사용해보자. 사용법은 간단하다.

// loadurl.js 모듈 호출 
var loadurl = require("./loadurl");

loadurl.call("http://www.daum.net", function(data){
    console.log(data);
});

node.js 맛보기9 – File System

2012-02-19T13:40:50+00:00

파일을 읽고 쓰거나 폴더를 만드는 등의 파일시스템과 관련된 일들을 할수 있는 File System 모듈을 살펴보자.

url 모듈에서 썼던 예제를 조금 수정하여 들어오는 url 마다 파일을 읽어서 해당 파일을 보여주려 한다. http://127.0.0.1:8889/info 로 접속하면 info.html 을 열어서 보여주고, http://127.0.0.1:8889/api 로 접속하면 api.html 을 File System모듈로 읽어서 보여준다.

var http = require('http'),
    url = require('url'),
    fs = require('fs');

http.createServer(function (request, response) {

    var urlObj = url.parse(request.url, true),
        filename = urlObj.pathname.replace("/","") + ".html"; 

    console.log(urlObj);

    //파일을 읽는다 
    fs.readFile(filename, function (err, data) {
          if (err) { //에러가 날경우에는 404 로 연결 
              response.writeHead(404, {'Content-Type': 'text/plain'});
              response.end("404 Not Found!! \n");
              throw err;
          }
          //파일이 있으면 해당 내용 보여주기 
          response.writeHead(200, {'Content-Type': 'text/html;'});
          response.end(data);
    });

}).listen(8889, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8889/');

node.js 맛보기8 – URL 해석

2012-02-19T12:00:30+00:00

node.js 의 기본모듈인 URL 모듈을 살펴보자. 아래는 간단하게 들어오는 url(request.url) 를 해석하여 url마다 보여주는 컨텐츠를 달리 해보는 예제이다.

소스 (url.js)

var http = require('http');
var url = require('url');

http.createServer(function (request, response) {

    var urlObj = url.parse(request.url, true);
    console.log(urlObj);

    //http://127.0.0.1:8889/info 
    if(urlObj.pathname=="/info") {
        response.writeHead(200, {'Content-Type': 'text/plain;'});
        response.end("hi! url module info page!! \n");
    }
    //http://127.0.0.1:8889/api
    else if(urlObj.pathname=="/api"){
        response.writeHead(200, {'Content-Type': 'text/plain'});
        response.end("http://nodejs.org/docs/latest/api/url.html \n");
    }
    else {
        response.writeHead(404, {'Content-Type': 'text/plain'}); //404
        response.end("404 Not Found!! \n");
    }


}).listen(8889, "127.0.0.1");

console.log('Server running at http://127.0.0.1:8889/');

node url.js 에 접속

node.js 맛보기7 – 프로그램 자동재실행 supervisor

2012-02-17T19:27:57+00:00

node.js 프로그램을 개발하면서 소스 수정하고 콘솔에서 node를 재실행하고를 반복하게 되는데 이때 자동으로 리로딩 해주는 supervisor 모듈은 반드시 사용하자. npm 으로 바로 설치가 가능한데 글로벌 설치를 권장한다. (글로벌설치시에 디렉토리에 쓰기권한이 없을경우 에러를 뱉는데 관리자권한으로 실행시켜 주면 된다)

npm install supervisor -g

설치하면 바로 사용이 가능하다. 간단하게 이전에 했던 server.js로 테스트 해보자.

supervisor server.js

supervisor 로 실행하고 server.js 를 수정하면 자동으로 다시 실행되는걸 볼수 있다

더 자세한 사용방법은 레퍼런스를 참고하면 된다.

background-image 쉽게 찾기 – BG Finder

2012-02-14T22:53:09+00:00

디자이너가 백그라운드 이미지명을 쉽게 찾지 못하는걸 보고 간단하게 만들어본 북마클릿입니다. 찾고자 하는 bg가 있는 웹페이지에서 북마클릿을 실행하고 원하는곳에 클릭하면 bg이미지 명이 나옵니다(상위 엘리먼트의 bg까지~)

북마클릿 등록 : BG Finder

iframe 일경우 bg이미지명을 가져올수 없기에 새창으로 iframe url을 띄울수 있도록 했습니다

만들어놓고 보니 파이어버그등으로 bg를 찾아보는것보다 편하네요 ^^

어디를 많이 클릭할까? - 클릭 트래킹

2012-02-13T22:53:09+00:00

유저가 어디를 보다 많이 클릭 하는지를 알면 웹문서에 많은 컨텐츠 중에서 어떤 부분에 좀더 집중할수 있을지를 결정할수 있습니다.

이런 물음으로 시작되어 만들어진 ‘클릭 트래킹-Click Tracking(이하 ct)’ 을 소개합니다.

위와 같은 화면으로 유저의 클릭을 분석해 볼수 있는데요. 처음엔 개발자끼리 모여 재미로 개발되어 많은 버전업을 하고 현재 많은 서비스에서 적용되어 유저의 패턴을 분석해 보고 있습니다.

관리화면

이번에 yakulten님이 판올림하면서 가장 많이 신경쓴 부분입니다.

Calendar - 날짜별로 ct데이터를 불러와서 문서에 출력
Hits - 총 클릭수를 표시하고 영역별, 링크별 선택 출력
Links - 가장 많은 클릭수순으로 정렬
Hitmap - 클릭정보로 아이트래킹 같은 히트맵을 그립니다
Settings - 관리화면 설정

동작 방법 3줄요약;

유저가 문서내에 A링크를 클릭하면 수집 ( document.body 에 mousedown 에서 감시 )
A링크는 xpath 처럼 ‘ct path’ 로 변환후에 저장
유저에게 얻은 클릭정보를 한번에 모아서 출력 (그림 1)

ct path 셀렉터 예제

아래의 링크를 클릭하며 ct path 확인. 원본열기 , 소스열기

언젠가는 잘 정리해서 공개도 해보고 싶은 맘입니다^^

워드프레스에서 다시 시작

2012-02-12T10:43:00+00:00

티스토리를 사용하다 워드프레스로 건너왔다. 가장 큰 이유는 위지윅 편집기 사용이 너무 큰 스트레스라 마크다운으로 대체하려 넘어왔다. 결과는 대만족.

이전 블로그에서는 기존서비스 html 스크랩핑으로 프로토타이핑을 만든다거나 UX개선을 위한 시도들에 대한 포스팅이 많았는데 서비스 개편등으로 마크업,데이터등이 변경으로 작동을 하지 않는경우가 대부분. 가볍게 이사할수 있었던 또다른 이유이기도 하다;

워드프레스가 좋은 이유

플러그인 설치로 마크다운이 사용 가능하다. 마크다운의 장점
일반 글과는 다른 분류인 페이지 작성이 가능하다. 페이지별로 다른 템플릿 적용도 가능하다. (사이드바 없애기)
페이지에 의미있는 주소를 부여할수 있다
- http://uix.kr/service/jes
- http://uix.kr/archives/category/nodejs
설치형 블로그의 장점이겠지만 스킨파일을 ftp로 수정이 가능하다. 티스토리에서의 css수정은 정말 피곤하다

워드프레스 마크다운 플로그인

비슷비슷한 종류의 플러그인이 많아서 고르기 쉽지 않았다

페이스북,트위터 공유 버튼 달기

<div class="single-social">
    <div class="facebook">
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php urlencode(the_permalink()) ?>&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light"
    scrolling="no" frameborder="0" allowTransparency="true"
    style="border:none; overflow:hidden; width:100px; height: 30px; align: left; margin: 0px 0px 0px 0px"></iframe>
    </div>
    <div class="twitter">
    <a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="horizontal"  data-via="niceaji" ></a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </div>
</div>

node.js 맛보기6 - jQueryMobile 프로토타이핑 만들기1

2012-02-11T12:05:46+00:00

이전 포스팅에 활용했던 파싱하는 소스를 활용해서 프로토타이핑 서비스를 만들어 보자. ‘뉴스박스 히스토리’ 페이지를 파싱해서 모바일웹 페이지를 구성해보려 한다.

뉴스박스 히스토리 파싱하여 api 만들기

http://media.daum.net/netizen/newsbox 이 페이지에서 파란색부분의 링크를 긁어서 리스트 페이지를 구성한다.

class명이 section_statsbox 라는 div엘리먼트 안에 모든 정보는 들어 있는것 같다. 바로 jsdom으로 파싱해보자

//news-history.js
var jsdom = require("jsdom"),
    http = require('http');

jsdom.env("http://media.daum.net/netizen/newsbox", [
    'http://code.jquery.com/jquery-1.5.min.js'
],
function(errors, window) {
    var $ = window.$,
        json = '',
        result = [];
    //jsdom으로 불러와서 우리가 원하는 부분 스크랩핑
    $('.section_statsbox a').each(function(){ 

        result.push({
            href : $(this).attr('href') ,
            text : encodeURIComponent($(this).text())
        }); 

    }); 

    //jsonp 형태로 return
    json = "jsonpCallback(" + JSON.stringify(result) + ")";

    //http 서버 띄움 (8889포트)
    http.createServer(function (req, res) {

        res.writeHead(200, {'Content-Type': 'text/javascript'});
        res.end(json); 

    }).listen(8889, "127.0.0.1"); 

    console.log('News History API Server!!');
});

소스는 주석만으로 설명 가능하다. 간단하게 api서버가 준비 되었다. 실행 시키고 브라우저로 http://127.0.0.1:8889/ 접속해 보면 js소스가 주르륵 펼쳐질 것이다.

api 사용하는 페이지(클라이언트) 만들기

이제 api와 그걸 출력해주는 서버가 준비 되었다. 이젠 그 api를 이용하여 우리가 원하는 페이지를 만들어볼텐데 jQueryMobile를 사용해서 간단하게 뿌려줄 예정이다. Quick Start guide에 우리가 원하는 소스가 있다.

//news-history1.html
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>뉴스 히스토리</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>뉴스 히스토리</h1>
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview" id="list">
        </ul>
    </div><!-- /content -->

</div><!-- /page -->

<script>
//api에서 호출할 전역함수
function  jsonpCallback(data){
    var str = '';

    for(var i=0; i < data.length; i++){

        str += '<li><a href="'+data[i].href+'">'+decodeURIComponent(data[i].text)+'</a></li>';
    }

    $('#list').html(str);
    $('#list').listview('refresh'); //jQueryMobile형태의 list로 렌더링 

}

//domready
$(function(){
    //jquery jsonp 형태의 api 호출
    $.ajax({

        url: 'http://localhost:8889', 

        dataType: 'jsonp',
        success: function(){
        }
    });

});

</script>
</body>
</html>

html파일로 저장하고 브라우저에서 열어보면 아래와 같은 깔끔한 화면을 볼수 있다. 링크를 클릭할경우 기사보기화면과 몇몇 수정사항은 다음시간에 살펴보기로 한다

node.js 맛보기5 - html 문서 파싱 (jsdom)

2012-02-11T11:57:29+00:00

시작하기

node로 html를 읽어서 필요한 데이터를 뽑아보자. 이곳에 소개되었던 많은 프로토타이핑들이 직접 html를 파싱하고 구현이 되었다. 백엔드 개발자에게 원하는 데이터를 요청하기보다 이렇게 html스크랩핑 하는것이 훨씬 효율적이다. 프로토타이핑은 빨라야하고 node 또한 이런 부분들을 충분히 채워줄수 있다

jsdom 모듈

jsdom 모듈을 설치한다. https://github.com/tmpvar/jsdom

 npm install jsdom

c++ 컴파일러가 없을경우 설치시 에러가 발생할수 있다. 맥이라면 xcode를 설치해보자. 기타 플랫폼에서의 에러는 직접 검색으로 해결해보자; javascript로 개발된 모듈만 붙일수 있는게 아니라 다른언어로 작성된 컴파일된 모듈도 붙일수 있다라는 느낌도 대충 온다.

예제소스는 늘 그렇듯 소스홈페이지에 잘 나와있다.

//jsdom1.js
var jsdom = require("jsdom");

jsdom.env("http://daum.net", [
  'http://code.jquery.com/jquery-1.5.min.js'
],
function(errors, window) {
    var $ = window.$;
    $('#news a').each(function(){ 

        console.log(  $(this).attr('href')  +" : "+ $(this).text() );
    });
});

예제를 조금 수정했다. 실행해 보자

js데이터 파싱

http://media.daum.net/common/wing.data 이런 js는 어떻게 파싱해야 할까?

//jsdom2.js
var jsdom    = require("jsdom").jsdom,
    document = jsdom("<html><head></head><body></body></html>"),
    window   = document.createWindow();

var script = document.createElement('script');
script.src = 'http://media.daum.net/common/wing.data';
document.body.appendChild(script);

script.onload = function(){

    var data = window.wing_primary_sisa.component.data,
        length = data.length;

    for(var i=0; i < length; i++){
        console.log( data[i].component.data[0].title );
    }
};

미소가 지어진다 ^^

node.js 맛보기4 - npm으로 설치 팁

2012-02-11T11:46:02+00:00

프론트엔드개발만 해온 우리에겐 서버 쉘에서의 작업이 익숙치 않다. 텍스트만 즐비한 터미널에서의 설치,에러파악, 에디팅 작업, 수많은 에러와 예외 등은 하품만 난다; 우리에게 Node가 친근하지 않은 이유이다. (지금은 ^^)

npm 으로 설치

이전 포스팅에서 살펴봤듯 node에서 모듈 추가 작업은 아주 쉽다.

npm install 패키지명

하지만 터미널작업이 안되는 환경을 만날때가 매우 많다. 로컬에서는 잘되는데 서비스서버에서는 잘안되거나 혹은 그반대. 해결방법은 쉬울수도 있지만 그 방법을 찾기까진 우리에겐 쉽지 않을수도 있다. 내 경우엔 방화벽이 있을경우 저런 방식으론 설치가 불가능했다. (방화벽 설정마다 다를수 있다;;)

이럴땐 간단하게 잘 설치가 되는 로컬등에서 npm으로 설치하고 설치디렉토리를 압축해서 바로 해당서버의 node_modules 로 업로드하면 된다! 보통 node 모듈이 설치되는 디렉토리는 npm install 를 실행한 디렉토리에 node_modules 폴더에 설치가 된다. ‘글로벌설치’일경우엔 -g 옵션을 주면 된다

npm install 패키지명 -g

글로벌설치 ? 로컬설치?

모듈설치를 글로벌or로컬 로 할지는 콘솔에서 사용하려면 글로벌로 설치로 하고 소스상에 require() 해서 사용하려면 로컬설치를 하면된다

~/.npmrc 파일 수정하기

https가 막혀있는 서버라면 아래줄을 추가해주면 도움이 될수도 있다

registry = http://registry.npmjs.org

도움글

npm: 글로벌 vs 로컬 설치 (Global vs Local installation)
npm FAQ
윈도우에서는 npm 설치가 잘 되지 않았다. 이왕이면 유닉스계열의 서버로 준비하자.
수많은 에러들은 거의 모두 구글에서 해결할수 있다. 많이 검색하고 많이 시도해 보면 다 된다고 본다;

node.js 맛보기3 - request 모듈 설치(npm)

2012-02-11T11:39:31+00:00

node는 서버사이드 javascript 이다. 서버사이드에서 돌아가는 언어들이 할수 있는 많은 일들을 할수 있다. 좀더 발전적인 프론트엔드 개발자라면 서버사이드에서의 기술도 구현이 가능해야 한다. 서비스가 아니더라도 간단한 프로토타이핑, ajax API 구현, http의 이해.. 등을 위해서라도 서버사이드 기술은 우리에게도 매우 중요하다. 우리가 Node를 좀더 알아야 하는 이유이기도 하다

모듈 사용하기

Node에서는 많은 부분이 외부모듈(플러그인)형태로 동작을 한다. 브라우저에서의 javascript개발도 마찬가지 이지 않은가? jQuery, ext.js… 훌륭한 오픈소스들이 즐비하다. Node도 마찬가지로 이런 훌륭한 라이브러리로 가득하다. 이제 첫번째 request 모듈을 사용해 보자

var request = require('request');

바로 이전에 봤던 소스 이다. 특정 모듈을 불러오는것 같은 코드. 이렇게만 적고 request.js로 저장하고 실행해보자( .js는 생략해도 된다)

node request

npm으로 모듈 설치하기

request 모듈을 찾을수 없다고 나온다. 기본core에 포함된 모듈일경우는 그냥 땡겨쓰면(require()) 되고 없는경우 찾아줘야 한다는걸 알수 있다 .node에는 훌륭한 모듈 설치 프로그램이 존재한다. npm (Node Package Manager 정확한 약어는 아니라는데 이해하는데는 전혀 문제 없다^^) 모듈설치는 아주 간단하다.

npm install request

위처럼 터미널에서 실행하게 되면 request 모듈에 관련된 모든 모듈패키지를 설치하게 된다. 설치후엔 제대로 설치 되었는지 npm list로 확인해보자!

request 모듈관련된 매뉴얼은 늘그렇듯 해당 홈페이지에서 찾아보면 된다. 그리고 또 도움되는 블로그 글 하나

node.js 맛보기2 - 웹서버 만들기

2012-02-11T09:28:39+00:00

Node 를 돌릴수 있는 환경이 있으니 이젠 어떤 일들을 할수 있는지 살펴보자. 솔직히 Node의 목적인 “쉽고 빠르게 확장가능한 네트워크 애플리케이션 구축” 이라는 내용의 이해는 천천히 해도 무리는 없다 (이런 부분의 갈증은 구글에서 검색)

간단한 http 서버

var http = require('http');

http.createServer(function (req, res) {

    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello Worldn');

}).listen(1337, "127.0.0.1");

console.log('Server running at http://127.0.0.1:1337/');

(nodejs.org에 걸린 첫번째 예제)

위는 간단한 웹서버를 만들어주는 코드이다. 우리(프론트엔드 개발자) 에겐 매우 익숙한 코드 패턴이다. http 모듈 같은것을 불러오고(require()), 서버를 만들고(createServer()) 요청을 기다린다( listen(1337, “127.0.0.1”) ) 핵심부분은 createServer() 안에 작성된 함수 부분이다. 보통 함수가 메소드의 인자로 넘어가게 되면 callback인 경우가 많다.(경험상..)

서버 실행

자 이제 서버를 만들었으니 실행하고 그 서버에 접속해보자. 위 소스를 server.js 로 저장을 하고 node로 실행하면 된다.

node server.js

간단하게 http 서버가 되고 callback이라고 의심해본 부분이 실행되는걸로 봐서 사용자 접속이 이뤄질경우 실행되는 callback임을 알수 있다.

별로 놀랍진 않다.. (많은 예제들에선 놀라길 바라고? 있는데 아직은 모르겠다)

도움글

* What is Node.js (Outsider)

node.js 맛보기1 - 설치

2012-02-11T09:15:52+00:00

시작하기

node.js 는 서버쪽에서 동작하는 javascript이다. 프론트엔드 개발자라면, javascript에 관심이 많다면 무조건 살펴봐야 하는 기술임에 틀림없다.자세한 설명은 구글에게 맡기고 바로 node.js을 돌려보기 위한 환경 구성해보자!

설치

보통의 javascript라면 브라우저에서 실행이 가능하다. 하지만 node.js는 node.js를 구동할수 있는 환경을 설치해줘야 한다. 다운로드 페이지에서 원하는 설치 플랫폼을 선택하자 이글을 쓰면서 윈도우 버전을 처음 설치해 봤다. 어디에 설치를 하는지도 알려주지 않는다. 이왕이면 유닉스 계열의 OS에 설치를 권장한다.

Mac

패키지 파일을 다운받어서 설치하면 끝. 터미널을 띄워서 아래와 같이 작성해보자

윈도우

C:Program Files (x86)nodejs 이런 형태의 경로에 설치가 된다. cmd(command)를 띄워서 node.js가 설치한 폴더로 이동후에 아래와 같은 명령어를 입력해 보자

자 이제 절반은 했다;

UIX

Jquery 버전 가져오기

프론트엔드 개발시에 유용한 크롬 확장들

Sight

JSON Formatter

XV — XML Viewer

jQuery - dom 요소 위치 변경하기 예제들

코드 1

코드 2

코드 3

코드 4

jQuery - 페이지에 위로가기 버튼을 넣어보자

HTML 만들기

CSS 만들기

javascript 만들기

데모보기

jQuery - 이벤트전파방지, 기본동작막기

event.stopPropagation()

event.preventDefault()

jQuery - html문서 손쉽게 불러서 끼워넣기 .load()

BigNews - BigVideo.js의 프로토타이핑 서비스

node.js - 간단한 Static 서버 만들기

javascript 만으로 파일 업로드 구현

간단하게 js,css minify 해보자 - Yuicompressor Online

알수없는 npm install 에러 발생시?

lazyload - 이미지를 늦게 load하여 웹성능 향상하기

프로토타이핑에 유용한 이미지 업로드 API - imgur.com

Dev HTTP Client - API 테스트 크롬 익스텐션

curl로 api테스트 하기

Twitter Bootstrap 관련 위젯 모음

jQuery 팁2 - ajax로 폼값 쉽게 넘기기 serialize()

jQuery 팁1 - jQuery.when()

jQuery 이해10 - DOM요소를 추가하는 여러가지 방법

jQuery 이해9 - delegate로 이벤트 한방 등록

delegate형태로 이벤트 등록

동적요소 추가시 이벤트 등록

jQuery 이해8 - 이벤트 등록

이벤트 등록

jQuery Event객체

js 즉시 실행함수로 안전하게 사용하기

pjax 배워보기

pjax ?

pushState()

pjax 간단 예제 보기

컨텐츠 동적으로 가져오기

ajax로 호출될때와 직접 호출될때 달라지는 문서내용

pushState() 지원하지 않는 브라우저는?

정리

도움글

PHP Selector 소개

Timeline JS 붙여보기

횡설수설

jQuery cdn서비스 이용시 안전한 방법

당신의 브라우저의 javascript 버전은?

주요 브라우저 js 버전

워드프레스로 만든 Code Snippet 서비스

사용된 플러그인 & 테마

관련글

Canvas를 이용한 TreeMap 인포그래픽

API

IE9 문제

다른 TreeMap

블로그를 뛰어넘는 워드프레스 CMS

장점

도움 링크

워드프레스로 만들어진 웹사이트

Node.js로 외부 프로그램 실행

외부 프로그램 실행 프로그램 만들기

커맨드라인 명령처럼 실행

도움글

Node.js로 js 소스 압축하기 - UglifyJS

도움

주요 자바스크립트 압축 도구

손쉽게 코드 하이라이트 추가

Node.js 에서 mongoDB 제어하기 – mongoose

도움글

mongoDB 5 - _id Field

_id필드는 Document의 고유한 key

_id필드 직접 넣어주기

도움글