블로그 이미지
JEEN

서울에 사는 꽃청년의 IT찌질모험기

Rss feed Tistory
IT/Tips 2010.05.07 13:20

[ Vim/Zencoding ] Vim 에 늦바람들기 시작하면서 Zencoding 만지다

  원격으로 서버에 들어가서 작업해야 될 일이 많기에 주로 emacs/vim 을 사용해왔습니다.
  하지만 뭐 기본적으로 복사/붙여넣기, 검색/치환 을 시작으로 Syntax Highlighting 되면 그냥 오케이라고 생각해왔었습니다.

  올해 초 서서히 붐이 일기 시작한 Zencoding 도 다른 여러 IDE 에 플러그인으로 등장했지만 그닥 사용성에서 만족하지는 못했기에 (IDE 자체가 무겁기도 하고..) 잊고 지내다가, 심심해서 vim의 zencoding 플러그인을 넣어보았습니다.


  $HOME/.vim/plugin/ 에 zencoding.vim 을 넣고 
  
  vim 을 실행시켜서 INSERT MODE 에서 아래와 같이 입력하고

  html:5

  커맨드 모드에서 Ctrl + y , 를 누르면 

  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

  </body>
  </html>

 로 변환됩니다. 적은 타이핑 수로  HTML 기본 뼈대를 갖출 수 있는 것입니다. html:5 같은 스니펫은 zencoding.vim 안에 정의되어 있기 때문에... 거기에 맞춰서 자신에게 필요한 html 기본 뼈대를 만드는 방법도 있을 겁니다. (html:4t 나 html:4s 등등...)

  또한 역시 INSERT MODE 에서 
  table#main>tr.head>th*4<tr.cols*2>td*4

  라고 입력하고 커맨드 모드에서 Ctrl + y , 를 누르면 
<table id="main">
     <tr class="head">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr class="cols">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
     </tr>
      <tr class="cols">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
     </tr>
  </table>

  이렇게 CSS 셀렉터 와 같은 형식도 지원을 하게 됩니다. 
  그외 자신만의 스니펫을 정의해서 여러모로 웹개발에 편리하게 쓰일 수 있지 않을까 합니다.
  
* 개발서버의 vim 이 6.8.x 였는데 여기에 zencoding.vim 을 넣으니까 에러가 나서 최신버젼 7.2.x 를  홈디렉토리에 넣고 돌렸더니 잘 되덥니다. 은근히 버젼많이 타나봐요. (vim 초짜 ;ㅁ;)

 아무튼 vim++
신고
IT 2009.06.13 16:51

