월풍도원 블로그의 컨텐츠를 정리한 dorajistyle.net

블로그에 글을 하나둘씩 적다 보니 제법 쌓여서 1,000개가 넘었다.
구글 블로그는 글을 쓰고 올리기는 좋지만 썼던 글을 찾아보기는 영 불편하다.
RSS를 동적으로 받아와서 분류해 보았지만, 동적으로 받아 오니 글 개수가 늘어날수록 성능이 떨어진다.
그래서 작년 가을에 static블로그를 하나 만들어야겠다고 마음을 먹고 가볍게 시작했다.
Jekyll, Octopress, Pelican, Middleman, Metalsmith등 다양한 Static site generate를 사용해 봤지만 아쉬움이 남았는데,
다양한 플러그인을 제공하는 Docpad를 알게 되어 이를 가지고 static 사이트 제작을 시작하였다.
며칠이면 뚝딱 만들 줄 알았는데 이게 1년 넘게 걸리는 대장정이 될 줄은 몰랐다.
Pure로 테마와 레이아웃을 간단하게 제작하고, 본격적으로 글을 옮기는 시도에 들어가면서 시간이 오래 걸렸다.
제일 큰 문제는 파일 개수가 너무 많으면 docpad에서 제대로 처리를 못 하는 것이었다.
generate를 한 번 실행하면 한 시간이고 두 시간이고 혼자서 자원을 잡아먹으며 시간을 보내고는,
‘오류가 발생한 것 같은데요?’
라는 메시지를 딸랑 던져줄 때 허무함이란 이루 말할 수 없었다.
버그를 한둘씩 잡다 보니 사계절이 지났다.
‘static 블로그는 무슨 static블로그냐. 집어 치우자.’
라는 생각과
‘그래도 지금까지 들인 공이 있는데 끝을 보자.’
생각이 교차하길 여러 번.
올해를 넘기지 않고 blogger-docpad를 완성했다.
이제 이 도구를 어디 노는 서버에 넣어 두고 cron을 돌려 두면, 구글 블로거에 글을 쓸 때마다 자동으로 static 블로그에 업데이트되는 거다.
글을 올리면 수작업으로 한 땀 한 땀 업데이트하는 재미도 있겠지만,
기계가 해도 되는 일을 수작업하는 건 무척 귀찮은 일이다.

꼭 하지 않아도 될 일을 하면서 사는 건 슬픈 일이다.
사람은 좀 더 게으르고 즐겁게 살 권리가 있다.

dorajistyle.net



by


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

파이썬 Flask에서 RequireJS Optimizer를 이용한 static폴더 최적화.

자바스크립트MVC를 이용할 경우 자바스크립트와 뷰 템플릿때문에 static폴더가 무겁습니다.
파일의 공백을 모두 제거하여 용량을 줄이면 좀 가벼워 지지요.
허나 파일 공백을 없애면 가독성이 떨어집니다.
난감한 상황이 발생해요.
길이 1m짜리 한줄코드를 고치고 기능 추가하는건 어렵잖아요?
변경이 빈번하게 일어나는 static 폴더.
개발 편의와 성능 두마리 토끼를 잡을 좋은 수가 없을까요?
RequireJS를 이용해 자바스크립트를 관리하신다면 방법이 있습니다!

우선 노드JS(http://nodejs.org)를 설치합니다.

RequireJS Optimizer를 설치합니다.

npm install -g requirejs

3. r.js를 다운로드 받습니다.(http://requirejs.org/docs/release/2.1.8/r.js)

4. 예제에서 사용할 어플리케이션 디렉토리 구조는 다음과 같습니다.

/build
  - r.js
  - build.js
/application
  __init__.py
  /static
    /views
      template.ejs
    /js
      app.js
      /vendor
        jquery-1.10.1.min.js
        bootstrap.min

application/init.py

from flask import Flask
app = Flask(__name__)
# static 폴더 경로를 지정해 줍니다. debug일땐 ‘static’폴더로 경로를 설정하고 나머지는 ‘static-build’를 경로로 잡습니다.
app.static_folder = 'static-build'
if app.debug:
        app.static_folder = 'static'

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

application/static/js/app.js

자바스크립트 어플리케이션 파일입니다.
requirejs의 기본 설정을 담고 있습니다.

require.config({
    "baseUrl": "/static/js",
    "paths": {
        "jquery": [
            "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min",
            "vendor/jquery-1.10.1.min"
        ],
        "jquery.bootstrap": [
            "//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min",
            "vendor/bootstrap.min"
        ],
    },
    shim: {
        "jquery.bootstrap": {
            deps: ["jquery"],
            exports: '$.fn.bootstrap'
        },
        enforceDefine: true
    }
});

requirejs(['jquery','jquery.bootstrap'],
    function ($) {
    // 어플리케이션 코드 
    }
);

/build/build.js

RequireJS용 build파일입니다.

{
    appDir: '../application/static',
    baseUrl: 'js/vendor',
    mainConfigFile: '../application/static/js/app.js',
    paths: {
        "jquery": "jquery-1.10.1.min",
        "jquery.bootstrap": "bootstrap.min",
    },
    dir: '../application/static-build',
    optimize: "uglify2",
    optimizeCss: "standard.keepLines",
    removeCombined: true, // combine된 파일은 남겨두지 않습니다.
    preserveLicenseComments: false,
    modules: [
        {
            name: '../app'
        }
    ]
}

프로젝트 루트 페이지에서 다음을 실행합니다.

JS/CSS파일을 최적화 하여 application/static-build 폴더에 저장합니다.
node ./build/r.js -o ./build/build.js

단 이는 js와 css만 최적화를 해 주기 때문에 Ejs 템플릿도 용량을 줄이려면 아래 커맨드를 이용하면 됩니다.
find ./application/static-build/views -name '*.ejs' -exec sed -i '/^\s∗\/\//d' {} \;
find ./application/static-build/views -name '*.ejs' -exec sed -i 's/^[ \t]*//g; s/[ \t]*$//g;' {} \;
find ./application/static-build/views -name '*.ejs' -exec sed -i ':a;N;$!ba;s/\n/ /g' {} \;

쉘 스크립트를 작성해 한번에 실행하면 간편합니다.

optimizer.sh

#!/bin/sh
cd './build'
node ./r.js -o build.js
cd '../application/static-build/views'
find . -name '*.ejs' -exec sed -i '/^\s∗\/\//d' {} \;
find . -name '*.ejs' -exec sed -i 's/^[ \t]*//g; s/[ \t]*$//g;' {} \;
find . -name '*.ejs' -exec sed -i ':a;N;$!ba;s/\n/ /g' {} \;

참고 자료



by


Tags : , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.