'2012/02'에 해당되는 글 9건

  1. 2012/02/29 BigData 처리를 위한 맵리듀스(MapReduce)에 대하여~
  2. 2012/02/23 아이폰용 Web App을 만들기 위한 HTML5 요소들
  3. 2012/02/22 [도서] 페이스북 이펙트 - 전 세계 5억 명을 연결한 소셜네트워크 페이스북의 인사이드 스토리
  4. 2012/02/16 끝없이 "왜"라고 물어라
  5. 2012/02/15 N-Screen을 지원하는 미디어 쿼리에 대하여
  6. 2012/02/07 HTML video 태그의 DOM 지원~
  7. 2012/02/06 [도서] GAE로 시작하는 클라우드 컴퓨팅 - 구글 앱 엔진 활용하기
  8. 2012/02/03 아파치 로그를 쉽게 필터링 할 수 있는 프로그램 cronolog~
  9. 2012/02/01 Mobile Web에서의 스와이프를 위한 SwipeView 활용 (4)

BigData 처리를 위한 맵리듀스(MapReduce)에 대하여~

|


미니 프로그래밍 이야기 검색:


올 한해 IT 이슈 중 BigData에 대한 것이 있습니다. 이러한 BigData를 처리하기 위해서 여러가지 기술들이 사용되고 있는데요. 
오늘은 그 중의 하나인 맵리듀스(MapReduce)에 대해서 정리해 보려고 합니다.

BigData와 관련해서 구글은 2003년 GFS, 2004년 MapReduce, 2005년 Sawzall, 2006년 Bigtable과 같은 기술들을 통해서 시장을 선도하고 있습니다.
특히 최근 파이썬에서 자바까지 확장한 구글 앱 엔진에서는 Bigtable 기반의 데이터베이스를 활용하고 있지요. 

맵리듀스는 대용량 데이터를 빠르고 안전하게 처리하기 위해서 기존 하드웨어를 활용한 분산 프로그래밍 모델이라고 합니다. 
2004년 OSDI 컨퍼런스에서 "MapReduce : Simplified Data Processing on Large Clusters"란 제목으로 논문이 발표되면서 관심을 받기 시작했습니다.

맵리듀스를 활용하여 오픈 소스 루씬(Lucene)의 개발자였던 Doug Cutting은 구글의 분산 기술을 기반으로 2006년부터  Hadoop이라는 오픈소스 프로젝트를 진행하게 됩니다. 
구글의 GFS에 해당한 HDFS는 대규모 분산파일시스템을 구축을 위한 성능과 안정성을 보여주었고
맵리듀스는 이런 대용량 파일에 대한 로그 분석, 색인 구축, 검색에서 탁월한 능력을 발휘하게 되었습니다.

실제로 맵리듀스를 클라우드 환경에서 구축하고 서비스를 제공하는 사례가 많이 나오고 있다고 합니다.
아마존 일라스틱 맵리듀스(Amazon Elastic MapReduce)는 PaaS(Platform as a Service) 서비스로, 맵리듀스 플랫폼을 클라우드 서비스로 제공하고 있습니다. 즉, 고객이 하둡을 사용하기 위해서 자체 클러스터를 구성하는 등의 노력을 하지 않고, 아마존의 클라우드 인프라를 이용 하여, 대용량 데이터 처리에 대해서 사용한 만큼 지불 하고 비용을 절약할 수 있게 됩니다.

그렇다면 먼저 맵리듀스에 대해서 좀 더 자세하게 알아보도록 하지요.

맵리듀스는 맵 단계와 리듀스 단계로 처리 과정을 나누어 작업합니다.
각 단계는 입력과 출력으로써 키-값 쌍을 가지고 있고, 그 타입은 프로그래머가 선택합니다.
또한 맵과 리듀스 함수도 프로그래머가 직접 작성하게 됩니다.


위 그림은 맵리듀스에 대해 개념적으로 잘 설명하고 있습니다. 
두 개의 문장 ("클라우드 컴퓨팅 용어의 정의는 무엇인가?", "최근 클라우드 컴퓨팅이 화두가 되면서 애매모호한 용어로 인해")에서 단어의 개수를 세는 프로그램을 맵리듀스를 통해서 처리한다고 가정하고 있습니다. 

먼저 맵 함수를 통해 키, 값 쌍으로 결과를 추출합니다. 
그리고 나온 결과들을 섞어서 병합합니다. 

이어서 리듀스 함수를 통해 최종적인 각 단어별 개수를 결과로 제공하게 됩니다. 

이렇게 사용하는 맵 함수나 리듀스 함수는 사용자가 임의로 프로그래밍 할 수 있도록 구성되어 있구요. 
내부적으로 병렬 처리를 통해서 대용량 데이터에 대해 빠르게 결과를 낼 수 있다는 것입니다. 