[ 번역 ] 웹 개발자의 책임 ( A Web Developer's Responsibility )

  예전에 읽고나서 이래저래 설레발을 좀 떨었던 John Resig 의 블로그 글을 번역했습니다. 
  물론 원 저자에게 번역하겠다는 말도 안하고 그냥 냅다 번역했네요.
  아.. 일본의 어느 블로거가 번역한 것을 다시 번역한 겁니다. 이래저래 미묘한 문맥이 많을 것이라고 생각하지만... 웹 개발자라면 한번쯤 생각하고 행동할만한 내용이 아닐까 생각되네요.
 John Resig++
신고
IT 2008.06.30 00:12

[ 일본의 IT잡지 ] WEB+DB PRESS

사용자 삽입 이미지

  일본의 격월 잡지로 WEB+DB PRESS 라는 IT잡지가 있습니다.
  이름에서도 알 수 있듯이 WEB과 DB 기술에 대한 최근 이슈를 말해주고,
  어떤 웹 서비스등의 구축 노하우같은 것을 공개하고는 하죠.

  일본에 계신 다른 분들은 어떻게 생각하실 지는 모르겠지만... 일본 내의 IT 잡지 중에서 최고는 이것이 아닐까 감히 생각해봅니다.

  일단 주로 오픈소스 계열을 다룹니다. 그리고 웹관련이다보니까, 웹개발언어인 Perl, Ruby, PHP 등의 언어를 주로 다루고 있는데요. 거기에 물론 Action Script 같은 곳도 있기는 합니다. Java Script 도 있구요.

  웹 서비스 보안이라는 측면에서도 알기쉽게 만화로 설명해놓기도 하죠.
  필진의 대부분은 일본의 유명한 IT 관련 블로거들입니다. 대표적으로 Dan Kogai 씨같은 분이 있죠.
  거기에 Perl 에 대해서는 2개월 간에 가장 큰 이슈였던 내용에 대해서는 Hatena 라는 일본 IT기업의 CTO 인 Naoya Ito 씨가 "Recent Perl World" 라는 섹션을 맡고 있습니다.

  솔직히 읽기 쉽습니다. 학생 때 한국에서 읽었던 마이크로소프트웨어 라는 잡지는 뭔가 내용은 있어보이는 데 상당히 뜬구름 잡는 얘기로만 보이기도 하고... 학생레벨에서는 좀 맞지 않는 것은 아닌가라고 생각도 했었습니다. 거기에 내용도 상당수 엔터프라이즈 환경과 응용 프로그래밍에 대한 내용들이 주를 이루고 있었기 때문에 실제로 만져보고 다루어보는 것에 어려움이 있었습니다. 즉, 그만한 레벨이 있어야 했다는 것이죠.

  하지만 WEB+DB PRESS 는 상세한 설명과 함께 코드를 다루는 내용이라면 튜토리얼 위주입니다. 실제 가벼운 이해를 바탕으로 간단하게 접해보며 이해를 도모할 수 있는 내용입니다.

  이번호에서는 "휴대폰 서비스 개발"에 대한 여러 이야기와 함께, MySQL 5.1 에 대한 상세한 내용들.
  그리고 OpenID 2.0 에 대한 전반적인 내용.
  iKnow 라는 근래 인기를 끌고 있는 영어학습 SNS 서비스의 구축 노하우 같은 것이 공개되었습니다.
 
  아, 참고로 이 잡지를 펴내는 기술평론사(http://www.gihyo.jp) 라는 출판사는 이런 실전적인 내용의 책들을 두루 펴내고 있더랍니다. 그리고 웹사이트에서는 자잘한 기술 입문기사들도 실려 있구요. 일본어가 가능하시면 한번 둘러보는 것도 좋을 듯 합니다. 아니면 번역사이트라도...

  이상이 WEB+DB PRESS 에 대한 간단한 소개입니다. 그러다보니 상대적으로 마이크로소프트웨어를 까지는 않았나 생각은 들지만... 그래도 한국에 갈때면 항상 찾아보는 잡지입니다. :-)

  혹시 일본에 계신 분들 중에서 IT잡지를 구독하신 다면 어떤 것을 선택하시고, 왜 그 잡지를 선택하셨나요?
  그리고 추천해주실 것이 있으면 추천도 부탁드리겠습니다.
  물론 IT서적두요 :-)
신고
IT/Perl 2008.06.24 17:06

[ Perl ] 간단한 웹페이지 스크랩핑 - Web::Scraper

 일반적으로 웹 페이지를 스크래핑할 때 정규표현식에 대한 이해는 필수입니다.
 페이지를 싸그리 통채로 스크랩하는 거야 물론 간단하지만, 페이지의 일부분을 도려내고 싶을 때는 정규표현이 없으면 헤맬 수 밖에 없습니다.

 그리고 정규표현은 가독성이 단점입니다. 어중간한 정규표현이야 괜찮겠지만... 어떤 정규표현을 보고, 이게 뭐하는 것인지 알아내기란 참으로 힘든 일일 겁니다.

 use LWP::Simple;

my $content = get("http://www.daum.net");
my ($title) = $content =~ /<title>(.+)<\/title>/i;

print $title;
 < 어중간하게 쉬운 정규표현의 예 : 웹페이지의 제목 을 얻어내는 스크립트 >

use Web::Scraper;
use URI;
 
