Flask-Canjs-i18n-Boilerplate

Flask와 Canjs를 이용한 다국어 어플리케이션 토대

canjs와 python flask를 이용한 다국어 어플리케이션 제작을 위한 토대입니다.
Flask 부분은 Matt Wright님의 글에서 영감을 얻었습니다.

Flask-Canjs-i18n-Boilerplate 소스

특징

• Flask/Canjs 연동.
• 다국어 지원.
• 사용자 CRUD 구현.
• 사용자 following/followers 기능 구현.
• 소셜 네트워크 연결 구현.
• 페이스북
• 기타 (TODO)
• RESTful API 구현.
• 반응형 웹 디자인.
• 구글 크롤러 친화적 url('#!').
• 간편한 개발 문서 제작.(Sphinx)
• 쉬운 테스팅. (nosetests)
• 다양한 브라우저 호환 (IE7, IE8, IE9, IE10, Firefox, Chrome, Opera..)
• 더 많은 기능을 윈하신다면, 함께 만들어 가요! :D

써보기

http://flask-canjs-i18n-boilerplate.ap01.aws.af.cm/

어떻게 동작하나요?

환경

클라이언트 사이드

• Canjs, 클라이언트 사이드 자바스크립트 프레임워크.
• RequireJS, 자바스크립트 파일•모듈 로더.
• Initializr, HTML5 템플릿.
• Bootstrap, 프론트엔드 프레임워크.
• Bootstrap-ie7, 부트스트랩 3에서 IE7을 지원을 도움.
• mustache, 템플릿 엔진.
• i18next, 자바스크립트 다국어 도구.
• Font Awesome, 크기 변환등 개별화 가능한 백터 아이콘 모음을 제공.
• typeahead.js, 텍스트 자동 완성 라이브러리.
• spin.js, 작업중 활동 표시기.
• Placeholders.js, 자바스크립트를 통해 HTML5의 placeholder 속성을 사용 할 수 있게 함.
• Jade(pyjade), 파이썬용 Jade 템플릿 엔진 확장.
• jQuery, 작고 빠르고 유용한 자바스크립트 라이브러리.
• jQuery BBQ, HTML5 hashchange 이벤트 사용을 도와줌.

서버 사이드

• Flask, 가벼운 파이썬 프레임워크.
• Flask-Babel, 플라스크용 다국어 확장.
• Flask-Gravatar, 플라스크용 그라바타 확장.
• Flask-Security, 플라스크용 로그인 보안 확장.
• Flask-Social, Flask-Security에서 Oauth를 지원하는 확장.
• Flask-Assets, 자바스크립트와 스타일시트를 관리하는 플라스크용 확장.
• Flask-SQLAlchemy, SQLAlchemy사용을 위한 플라스크용 확장.
• Flask-WTF, WTForms 통합 확장.
• Flask-Cache, 캐쉬 사용을 도와주는 플라스크용 확장.
• Alembic, SQLAlchemy 데이터베이스 마이그레이션 관리 도구.
• Celery, 분산 메시지 전달 기반의 비동기 작업 queue/job 큐.

디버깅과 테스팅

• flask-debugtoolbar, django-debug-toolbar를 플라스크 용으로 포팅한 디버깅 툴바.
• nose, 멋진 파이썬용 테스팅 도구.
• BusterJS, 자바스크립트 테스팅 도구.

문서 생성

• Sphinx, 지적이고 아름다운 문서를 만들어주는 도구.
• JSDoc, 자바스크립트 문서화 도구.

설치

도구 설치

• virtualenv, 분리된 파이썬 환경을 만들어줍니다.
• virtualenvwrapper, virtualenv를 보다 편리하게 사용하도록 돕습니다.

프로젝트 복제

$ git clone https://github.com/dorajistyle/flask-canjs-i18n-boilerplate.git
$ cd flask-canjs-i18n-boilerplate.git

프로젝트를 위한 virtualenv 생성

$ mkvirtualenv flask-canjs-i18n-boilerplate

필요 라이브러리 설치

$ pip install -r requirements.txt

데이터베이스 마이그레이션

$ alembic revision --autogenerate -m "Alembic initilized boilerplate tables."
$ alembic upgrade head

관리자 추가

'[email protected]'와 'password'로 로그인 하시면 됩니다.

$ python manage.py init_user

설정

설정 값을 올바르게 설정해야 합니다.(데이터베이스, 메일, 소셜 네트워크 정보...)