위에서 보는 것처럼 병렬 처리를 위해서는 전체 입력을 통째로 처리하는 것보다 많은 스플릿을 통하여 분할된 조각으로 처리하는 것이 더 짧은 시간이 걸립니다. 그래서 스플릿 크기가 작을 수록 부하 분산에 더 좋은 효과를 내게 됩니다. 
하지만 항상 그렇듯 분할 크기를 너무 작게 하면, 분할 관리와 맵 태스크 생성을 위한 오버헤드가 전체 잡 실행 시간을 압도하기 때문에 역효과가 날 수도 있게 되지요. 
그래서 하둡(Hadoop)에서는 기본적으로 64MB의 HDFS 블록을 기준으로 스플릿하는 추세라고 합니다. 


그럼 실제로 하둡에서 맵리듀스를 처리하는 그림을 보시죠.. 


실제로는 많은 맵 태스크와 리듀스 태스크를 통해 결과 파일을 만들어 내고 있습니다. 
앞서 본 개념과 동일하게 맵과 리듀스를 통해서 대용량 데이터를 분석하고 처리하는 것을 알 수 있습니다. 

맵리듀스의 개념을 살펴보면 대용량 처리를 위해 기존의 데이터베이스(RDBMS)를 보완하는 것처럼 보입니다. 
특히 맵리듀스는 일괄처리 방식으로 전체 데이터셋을 분석할 필요가 있는 문제에 적합하고 
RDBMS는 대화형으로 처리되는 문제나 업데이트에 보다 적합하다고 할 수 있습니다. 

즉, 맵리듀스는 데이터가 한번 쓰이면 여러번 읽게 되는 응용프로그램에 적합하고, 
RDBMS는 지속적으로 업데이트되는 데이터셋에 적합하다고 할 수 있습니다. 

맵리듀스와 RDBMS의 비교는 다음을 참고하시기 바랍니다. 

   전통적인 RDBMS  맵리듀스 
 데이터 크기  기가바이트   페타바이트 
 액세스   대화형과 일괄처리   일괄처리 
 업데이트   여러 번 읽고 쓰기   한 번 쓰면, 여러 번 읽기 
 구조   고정 스키마   동적 스키마 
 무결성   높음   낮음 
 확장성   비선형   선형 

분명히 RDBMS와 맵리듀스 기반의 하둡(Hadoop)에 대한 차이는 존재하는 것 같습니다만, 
현재 클라우드 기반의 대부분 서비스들이 대용량 처리를 위해서 맵리듀스 기반의 하둡(Hadoop)과 같은 형태로 구축하고 있다고 합니다.

이에 따라 기존의 RDMS 진영에서 다음과 같은 주장을 통해서 맵리듀스를 견제하고 있다고 하네요. 
- A giant step backward in the programming paradigm for large-scale data intensive applications
- A sub-optional implementation, is that it uses brute force instead of indexing
- Not novel at all - it represents a specific implementation of well known techniques developed nearly 25 years ago
- Missing most of the features that are routinely included in current DBMS
- Incompatible with all of the tools DBMS users have come to depend on 
이와 관련해서는 맵리듀스 논쟁과 Schema-Free 를 참고하시기 바랍니다. 

새로운 개념들에 당황하실 분들을 위해 앞에 나온 용어들에 대해서 잘 정리된 내용을 옮겨봅니다. 

하둡(Hadoop)
대량의 자료를 처리할 수 있는 큰 컴퓨터 클러스터에서 동작하는 분산 응용 프로그램을 지원하는 자유 자바 소프트웨어 프레임워크이다. 원래 너치의 분산처리를 지원하기 위해 개발된 것으로, 아파치 루씬의 하부 프로젝트이다. 분산처리 시스템인 구글 파일 시스템을 대체할 수 있는 하둡 분산 파일 시스템(HDFS: Hadoop Distributed File System)과 맵리듀스를 구현한 것이다.

너치(Nutch)
루씬을 기반으로 하여 만든 오픈소스 검색 엔진이다. 루씬을 기반으로 하였지만 웹 크롤러는 처음부터 다시 만들었다. 여러 가지 플러그인을 붙일 수 있도록 모듈화가 잘 되어 있다. 현재 아파치의 하위 프로젝트이다. 완전히 자바로 작성되어 있지만 자료는 특정 언어와 관계없는 형식으로 저장된다. 100만 페이지 정도를 검색할 수 있다. 여러 대의 머신에서 수행될 수 있도록 맵리듀스와 분산파일처리를 구현하였는데, 이제는 하둡이라는 하위 프로젝트를 통하여 따로 관리되고 있다.

