레이블이 bower인 게시물을 표시합니다. 모든 게시물 표시
레이블이 bower인 게시물을 표시합니다. 모든 게시물 표시

2014년 9월 16일 화요일

gae-init (약간) 사용 후기, 구글 앱 엔진(Google App Engine) 웹 어플리케이션 빠르게 시작하기

오전 6:53 Posted by jonnung , , , , , No comments

gae-init 은 Google App Engine에 웹 어플리케이션을 좀 더 쉽게 시작하기 위한 프로젝트 이다. 
일반적인 웹 어플리케이션 개발에서 수행하는 공통적인 작업들(파일 구조를 잡고, 최신 라이브러리를 다운로드 받고, 이전 프로젝트에서 개발한 코드 조각들을 모으는 등)을 자동으로 세팅 할 수 있도록 도와준다.
개발자는 더이상 시간 낭비 하지 않고, 좀 더 어렵고 중요한 작업에 집중할 수 있는 것이다.

공식 문서에서 제공하는 튜토리얼(Tutorial) 에서는 gae-init을 사용해서 개발, 빌드, 실행 그리고 배포까지 다루는 phonebook 예제(데모 보기)를 다루고 있다.

gae-init을 사용하기 위해서는 당연히 python이 있어야 한다.(GAE는 아직 python2.7만 지원함)
그리고 Node.js / Git / pip, virtualenv가 필수적으로 있어야 한다.
설치는 gae-init git 저장소를 clone 받으면 간단하게 시작 할 수 있다. 그리고  run.py -s  를 실행하면 venv(python 가상 환경)과 bower_components, node_modules을 자동으로 세팅하고, Flask로 만든 간단한 구조의 어플리케이션이 GAE SDK에서 제공하는 개발 서버를 통해 실행된다.

튜토리얼의 대부분의 내용은 기본적인 gae-init 세팅 구조에 phonebook 앱의 연락처 기능을 만드는 방법을 자세하게 다루고 있다. 

일단 난 튜토리얼을 다 따라해보지는 않았다. (이미 해 본 내용이기도 하고..)
사실 gae-init 이 세팅하는 구조가 내 입맛에 딱 맞지는 않았다.
그리고 난 거의 pycharm으로 개발을 하니까 개발 서버 실행을 위해 run.py 을 실행 할 일은 없겠지만, 그래도 run.py 파일을 보니까 나중에 참고해 볼만한 코드가 상당히 많았다.
Flask 어플리케이션 코드가 위치한 main 디렉토리도 커스터마이징해서 사용하면 될 것 같다.


(와아~ 어디서 run.py를 실행했는지도 수집하네ㅋㅋㅋ)

2014년 8월 11일 월요일

프론트엔드 웹 개발을 위한 자동화 관리 툴: Yeoman, Grunt, Bower

오전 6:54 Posted by jonnung , , , No comments
이미지 출처: http://yeoman.io/learning

최근에 개인적인 스터디 그룹 프로젝트에 Grunt와 Bower를 적용 해봤는데 정말 재밌었고, 나름대로 상당히 만족을 하고 있다.

잘 배워두고 자주 사용하면 기본적인 구조를 잡는 것부터 각종 라이브러리 설치와 의존성 관리, 그리고 각종 빈번한 작업들(소스 코드 합치기, 압축 등등)을 편리하게 수행하고 관리 할 수 있을 것 같다.

이번 포스팅은 Grunt, Bower와 더불어 Yeoman에 대한 간단한 소개와 참고 링크 정도를 남겨 본다.

Grunt

  • 자바스크립트 프로젝트를 위한 테스크 기반의 커맨드 라인 빌드 툴
  • 테스크(task)란 무엇인가?
    작업의 단위라고 생각하면 되겠다.
    js, css, html 같은 static 파일들을 하나로 합치고(concat) 압축을 해서 파일 사이즈를 줄이는(minification) 작업들, 테스트, 배포 등등을 각각 하나의 테스크라고 생각하면 쉽다.
    Grunt는 이런 빈번한 작업들을 사용자가 미리 정의해 놓은대로(Gruntfile.js) 자동으로 빌드해주는 툴이다.
  • Node.js로 만들어져 있다. 따라서 Node.js가 설치 되어 있어야 하고, npm에 등록 되어 있으며 global로 설치 한다.

Bower

  • 프론트엔드 컴포넌트 의존성 관리 툴 이다. 쉽게 말해 위에서 Grunt를 설치하기 위해 사용한 npm과 비슷한 것이다.
  • 예를 들어, 새로운 프로젝트를 시작하거나 진행하던 프로젝트에 bootstrap3을 설치한다고 했을때 bootstrap 웹사이트에 가서 소스코드를 다운 받고, 프로젝트의 적당한 디렉토리에 복사할 것이다.
    하지만 이미 설치 되어 있는 jquery 버전과 bootstrap에 포함된 jquery 버전과 차이에 의한 의존성 관계가 문제 될 수도 있다.
  • bower는 이런 상황에서 각종 컴포넌트들의 설치도 간편하게 해주겠지만, 의존성 부분도 말끔하게 관리해준다.

Yeoman

  • 일단은 스캐폴딩 기능만 사용해 봤기 때문에 웹 어플리케이션의 기본 구조를 쉽고, 편하게 잡아줄 수 있는 도구로 생각하고 있다.
  • Generator 라는 것을 이용해서 개발하려는 프로젝트 종류(webapp, bootstrap, angularjs 등등)에 따라 기본적인 구조를 알아서 잡아준다.
  • 내부적으로 Grunt, Bower를 사용하고 있다.

설치와 사용법 참고 사이트


스터디 그룹 프로젝트에 적용해 보면서 생각 한건데 Python Flask 웹앱을 스캐폴딩 해주는 Yeoman Generator가 있었으면 좋겠다는 생각이 들었다.

그랬는데 역시나 있었다. github에서 2개 정도 찾았는데 한개는 angularjs와 flask 조합 제너레이터(generator-angular-flask) 이고, 나머지 하나(flask-app-generator)는 package.json 도 없고, 기타 등등 없는게 많은지 제대로 동작을 안한다.

바로 python virtual 환경 세팅(virtualenv)랑 flask 설치, 그리고 테스트 웹서버 실행까지 Grunt랑 조합해서 가능할 것 같은 생각이 드는데...

간단하게 하나 만들어 봐야겠다.