my $html = scraper {
  process 'title', title => 'TEXT';
}->scrape(URI->new("http://www.daum.net"));

print $html->{title};
 < 정규표현을 사용하지 않은 예 >

 이런 간단한 예제에서는 Web::Scraper 가 지는 것은 당연하겠죠. :-)
 차이가 있다면 문자코드입니다. 정규표현을 사용한 예제에서는 해당페이지에서 사용하고 있는 문자코드(다음의 경우에는 euc-kr)로 결과가 나오게 되지만, Web::Scraper 를 사용했을 때는 모든 결과는 반드시 UTF-8 으로 반환됩니다.
  늦었지만 이 쯤에서 Web::Scraper 에 대한 자세한 이야기.
  모듈의 저자는 일본의 유명한 Perl Hacker 인 Miyagawa 씨입니다. 전 작년 Shibuya.pm Tech Talk 에서 이 내용을 처음 접하고 꽤나 빠져들었던 기억이 납니다.
  이 모듈의 구성은 Ruby 의 Scrapi 라는 스크래핑 툴에서 차용했다고 합니다.

THIS MODULE IS IN ITS BETA QUALITY. THE API IS STOLEN FROM SCRAPI BUT MAY CHANGE IN THE FUTURE

  라고 Web::Scraper 페이지에 가면 나옵니다. 그리고 어떤 특별한 문서도 없이 Scrapi API 문서를 참조하시면 됩니다.

  아아.. 그러고 보니 이런 설명은 왠지 필요없을 지도...

  Web::Scraper 의 Slide에서 쉽게 볼 수 있습니다. 그쪽의 내용이 직관적이고 여러가지 예제들도 있으니 쉽게 쓸 수 있을 것입니다.

  그러고보니 Firefox 확장으로 WebScraper IDE 라는 것도 있으니, 보다 쉬운 웹 스크래핑이 가능하지 않을까 생각되네요.

  WebScraper IDE (for Firefox3)


  여기까지 보시고도 잘 모르시겠다는 분은 없겠죠?

  혹, 잘 모르시겠다면, 댓글이나 IRC에 들러주셔서 같이 한번 궁리해보았으면 합니다. :-)

  나중에 이를 적용한 예제를 몇가지 올려보도록 하겠습니다.

신고
IT/Perl 2008.06.17 06:30

[ Perl ] Catalyst 를 이용한 웹 서비스 개발 #2

사용자 삽입 이미지
 
 그러면 이제 자신이 원하는 페이지를 만들어 보도록 하겠습니다.

사용자 삽입 이미지

  ./script/oops_create.pl Controller Hello 로 Hello 라는 새로운 컨트롤러를 새로 생성하였습니다. 그리고 서버를 다시 시동하셔서(./script/oops_server.pl) 웹페이지를 확인해 봅니다.

사용자 삽입 이미지

  http://localhost:3000/hello 으로 접속해보면.. 'Matched Oops::Controller::Hello in Hello.' 라고 나옵니다. 이 말 그대로 Oops::Controller::Hello(프로젝트::컨트롤러::컨트롤) 에 매치했다는 것이겠죠. 그러면이렇게 해서 간단하게 페이지 생성을 할 수 있습니다. 이렇게 마치기 전에 Oops::Controller::Hello 가 어떻게 구성되는 지 알아볼까요? lib/Oops/Controller/Hello.pm 의 내용을 살펴봅니다.
package Oops::Controller::Hello;

use strict;
use warnings;
use base 'Catalyst::Controller';
                                                                                                                                                           
=head1 NAME                                                                                                                                                
                                                                                                                                                           
Oops::Controller::Hello - Catalyst Controller                                                                                                              
                                                                                                                                                           
=head1 DESCRIPTION                                                                                                                                         
                                                                                                                                                           
Catalyst Controller.                                                                                                                                       
                                                                                                                                                           
=head1 METHODS                                                                                                                                             
                                                                                                                                                           