맵리듀스(MapReduce)
구글에서 2004년 개발한 소프트웨어 프레임워크(방법론)이다. 이 프레임웍은 페타바이트 이상의 대용량 데이터를 신뢰할 수 없는 컴퓨터로 구성된 클러스터 환경에서 병렬 처리를 지원하기 위해서 개발되었다. 이 프레임웍은 함수형 프로그래밍에서 일반적으로 사용되는 Map과 Reduce라는 함수 기반으로 주로 구성된다.
현재 MapReduce는 Java와 C++, 그리고 기타 언어에서 적용이 가능하도록 작성되었다.

루씬
자바로 전부 제작된 텍스트 검색 엔진 라이브러리.


 
크리에이티브 커먼즈 라이선스
Creative Commons License




Trackback 0 And Comment 0

아이폰용 Web App을 만들기 위한 HTML5 요소들

|


미니 프로그래밍 이야기 검색:


작년 영국의 파이낸셜타임즈는 애플의 앱스토어의 폐쇄성과 수익 분배 이슈에 대응하기 위해서 HTML5를 활용한 웹 앱을 도입했다고 합니다. 
그래서 빠른 업데이트가 가능하고 기존의 웹사이트와 통합해서 관리할 수 있게 되었고, 
가입자도  5개월만에 1백만 접속자가 웹앱에 접속함으로 인해 성공한 사례로 회자되고 있습니다. 