• application/settings.py엔 서버 사이드 설정이 들어 있습니다.
• application/frontend/static/js/settings.js엔 클라이언트 사이드 설정이 들어 있습니다.
• ./alembic.ini엔 alembic설정이 들어있습니다.

번역

• 서버 사이드 번역(Babel)은 applications/frontend/translations 폴더에 있습니다.
• 클라이언트 사이드 번역(i18next)은 applications/frontend/static/locales 폴더에 있습니다.

바벨 번역 컴파일

$ python tr_compile.py

사용

어플리케이션 실행

$ python wsgi.py

어플리케이션 프로파일 실행

$ python profile.py

문서 생성

$ python generate_documents.py

정적 폴더 최적화

Nodejs 와 RequireJS가 설치되어 있어야 합니다.
더 자세한 문서를 원하신다면 다음을 클릭하세요. RequireJS Optimizer.
$ optimize_static.sh

테스트

$ nosetests

아래의 테스트 스크립트를 이용하셔도 됩니다.

$ python run_nosetests.py

---

사용권

Flask-canjs-i18n-boilerplate는 MIT license를 따릅니다.

by 月風

Tags : 다국어, canjs, debelopment, flask, Flask-Canjs-i18n-Boilerplate, IT, web

• 재미있게 읽으셨나요?
  광고를 클릭해주시면,
  블로그 운영에 큰 도움이 됩니다!

Javascript snippets

유용한 javascript 예제와 팁

URL 파라메터 받아오기(get PARAM)

http://www.codetreat.com/get-url-parameters-values-with-javascript

$.params = function(paramname){
var value = new RegExp('[\?&]' + paramname + '=([^&#]*)').exec(window.location.href);
return value[1];
}


Jquery 셀렉터 성능(JQUERY SELECTOR Performance)

http://jsperf.com/selectors-perf/6
cssSelector는 id 나 element와 함께 쓰지 않고 단독으로 사용한다.


var obj = document.getElementById("childDiv");
xxx = obj.getElementsByClassName("txtClass");


 

이벤트 처리

preventDefault() : 이벤트의 기본 행동을 막는다.
If this method is called, the default action of the event will not be triggered.
stopPropagation() : 상위 핸들러로 이벤트를 넘기지 않도록 막는다.
Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.

prepend() - 앞쪽에 내용을 붙인다.(to attach content as a prefix.)
append() - 뒷쪽에 내용을 붙인다. (to attach content as a suffix.)

배열 요소에서 데이터를 받고 싶을 땐 $()로 한번 더 감싼다.
$($(array_selector)[0]).data(something);

두번 submit되는 문제(prevent submit twice)
onclick이벤트 보다는 onsubmit 이벤트를 사용한다.
http://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery

this.element.find('.save').attr('disabled','disabled');

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
$(this).bind('submit',function(e){
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
}
// Keep chainability
return this;
};


JSON

Object to String
JSON.stringify(obj);
Parse JSON response
JSON.parse(obj);

JSON.parse()사용시 오류 : Uncaught SyntaxError: Unexpected token o
http://stackoverflow.com/questions/8081701/i-keep-getting-uncaught-syntaxerror-unexpected-token-o
데이터형이 올바르지 않아서 나는 오류이다.
Looks like jQuery takes a guess about the datatype.
It does the JSON parsing even though you're not calling getJSON()--
then when you try to call JSON.parse() on an object, you're getting the error.

loglevel

https://github.com/pimterry/loglevel
원하는 레벨의 로그를 콘솔 메시지로 보낸다.
켜고 끄는 것이 편리하다.
log.enableAll() and log.disableAll() methods.
* log.trace(msg)
* log.debug(msg)
* log.info(msg)
* log.warn(msg)
* log.error(msg)

JavaScript 디버깅

chrome dev tool -> Settings -> General -> Disable cache
Timeline을 이용하면 어떤 코드가 어플리케이션에 부하를 주는지 찾아준다.
메모리 누수가 발생한다면 찾아 개선한다.
Profiles도구에서 Heap Snapshot을 두 개 만들어 comparison view로 비교하면 성능 저하 원인을 찾기 편하다.

by 月風

Tags : debelopment, IT, javascript, snippet, tip, web

• 재미있게 읽으셨나요?
  광고를 클릭해주시면,
  블로그 운영에 큰 도움이 됩니다!