=cut                                                                                                                                                       

                                                                                                                                                           
=head2 index                                                                                                                                               
                                                                                                                                                           
=cut                                                                                                                                                       

sub index : Private {
    my ( $self, $c ) = @_;

    $c->response->body('Matched Oops::Controller::Hello in Hello.');
}

 그러면 이와 같은 소스코드를 확인할 수 있으시겠으며.. 'Matched Oops...' 하는 부분은 바로 $c->reponse->body() 안의 문자열로 들어간 것임을 알 수 있습니다.  그렇다면 이 부분을 HTML로 적으면 된다는 것을 대충 짐작하셨을 겁니다.
 하지만 코드와 HTML을 섞어서 같이 쓰신다면... 처음에 허둥지둥 급하게 일을 할 때는 빨리 끝낼 수 있을 지 모르겠지만.. 장기적인 안목으로 봤을 때는 여간 불편한 게 아닙니다. 그리고 보기도 좋지 않죠. 그외 여러가지 제약이 될 수 있는 여러가지들이 있는 데... 이 것이 바로 템플릿의 등장이유가 됩니다.
 PHP의 대표적인 템플릿은 Smarty 라든가 Template_ 같은 것들처럼, Perl에는 Template Toolkit 이라는 강력한 템플릿이 존재합니다.
사용자 삽입 이미지
  이런 템플릿을 위한 View 를 생성하기 위해 './script/oops_create.pl view TT TT' 라고 입력합니다. TT 란 바로 Template Toolkit 을 뜻합니다. (처음의 TT는 View/TT.pm 이라는 것을 뜻하고, 두번째 TT는 Catalyst::View::TT 라는 모듈을 기반으로 한다는 것을 의미합니다)

 그리고는 ./root/hello.tt 라고 템플릿을 만듭니다. 예제로 이런 것을 만들어 보았습니다.
 Template Toolkit 은 기본적으로 [% ~ %] 을 템플릿 영역으로 사용합니다.
<html>
<head>
<title>[% title %]</title>
</head>
<body>
[% name1 %] ♥ [% name2 %]<br/>
그들은 왜 신림동으로 갔나?<br/>
</body>
</html>

 위에서 title, template, name1, name2 같은 것을 미리 정해놓았습니다.
 그럼 Controller 에서 해당 템플릿 변수에 값을 넣어주기만 하면 되는 것이죠.
 ./lib/Oops/Controller/Hello.pm 을 열어줍니다.
sub index : Private {
    my ( $self, $c ) = @_;

    $c->stash->{title} = 'PD수첩';
    $c->stash->{name1} = 'yuni';
    $c->stash->{name2} = 'saillinux';
  
    $c->stash->{template} = 'hello.tt';
}

 그리고 이와 $self->stash 로 하나하나 템플릿 변수를 지정해 줍니다. 여기서 $self->stash->{template} 는 해당 템플릿 파일과 매치를 하기때문에 위의 템플릿 변수를 넣어줄 템플릿을 지정해야 합니다. 위에서 'hello.tt'라는 템플릿을 만들었으니 'hello.tt'라고 넣어줘야 겠죠?
  $self->stash가 하는 일은 말씀 안해줘도 아시겠죠?
 아, 물론 Template 을 사용하게 되었으니.. $c->response->body()로 내용 넣어주던 짓은 이제 그만해도 됩니다. :-)
사용자 삽입 이미지
어떤가요? title 에는 PD수첩이.. name1에는 yuni 가 name2 에는 saillinux가 들어갔습니다.
 이런식으로 간단하게 Web Page 를 하나씩 추가해 나가시면 되겠죠?

 Template Toolkit 의 사용법은 이후에도 계속해서 알아가겠지만, 급하시면 아래를 참고하시면 되겠습니다.

 * 참고사이트
  - Template Toolkit
  - Catalyst

 다음에는 SQLite 를 이용한 간단히 Model 쪽을 살펴보겠습니다. :-)
신고
TOTAL 462,304 TODAY 1

티스토리 툴바