실제로 아이폰으로 파이낸셜타임즈(http://app.ft.com)에 접속해 보면 "홈 화면 추가"를 통해 Web App으로 등록을 유도하도록 잘 설명되어 있습니다.
처음 등록한 후, 일반 앱처럼 실행되고 로컬 저장소도 사용하는 것을 보면서 잘 만들었다는 생각이 들기도 했습니다. 

아직 HTML5가 보편화되지는 않았지만 향후 발전 가능성에 대해서는 잘 보여준 사례라고 할 수 있을 것 같습니다.
실제로 파이낸셜타임즈는 안드로이드에서는 앱 형태로 배포하면서 애플과는 다른 형태로 서비스 하고 있습니다. 
물론 안드로이드도 외부만 앱일뿐 내부영역은 똑같이 모바일 웹으로 구성하고 있습니다.



그럼.. 아이폰 Web App이 가능하게 한 HTML5의 요소는 어떤 것일까요? 

바로 <head> 영역에 다음의 4가지 태그를 추가함으로써 가능하게 됩니다.

<link rel="apple-touch-icon" href="/image/icon.png" />

이 부분은 웹 앱으로 등록할 아이콘을 설정하는 것입니다. 
아이콘 사이즈는 기종에 따라 조금씩 다르기는 하지만 현재 아이폰 4에 맞추어 114 X 114로 저장하면 리사이징 해준다고 합니다. 

<link rel="apple-touch-startup-image" href="/image/startup.png" />

웹 앱을 실행할 때, 초기 화면을 띄울 수 있도록 지정하는 것입니다. 
마치 일반 앱처럼 로딩화면을 적용할 수 있습니다. 

<meta name="apple-mobile-web-app-capable" content="yes" />

웹 앱으로 실행할 때, 일반 앱처럼 보이도록 사파리 브라우드의 UI를 안나타게 해주는 역할을 합니다. 

<meta name-"apple-mobile-web-app-status-bar-style" content="black" /> 

기본 회색으로 되어 있는 상태바의 색상을 지정할 수 있습니다. 
이를 통해 보여줄 컨텐츠와 적절하게 맞출 수 있게 됩니다.  



크리에이티브 커먼즈 라이선스
Creative Commons License

'XML Developer > HTML5' 카테고리의 다른 글

아이폰용 Web App을 만들기 위한 HTML5 요소들  (0) 2012/02/23
HTML video 태그의 DOM 지원~  (0) 2012/02/07
HTML5를 활용한 블로그 BGM (?) 테스트~  (0) 2011/12/02
HTML5 audio 태그  (0) 2011/02/16
HTML5 video 태그  (2) 2011/02/02
HTML5에 추가된 요소들  (2) 2011/01/20




Trackback 0 And Comment 0

[도서] 페이스북 이펙트 - 전 세계 5억 명을 연결한 소셜네트워크 페이스북의 인사이드 스토리

|


미니 프로그래밍 이야기 검색:


페이스북 이펙트 - 8점
데이비드 커크패트릭 지음, 임정민.임정진 옮김/에이콘출판

최근 페이스북이 기업공개를 하면서 다시 주목받는 것 같습니다. 
국내에서도 이제는 꽤 많은 사용자를 보유하고 있는 서비스이기도 하고 상장하면서 수많은 억만장자를 만들어내기도 했는데요. 

사람과 사람을 이어주는 소셜네트워크로 페이스북이 최초는 아니었지만,
현재까지 성장에는 타당한 이유가 있을듯 하여 이 책을 읽어보게 되었습니다.

국내에서도 2000년대 초반의 아이러브스쿨에서부터 최근 싸이월드까지 친구를 기반으로 한 소셜네트워크 서비스가 많이 있었죠.
하지만 서비스가 계속 지속되지 못하고 점차 하락 추세에 있는 것은 분명합니다. 

반면에 페이스북은 현재까지도 지속적으로 성장하고 있는데요.
책에 나온대로라면 창업자인 마크 주커버그의 확신과 끊임없는 자기 혁신이 그 토대가 아닌가 합니다. 

광고 수익보다는 서비스가 우선이고, 사용자를 늘리기보다는 그에 맞는 서버 용량을 갖추어야 한다는 점은
서비스를 기획, 개발, 운영하는 측면에서는 새겨 들어야 할 메시지가 아닌가 합니다.


이들의 발전하는 모습이 대단하게 느껴지기는 했지만, 
스티브 잡스의 책을 읽을 때처럼 감동적이지는 않았습니다.
왠지 처음부터 잘 갖춰진 환경에서 시작했고, 적절한 시점에 적절한 투자들이 뒷받침되었으며
그러면서도 CEO의 경영권을 유지하고, 훌륭한 인재들이 찾아오는 구조는 부럽기만 했네요.

물론 가치를 인정받을 정도로 잘 만든 서비스였기에 가능했겠지만
서비스보다는 회사의 규모를 먼저 보려하고, 인재들은 중소기업은 쳐다보지도 않는
국내 환경에서는 아직도 애플, 구글, 페이스북과 같은 기업들이 나오기 어렵다는 생각에 아쉬움도 들었습니다.  

개인정보 보호를 위해 @havard.edu 계정이 있어야만 가입이 가능했던 초기 모델은
추후 학교를 확대함으로써 사용자의 증가를 서비스가 통제할 수 있었다는 측면에서 매우 효율적이었던 것 같았습니다. 
이로 인해 서버 용량도 예측해서 확장할 수 있었고, 가입할 수 없는 사용자들에 대한 관심 유발도 가능했을 것 같구요.

주커버그는 "변화의 책"이라는 노트에 향후 더하고 싶은 서비스들을 세부적으로 적는 습관이 있다고 합니다. 
페이스북의 발전 모델을 계속해서 적어나가는 것이라고 하는데요.
자신의 노트에 서비스들을 세부적으로 기록하면서 전체적인 큰 그림을 완성하는 노력이야말로 배워야 할 점이 아닌가 하네요. 

또한 이 책에는 페이스북의 과거 뿐만 아니라 진화와 미래에 대한 이야기도 담겨 있습니다.

하나의 서비스를 만들고 발전시키고 유지하기 위해 얼마나 많은 노력과 수고가 있었는지를 알 수 있습니다.
그저 부러워하기 보다는 잘 배워서 우리가 하는 서비스에 반영하고 싶은 생각이 드네요.

세상에서 가장 흔한 것은 아이디어고 그보다 중요한 것은 돈과 마케팅이지만
실제로 성공하는 것은 역시 꾸준한 노력과 연구가 아닐까 합니다.
 

크리에이티브 커먼즈 라이선스
Creative Commons License




Trackback 0 And Comment 0

끝없이 "왜"라고 물어라

|


미니 프로그래밍 이야기 검색:


행복한 경영이야기(http://www.happyceo.co.kr/Default.aspx)에서 가져온 내용입니다. 

이치를 따질 때에는 반드시 깊이 생각하고 힘써 탐구하여야 한다.
의심할 것이 더 이상 없는 곳에서 의심을 일으키고,
의심을 일으킨 곳에서 또 다시 의심을 일으켜
더 이상 의심할 것이 없는 완전한 지경에 바짝 다가서야 비로소
시원스럽게 깨달았다고 말할 수 있다.
- 정조대왕, [정조 치세어록]에서 (안대회 저)
다음과 같이 다섯 번을 ‘왜’라고 물으라고 강조합니다.

첫째, 왜 그런가?

둘째, 이 정도로 괜찮은가?

셋째, 무언가 빠뜨린 것은 없는가?

넷째, 당연하게 생각하는 것들이 정말 당연한 것인가?

다섯째, 좀 더 좋은 다른 방법은 없는가?


특히 네번째 질문인 당연하게 생각하는 것이 정말 당연한지는 항상 가져야 할 의문인 것 같습니다.
머리속에서만 당연하다고 생각한 것이 실제로는 당연히 안되는 경우가 꽤 많은 것 같습니다.

무슨 일이든지 위의 다섯가지의 의문점을 가지고 파악하면 도움이 될 것 같네요.


 
크리에이티브 커먼즈 라이선스
Creative Commons License




Trackback 0 And Comment 0

N-Screen을 지원하는 미디어 쿼리에 대하여

|


미니 프로그래밍 이야기 검색:


HTML4와 CSS2에서는 다양한 미디어 타입에 따라 처리할 수 있는 스타일시트를 지원하고 있습니다. 
스마트폰, 태블릿, 스마트TV 등 다양한 화면의 크기를 가진 기기들이 배포됨에 따라 관심을 받게 된 것 같습니다. 

먼저 미디어 쿼리를 적용한 사이트(http://mediaqueri.es/)를 모아둔 곳을 한번 살펴보시죠.

 
One-Source Multi-Use 측면이나 모바일 웹 개발이 증가하면서 미디어 쿼리를 적절하게 활용하는 것이 필요할 것 같습니다. 
미디어쿼리에 대한 W3C의 문서는 현재 Candidate Recommendation 상태로 거의 현재 상태로 표준이 될 것 같네요.  

미디어쿼리는 CSS에 설정을 통해서 화면 크기 등에 따라 다른 형태로 보여줄 수 있도록 구현하는 것입니다.
이를 위해 media 라는 지시자를 통해서 CSS에 설정하게 됩니다.


이런 미디어 쿼리를 지정하는 방법은 크게 세가지가 있습니다. 

1. CSS 파일을 나누어서 가져오기 
<link rel="stylesheet" media="screen and (max-width:480px)" href="example.css">

2. <style> 태그에 media 속성으로 지정하기 
<style type="text/css" media="screen and (max-width:480px)">
</style>

3. CSS 내에 @media 사용하기 
@media all and (max-width:480px) { } 

이 중에서 일반적으로 CSS 내에 @media 태그를 통해서 적용하는 방법을 많이 사용하는 것 같습니다. 

미디어 쿼리에서는 미디어 타입을 지정해서 구분할 수 있습니다. 
위 예제에서 screen, all 과 같은 것들을 미디어 타입이라고 하는데요. 
여러가지 타입들을 지원하고 있지만 주로 사용하는 것은 다음과 같습니다. 

  • all - 모든 미디어 타입
  • screen - 컴퓨터 스크린을 위한 용도
  • print - 인쇄 용도

미디어 타입과 더불어 다양한 조건들을 지정할 수 있습니다. 일부만 살펴보면 다음과 같습니다.
여러 조건들을 결합해서 활용도 가능합니다. 

  • 가로 너비 - width, min-width, max-width
  • 세로 높이 - height, min-height, max-height
  • 단말기의 가로 너비 - device-width, min-device-width, max-device-width
  • 단말기의 세로 너비 - device-height, min-device-height, max-device-height
  • 화면 회전 - orientation 
  • 화면 비율 - aspect-ratio, min-aspect-ratio, max-aspect-ratio

단, 미디어 쿼리로는 기능상의 분기는 어렵습니다. 이런 경우 기존의 자바 스크립트나 웹 프로그래밍을 통해서 처리해야 할 것 같습니다. 
또한 모바일 기기와 PC를 CSS 미디어쿼리로 구분하는 것이 아니라 기존처럼 UserAgent와 같은 값을 통해서 자바스크립트로 확인해야 합니다. 
미디어 쿼리는 단지 화면의 크기와 같은 속성을 통해서 처리하게 됩니다.
마찬가지로 orientation과 같은 속성도 모바일 뿐만 아니라 PC에서도 가로와 세로 길이에 따라서 구분하게 됩니다. 

미디어 쿼리의 설정에 대한 보다 자세한 사항은 다음 사이트들을 참조하면 됩니다. 
http://mydeute.com/txp/article/631 
미디어 타입과 조건들을 PC, iPhone, iPad, 스마트폰과 같은 디바이스별로 설정해 놓은 값들은 다음 사이트를 참고하면 도움이 되겠네요.
http://firejune.com/1633 

크리에이티브 커먼즈 라이선스
Creative Commons License




Trackback 0 And Comment 0

HTML video 태그의 DOM 지원~

|


미니 프로그래밍 이야기 검색:


예전에 HTML <video> 태그에 대해서 정리했었는데요. 
오늘 살펴보니 DOM을 활용해서 제어할 수 있는 기능이 추가되어 있네요.

즉, 동영상 내에 재생, 중지 등의 버튼이 포함되는 것 뿐만 아니라
HTML 내에 있는 버튼을 통해서 동영상을 제어할 수 있도록 Methods, Properties, 그리고 Events가 제공되고 있습니다. 

다음 예제를 살펴보시면 재생과 정지를 하는 버튼과
속성(Property)를 변경해서 동영상 크기를 제어하는 것을 알 수 있습니다.
HTML5에서 항상 그렇듯 지원하는 브라우저에서만 제대로 보입니다. ㅠㅠ

Example 1



Video courtesy of Big Buck Bunny.

테스트해보세요 »


메소드(Methods)는 재생, 정지, 로딩과 같은 것들이 있구요. 
속성(Properties)는 볼륨조절, 크기조절과 같은 값들을 읽고 쓸 수 있도록 되어 있습니다. 
또한 동영상이 재생되거나 정지되거나 끝날때 발생하는 이벤트도 있습니다.

속성들 중에서 동영상 재생 중 변경할 수 있는 값으로는 위 예제와 같이 크기를 조절하는 videoWidth, videoHeight만 있는 것 같습니다. 
나머지 속성들은 처음 로딩되었을 때만 설정할 수 있는 듯 하네요. 

이러한 것들을 정리하면 다음과 같습니다. 

HTML5 <video> - Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:

Methods Properties Events
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  



크리에이티브 커먼즈 라이선스
Creative Commons License

'XML Developer > HTML5' 카테고리의 다른 글

아이폰용 Web App을 만들기 위한 HTML5 요소들  (0) 2012/02/23
HTML video 태그의 DOM 지원~  (0) 2012/02/07
HTML5를 활용한 블로그 BGM (?) 테스트~  (0) 2011/12/02
HTML5 audio 태그  (0) 2011/02/16
HTML5 video 태그  (2) 2011/02/02
HTML5에 추가된 요소들  (2) 2011/01/20




Trackback 0 And Comment 0

[도서] GAE로 시작하는 클라우드 컴퓨팅 - 구글 앱 엔진 활용하기

|


미니 프로그래밍 이야기 검색:


구글 앱 엔진 활용하기 - 8점
찰스 세브란스 지음, Software in Life 옮김/지&선(지앤선)

클라우드 컴퓨팅의 PaaS(Platform as a Service)의 대표인 구글 앱 엔진에 대해 다룬 책으로 관심있게 읽어봤습니다. 
기본적인 GAE(Google App Engine)의 설치나 서버에 적용하는 방법등은 짧지만 이해하기 쉽게 설명되어 있습니다.

그러나 이 책이 매우 맘에 들었던 가장 큰 이유는 
하나의 흐름을 가지고 Google App Engine 뿐만 아니라 해당 엔진을 활용한 웹 프로그래밍에 대해서 전반적으로 잘 설명하고 있다는 점입니다. 

웹프로그래밍 개요, HTML과 CSS, Python, Ajax 등 기본적인 내용이지만
구글 앱 엔진에 적용하기 위해서 반드시 알아야 하는 부분들에 대해 요약해서 잘 설명하고 있는 것 같습니다.

여기에 구글 엡 엔진의 프레임워크, 템플릿, 쿠키와 세션 처리, 그리고 데이터스토어에 대해서도 예제를 통해 살펴볼 수 있도록 구성되어 있습니다.

일단 구글 앱 엔진이 어떤 형태로 구성되어 있는지 이해하게 되었고,
더 나아가 이런 형태로 하나의 예제로 쭉 강의를 한다면 처음 웹 프로그래밍을 접하는 사람들이 이해하는데 도움이 되겠다는 생각도 들었네요. 

최근 구글앱엔진에서 java도 지원하는 것으로 알고 있는데요. 
클라우드 환경으로 이동하면서 Google App Engine이나 MS Azure와 같은 PaaS에도 관심을 가져야 하지 않을까 합니다. 
http://code.google.com/intl/ko-KR/appengine/ 

항상 그렇듯 책으로 배우는 것은 기본적인 개념이라고 봐야 하구요. 
세부적인 사항은 구글 앱 엔진 사이트의 문서들을 참고해서 프로그래밍을 해야겠지요.  

구글 앱 엔진의 최대 장점은 세계 곳곳에 위치한 구글 최고의 데이터센터에서 서비스를 운영할 수 있다는 점입니다.
앱 엔진 애플리케이션을 만들고 배치하고 나면 다음과 같이 말할 수 있다고 하네요.. ^^

My other computer is a data center.
My other computer is somewhere in one or more world-class data centers scattered around the world.

책 내용을 살펴보면 먼저 HTML에 대한 이야기로 시작합니다. 

요즘은 XHTML과 같이 HTML 규약에 적합한 표준 문서를 만드는게 중요하지만, 예전에는 대충 HTML 만들어도 브라우저에서 동작하기는 했었죠.
오히려 이런 점이 초기 HTML 툴이나 개발자들에게는 지금에 와서 표준을 지켜야 한다는 어려움을 주기도 합니다. ㅠㅠ
이처럼 결함이 있거나 불완전한 HTML을 만나면 브라우저는 쿼크 모드 (Quirks Mode)로 들어가 브라우저마다 다른 결과를 보내준다고 합니다. 
그러므로 well-formed HTML 문서를 만드는 것이 웹 프로그래밍에서 첫번째로 가장 중요하겠죠.. 

CSS에 대해서도 제법 상세하게 이야기 합니다.
CSS의 유효성을 검사할 수 있는 CSS Validation Service(http://jigsaw.w3.org/css-validator/)에 대한 소개와 더불어 
책의 메인 예제로 사용되는 HTML에 대한 기본적인 CSS를 통해 각 항목을 상세히 설명하고 있습니다. 

저도 일부분을 참고해서 정리를 하나 하기는 했네요.. ^^
2012/01/20 - [프로그래밍/Web] - CSS의 Margin, Padding, Border 개념을 명확하게 하자

구글 앱 엔진은 파이썬 2.5 이상에서 동작하는데요. 
기존의 다른 언어를 해 보신 분들이라면 파이썬의 기본 구문만 이해하면 쉽게 할 수 있을 것이라 생각합니다.
특히 파이썬은 들여쓰기를 사용해서 블록을 구분하는 독특한 문법을 사용하고 있으므로 코드 작성 스타일을 반드시 지켜야 한다고 하네요

웹 프로그래밍에서 MVC 모델이 보편화되면서 유지보수 등을 위해 대부분 템플릿이라는 것을 활용하게 됩니다. 
구글 앱 엔진에서 기본적으로 사용하는 템플릿 문법은 Django 프로젝트(http://www.djangoproject.com/)에서 차용했다고 합니다. 

책의 예제에 기반해서 계속적으로 새로운 기능을 추가하려면 다음과 같은 과정을 이야기 하고 있습니다. 
  • 새로운 기능을 위한 URL을 결정하자.
  • 새로운 핸들러를 만든다. 먼저 GET 방식의 요청을 받아 새로운 템플릿을 적용하는 간단한 작업부터 시작한다. 
  • URL을 새로운 핸들러로 처리하기 위해 main()에 새로운 라우팅 항목을 만든다.
  • 필요한 템플릿들을 추가한다. 
  • 새로운 네비게이션 메뉴가 필요하면 _base.html에서 수정한다. 
  • 핸들러의 나머지 부분을 만들고 새 기능을 테스트한다. 

그리고 쿠키와 세션을 사용하는 방법에 대해서도 이야기 하고 있는데요. 
구글 앱 엔진에서는 세션 기능을 제공하지 않기 때문에 세션 유틸리티를 다운로드 해서 추가해 줘야 한다고 합니다. 

데이터 저장소를 위해서는 NoSQL을 지원하는 구글의 빅테이블(Bigtable) 기술을 기반으로 한 구글 데이터스토어를 활용해야 합니다. 
Development Console의 Datastore Viewer를 통해 데이터를 직접 관리할 수도 있구요. 
책의 예제에 데이터스토어에 저장, 쿼리, 데이터 추출 등에 대해 설명되어 있고  특히 RDB의 foreign key와 같은 참조 처리(ReferenceProperty)에 대해서도 설명되어 있으니  참고해 보시기 바랍니다. 
구글의 빅테이블을 조금이라도 맛볼 수 있는 부분이 아닌가 생각됩니다. 

그밖에도 구글의 사용자 API(User API)를 활용하여 구글 계정을 통해 인증할 수 있는 방법, 메모리 캐시에 대해서도 간략하게 설명만 되어 있네요. 
구글 앱 엔진의 개발자 가이드의 API를 보면 이러한 것들이 잘 포함되어 있으니 참고하시기 바랍니다. 

개발자 가이드

Google 애플리케이션 엔진에 오신 것을 환영합니다. 이 개발자 가이드에는 Google 기술을 사용하여 확장 가능한 웹 응용프로그램을 작성하기 위해 필요한 모든 내용이 들어 있습니다.

이 가이드는 다음과 같은 내용으로 구성되어 있습니다.



 
크리에이티브 커먼즈 라이선스
Creative Commons License




Trackback 0 And Comment 0

아파치 로그를 쉽게 필터링 할 수 있는 프로그램 cronolog~

|


미니 프로그래밍 이야기 검색:


아파치 로그를 분석하는 awstats에 대해서는 지난번에 블로깅을 한 적이 있습니다. 
2011/08/20 - [프로그래밍/리눅스] - 웹로그 분석 프로그램 AWStats 활용 

그런데 최근 로그 파일을 분석하려고 해보니 2달 정도 쌓이 로그가 6G 정도 되더라구요. 
(월별로 쌓도록 구성했어야 했는데.. 설정을 변경해야 겠네요. ㅠㅠ)
awstats가 분석하다가 결국 out of memory라는 말을 남기고 그대로 종료해 버렸습니다. 

그래서 로그 파일을 분할하는 프로그램을 찾아봤는데요. 
cronolog(http://cronolog.org/)라고 하는 프로그램이 있더군요. 


원래는 아파치 로그가 쌓일때 월별, 날짜별로 저장하도록 필터를 쉽게 설정할 수 있는 프로그램이라고 합니다.
그런데 여기 실행파일을 보면 cronosplit 이라는 파일이 있습니다. 
바로 이 파일을 활용해서 지정된 형태로 기존 파일을 분할 할 수 있었습니다.


그럼 cronolog의 설치와 사용에 대해서 살펴보도록 하죠.
wget을 이용해서 소스 파일을 받습니다. (아 우분투에서 테스트했습니다.)

> wget http://cronolog.org/download/cronolog-1.6.2.tar.gz 

압축을 풀고 소유권을 조정한 후 /usr/local 폴더로 옮겼습니다.

> tar xvfpz cronolog-1.6.2.tar.gz
> chown -R root:root cronolog-1.6.2/
> cp -R cronolog-1.6.2/ /usr/local/

이제 컴파일을 진행했습니다.

> cd /usr/local/cronolog-1.6.2
> ./configure
> make && make install 
 
컴파일 후 살펴보니 cronosplit 프로그램은 src 폴더에 있었네요. 
파일에 실행 권한이 없어서 실행 권한을 부여했습니다. 

> cd /etc/usr/local/cronolog-1.6.2/src
> chmod 755 ./cronosplit 

자 이제 파일 분할을 시작해 보겠습니다.
template를 통해서 파일 분할해서 저장할 형태를 지정할 수 있는데요.
첫번째는 일별로, 두번째는 월별로 저장하는 겁니다. 

> ./cronosplit access_log --template=%Y%m%d_access_log
> ./cronosplit access_log --template=%Y%m_access_log 

 
크리에이티브 커먼즈 라이선스
Creative Commons License




Trackback 0 And Comment 0

Mobile Web에서의 스와이프를 위한 SwipeView 활용

|


미니 프로그래밍 이야기 검색:


포털 사이트를 비롯한 모바일 웹을 살펴보면 좌우로 스와이프 하는 기능들이 많이 포함되어 있습니다. 
협소한 공간에 여러 컨텐츠를 배치하기 위한 방법으로 활용되고 있는데요.

이러한 스와이프를 구현하기 위해서는 꽤 많은 자바스크립트와 코드가 들어가야 합니다.
오늘 소개할 SwipeView는 이러한 기능을 처리해 주는 스크립트를 제공하는 거네요..

http://cubiq.org/swipeview
cubig.org 사이트를 보면 이외에도 상당히 괜찮은 모바일 웹 기반의 소스들을 제공하고 있습니다.


먼저 스와이프가 적용된 동영상과 데모 페이지들을 살펴보시죠. 




이미지 갤러리에 대한 데모 페이지는 다음과 같습니다. 
http://cubiq.org/dropbox/SwipeView/demo/gallery/

이미지 이외의 컨텐츠를 포함할 수도 있다고 하는데요. 
텍스트로 구성된 컨텐츠에 대한 예제는 다음 데모 페이지를 살펴보면 됩니다. 
http://cubiq.org/dropbox/SwipeView/demo/ereader/

제공하는 소스를 다운로드해서 살펴보면 src 폴더에는 swipeview.js 파일만 하나 있습니다. 
이 파일을 기존 HTML에 추가하고 스와이프가 필요한 컨텐츠를 적용하면 스와이프가 이루어지게 됩니다. 
demo 폴더를 살펴보면 위 예제 페이지들의 소스가 포함되어 있어 쉽게 적용할 수 있을 겁니다. 
해당 사이트에서도 소스를 받을 수 있지만 혹시 몰라서 여기에도 업로드 해봅니다.

 
iOS 4.x 이상, 안드로이드 2.3 이상에서 동작하며, 일반 웹브라우저도 webkit 기반에서는 동작한다고 되어 있습니다.
실제 적용해 보니 아이폰에서는 정말 부드럽게 동작하지만 안드로이드에서는 약간 delay가 있어 보였습니다. 
그래도 다른 소스보다는 무난히 동작하는 것 같네요~
 
또한 모바일 환경을 고려하여 Silder와 Viewport로 나누어 Viewport는 한 화면만 보여주고
Slider에 앞뒤를 포함해 3개의 페이지만을 보관하는 형태로 구성되어 있다고 합니다. (빠르게 스와이프하는 것도 고려해 설계 되어 있다고 하네요)
메모리의 제한을 고려한 설계로 모바일 개발에서는 많이 사용하는 형태이기도 합니다.


소스들을 살펴보니 swipeview.js 파일을 포함하고 난 후, 
new SwipeView()를 통해 swipe 객체를 생성하고 
해당 객체에 스와이프할 데이터들을 로드하고 난 후
onFlip 메소드를 통해서 스와이프를 처리하게 됩니다. 

해당 소스를 살펴보고 직접 적용해 보면 쉽게 이해가 될 것 같습니다. 




 
크리에이티브 커먼즈 라이선스
Creative Commons License




Trackback 0 And Comment 4
prev | 1 | next