유부중년 개발자의 우울

find me at https://iolo.github.io

언제 어디서 시작됐는지, 또 얼마나 지속될지 모르겠지만 정적 사이트 생성 방식의 CMS(?)가 대유행이다. IFAIK, 이 방식의 원조는 21세기 초(!) 펄로 만들어진 blosxom이었고, 널리 쓰이기 시작한 것은 파이썬으로 만든 클론 pyblosxom이었다. 지금도 blosxom과 그 친구들은 여전히 명맥을 유지하고 있지만... 그로부터 십수년이 지나고... 유행은 돌고 돌아... prologue 이 포스트에서 소개할 것은 Hexo라는 정적 사이트 생성도구다. 수많은 정적 사이트 생성도구들 중에서 굳이 Hexo를 선택한 이유는: nodejs로 만들어졌다. 내가 필요한게 있으면 뜯어고칠 수 있어야 하므로... github flavoured markdown, jade, less 를 지원한다. 기본 설정은..

주의: 예제 코드 따위 없음! 본의 아니게 시리즈가 되어버린 답사기... 기왕 시작한거 몇 개만 더 해보자. 자바스크립트 Date 는... 20세기에 만들어져서 그런가? 구리다. 너무 구리다. 정말 구리다. 그런 의미에서(어떤 의미?)... 출처: Tasty Chefs-d'oeuvre 자바에선 jodatime을 기본 라이브러리 처럼 썼는데... Node.js에선 뭘 쓰죠? 라고 물으신다면... 일단, 구글에서 javascript date library를 검색하면 꽤 앞 쪽에(내 경우엔 두번째) 등장하는 date.js는 2008년에 개발이 중단된 녀석이므로 일단 무시!!! 가끔씩 구글신도 실수를 하신다. 메이저한 녀석들을 살펴보면... moment.js 2.8.3, active, Isaac Cambron ..

주의: 예제 코드 따위 없음! 출처: 반다이의 야심작(?) Tuttuki Bako job scheduler는 뭐에 쓰는 물건인고? 라고 물으신다면... setTimeout이나 setInterval을 먼저 살펴보시고, 여기서 "몇 밀리초 후에/마다" 대신 좀 더 복잡한 규칙(예: 매주 월요일 새벽 3시)을 사용할 수 있게 해주는 라이브러리죠. 그 이상도 그 이하입니다. 자바 쪽에서는 Quartz, Spring Batch 같을 걸 썼는데... Node.js에는 어떻게 하죠? 라고 물으신다면.. 이 정도 링크만 드리면 되겠죠? Node.js를 위한 job schduler는 몇가지 없는데, 그나마 거들떠 볼만한 녀석으로는: kue 0.8.9, active, Behrad, 원제작자는 배신자(?)로 유명한 TJ. ..

TV, Pig, Bug Crazy cars on the road even today. Where the children are? Empty playground. I spent all day long, in front of TV. Fill up and up but still poor world, our greed shoot up to the sky. I ate and ate again all day long, like a pig. Face up but don't be afraid. The pipe dream world. How soon will the sorrow of river meet the blue sea. Don't be angry, you'll be tired. Don't argue against..

뜬금없이...는 아니고 예전에 쓰다 말고 비공개로 방치해둔 걸... 오늘 발견 -_-;;; 휴가 마지막날 한라산 올라갔다가... 대략 1분에 걸쳐서 천천히 구름이 백록담을 넘어가는 동영상을 찍었는데... 인스타그램은 15초만 재생할 뿐이고~ 구간을 이리저리 바꿔봐도 15초만 놓고 보면 움직이는지 마는지 느낌도 없고... 그래서! 뒤져보았습니다. 결론은 ffmpeg!! $ ffmpeg -i ~baekrokdam.mov -vf "setpts=(1/4)*PTS" -an baekrokdam4x.mov 여기서 "setpts=(1/4)*PTS"의 1/4를 원하는 배속으로 바꿔주면 됨. 오디오는 재생 속도가 변경되지 않으므로 -an 옵션으로 오디오 제거. 요걸 응용하면, 최근 인스타그램에서 나온 hyperlapse ..

주의: 예제 코드 따위(!) 없음. 최근 회사 일로 nodejs에서 mysql을 쓰고 있는데, node-mysql로 날코딩 - 특히 connection pooling, validation, pyramid-of-doom - 하는 게 맘에 걸려서 ORM 비슷한 걸 써볼까 궁리질 중... 구글링을 해보니 역시나 비슷한 고민들이 스택에 넘치네...: http://stackoverflow.com/questions/21309311/nodejs-orm-which-one-is-best-formysql http://stackoverflow.com/questions/6007353/which-orm-should-i-use-for-node-js-and-mysql 메이저한 것들로는: sequelize.js 2.0.0-rc1, ..

오랜만에 mysql 닭질... 별 생각없이 허접한 테이블을 만들어서 brew로 설치한 mariadb로 잘 쓰고 있었는데... CREATE TABLE foo ( ... created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, ...); 진짜 mysql이 깔린 리눅스 서버에 배포하다가... 밑도 끝도 없는 에러~(두둥!) ERROR 1294 (HY000) at line 2: Invalid ON UPDATE clause for 'created_at' column구글링을 좀 해보니... http://jasonbos.c..

맥/윈도에서도 도커를 쓰고 싶어요!! 겉으로 보이는 증상은 그렇지만, 기술적으로는 도커 호스트와 도커 클라이언트가 다른 머신인 상황이다. 이 유명한(?) 그림의 출처는 1989에 출간된 Total Quality Management인데, 지금도 개정판이 나온다능~ ㄷㄷㄷ 도커 호스트는 반드시 리눅스 머신이어야 하기 때문에, 맥/윈도에서는 별도의 진짜 리눅스 머신을 준비하던가, virtualbox나 vmware 등을 이용해서 가상의 리눅스 머신을 준비한다. boot2docker를 사용하면 간단하게 윈도/맥에서 virutalbox로 Tiny Core Linux 배포판을 사용하는 도커 호스트를 만들 수 있다. 도커 호스트에서는 도커 데몬이 tcp 소켓으로도 요청을 받도록(기본은 unix 도메인 소켓으로만 요청을..

이 글은 쉽게 이해하고 설명하기 위해 의도적으로 왜곡한… 혹은 몰라서 왜곡된… 내용을 포함하고 있다. 잘못된 부분에 대한 지적질이나 더 쉽게 이해하고 설명할 수 있는 제안은 언제든지 환영이지만, 진실을 향한 열정(?)은 참아주시길… 진실을 알고 싶은 분들을 위해서 곳곳에 진실로 가는 링크를 걸어두었지만… 때론… 저 너머에 있는 진실을 모르는 편이 나을 수도…(먼산) (나름대로) 용어 정리 도커(docker)는 리눅스 컨테이너(linux container; LXC)를 관리하는 도구(tool)다. 도커 컨테이너(docker container)는 도커가 관리하는 리눅스 컨테이너 프로세스다. 기술적으로는 가상머신(virtual machine; vm)이 아니다. 그렇지만 초(!)경량 가상머신이라고 생각하면 이해하..

여기 두 개의 링크가 있다. 하나는 모범 답안이고 다른 하나는 … 안알랴줌~ http://blog.docker.com/2014/06/why-you-dont-need-to-run-sshd-in-docker/ http://stackoverflow.com/questions/17903705/is-it-possible-to-start-a-shell-session-in-a-running-container-without-ssh 그냥 하면 되지! MACOSX$ ssh core@192.168.xxx.xxx COREOS$ uname -a Linux localhost 3.15.5+ #2 SMP Wed Jul 16 02:42:54 UTC 2014 x86_64 Intel(R) Core(TM) i7 CPU M 620 @ 2.67..

서버 개발자로 돌아온 기념으로... 맥에서 docker를 쓰고 싶다. 공식 사이트의 문서를 보니… boot2docker를 쓰라고 한다. 나에겐 거금(?) 주고 산 vmware fusion이 있지만, boot2docker는 virtualbox만 지원한다. boot2docker를 vmware와 함께 쓰는 법을 찾으니… dvm을 비롯한 다양한 방법이 있군 @..@ brew cask 깔고 vagrant 깔고… 열심히 따라했는데… invalid license… (두둥) 알고보니, vagrant의 vmware 프로바이더는 유료… $79. (두두둥)) vmware fusion 업글 비용 $39가 아까워서 5.0 쓰고 있는데… 그거랑 별도로 $79… 난 vagrant 필요없는뎅 Orz 난 그냥 docker가 필요한건뎅..

아기다리고기다리던 안드로이드용 티스토리앱이 드디어 나왔습니당~ 회사를 옮기고 제주 내려와서 첫 프로젝트였는데... 오랜만에 안드로이드라 삽질도 많이했고~ 만감이 교차하네요. 아아아 마이크 테스트 글씨 크기 테스트!! 하늘색 군청색 녹색 티스토리오렌지색 주황색 갈색 짙은녹색 보라색 분홍색 색깔테스트!! 볼드 이탤릭 밑줄 취소선 스타일 테스트!! 사진 첨부 테스트!! 이미지 꾸미기 테스트!! 이제 티스토리 팀에서의 용병생활을 끝내고 본래 자리로~~ 고고싱~~

최근(2013년 12월) 브라우저 점유율 그리고 잡생각 데스크탑(태블릿 포함) 브라우저 점유율 IE8 35% 보합 넘사벽. IE10 25%까지 급등. IE9 15% 급락. 크롬 20% 강보합. 나머지 다 합쳐도 한자리. 대충 보면… XP 쓰는 사람들은 어찌어찌해서 IE8로 거의 넘어갔고, 윈7, 8 쓰는 사람들은 거의 IE10으로 넘어가고 있고, 크롬이 기대 이상으로 잘하고 있지만 한계에 봉착.우울하지만… 대충 예상했던 스탯… 전체(데스크탑/태블릿/모바일/기타) 브라우저 점유율 안드로이드 25% 약보합. IE8 25% 강보합. IE10 급등 16%. 크롬 보합 15%. IE9 급락 12%. 아이폰 2% 보합. 나머지 다 합쳐도… ㅠ..ㅠ 데스크탑/모바일에서 각각 짱먹는 두 녀석이…하필…개발자들을 괴롭히는..

요약 최소한 세 가지 정도의 이미지를 준비해야 함. 높은 해상도의 정사각형 아이콘 이미지(1024x1024 권장) -> 다양한 아이콘 크기로 resize. 높은 해상도의 세로형 스플래시 이미지(2536x2560 권장) -> 다양한 크기로 종횡비 유지 resize & center crop.(가로 전용이라면 필요없음) 높은 해상도의 가로형 스플래시 이미지(2560x1536 권장) -> 다양한 크기로 종횡비 유지 resize & center crop.(세로 전용이라면 필요없음) 특이한 크기 또는 자주 쓰이지만 자동 resize 품질이 나쁜 이미지들은 별도로 준비(예: 16x16 아이콘). 그 외에 멋진 스크린샷과 홍보 동영상도 필요. 안드로이드 아이콘 참고: http://developer.android.com..

최근 국내에도 웹폰트를 적용하는 사이트들이 늘고 있는데, 한글 웹폰트는 영문 웹폰트에 비해 용량이 크기 때문에 웹폰트가 다 로딩 되기 전까지 텅빈 화면이 보이는 경우가 많아서 살짝 아쉽다.. 구글과 어도비가 공동 개발한 Typekit WebFontLoader를 쓰면 구글 웹폰트, Typekit 등이 유/무료로 제공하는 웹폰트는 물론이고 구글 웹폰트 Early Access(여기에는 나눔고딕 등의 한글 폰트도 있다)나 모빌리스 웹폰트(다양한 유/무료 한글 웹폰트를 제공) 같은 커스텀 웹폰트도 손쉽게 사용할 수 있다. 또한 웹폰트 로딩 상태에 따라 추가적인 처리도 할 수 있어서, 웹폰트가 로딩되는 동안 보여줄 다른 폰트를 지정하거나, 로딩 안내 메시지를 표시하는 등, 다양한 기능을 구현할 수 있다.할 수 있다..

오랜만에 안드로이드 삽질… 안드로이드는 여전하구나 -_-;; 여차저차(대외비)… gradle이랑 android gradle plugin이랑 꼬여서 빌드 안됨. gradle 1.9가 필요함. 삽질 시~~작! 설치된 적이 있는 버전을 확인 예들 들어, 설치된적이 있는 gradle의 버전을 확인하려면: $ brew info gradle gradle: stable 1.9, devel 1.10-rc-1 http://www.gradle.org/ /usr/local/Cellar/gradle/1.9 (143 files, 42M) Built from source /usr/local/Cellar/gradle/1.10 (143 files, 42M) * Built from source From: https://github.c..

지난 두 달 동안 k-mobile을 통해서 "모바일웹 & HTML5 하이드브리드 앱 개발"이라는 주제로 3일에 걸쳐 매일 3시간씩 총 9시간 강의가 있었는데, 여기서 소개하는 자료는 그 중에서 첫날 3시간 동안 발표한 내용이다. 강의 자료를 대충 살펴보면 알겠지만, 뜬구름 같은 트렌드 혹은 패러다임을 "얘기"하고 있어서, 구체적인 기술이 중요한 3일짜리 속성 과정에 적합하지 않은 것 같아 자진 사퇴(?)하고, 발표자료를 공개(?)한다. 내가 발표했던 첫날 3시간은 @ibare님이 좀 더 실무적이고 유익한 내용으로 강의하실 듯~ ^^ 단일 페이지 인터페이스 웹/앱 개발 View more presentations from iolo may the keynote be with you...

지금은 50만원이면 "네트웍 프린팅"까지 되는 "컬러" "레이저" 프린터를 살 수 있지만... 내가 처음 PC를 접하던 시절엔 "프린터"는 매장에나 가야 구경할 수 있는 물건이었다. 당시 한전 전산실에 있던 형이 가끔 집에 들고 들어왔던 132 컬럼 프린터 용지에 어설프게 찍힌 글자들로 프린터의 존재를 처음 인식했던 것 같다. 타자기처럼 활자가 미리 세겨진 해머를 때려 인쇄하는, 말하자면 텔레타이프(teletype; tty) 방식이었다. 당시 전기요금고지서(우리 형은 지금도 누가 전기"세"라고 말하면 전기"요금"이라고 정정해준다ㅋㅋ)는 텔레타이프로 찍은 것이라 한글이 볼품 없었다. 뭐~ 수천만장을 찍어야 하는 고지서니까 예쁜 것보단 빠른게 중요했겠지... 중학교 때 들락거리던 컴퓨터 매장에서, 보석글로 ..

자바스크립트라고 하면 전화번호 형식 검사하고, 삭제하기 전에 confirm 이나 하는 열 줄 백 줄 짜리 "스크립트"를 떠올리지만, 웹 플랫폼 시대의 자바스크립트는 지난 시대의 자바스크립트와는 다르다. 이미 자바스크립트로 백 줄 천 줄을 짜야 하는 시대다, 조만간 몇 만, 몇 십만 줄을 짜게될지도 모르겠다. 이 쯤되면 자바스크립트도 더 이상 대충 짜서 대충 돌아가면 땡~이 아니다. 소스를 적절히 모듈로 나눠야 하고, 그렇게 나눈 모듈을 테스트도 해야 하고, 그에 맞는 나름대로 디렉토리 구조도 갖춰야 하고, 빌드도 해야 한다. 각설하고, 이 글에서는 jasmine이라는 유닛 테스트 프레임웍을 이용해서 자바스크립트 유닛 테스트를 해보려고 한다. jasmine은 javascript+examine의 합성어 처럼..

xui.js 초간단 리뷰 요약xui.js는 모바일 html5 웹앱에 특화된 초경량 자바스크립트 라이브러리 특징 초경량(9.4k) - jquery 최소 29k, dojo 최소 31k, jQueryMobile 최소 135k, Sencha Touch 최소 524k, … 단순 명쾌하고 익숙한(jQuery 스타일의 메소드 체이닝) 문법 모바일에 최적화(webkit, ie mobile, blackberry) 제약없는 오픈소스 라이센스(MIT; Sencha의 듀얼 라이센스 대비 장점) 개발 배경Nitobi가 PhoneGap 용으로 개발한 자바스크립트 라이브러리. 기능 요약아래에, xui.js가 제공하는 모든(!) 함수를 간략하게 설명합니다. 개발자 분들의 이해를 돕기 위해 대응하는 jquery와 dojo의 함수도 같..

지난 포스트에서는 CORS에 대해서 (아직 지원하지 않는 브라우져가 많다고 지레 짐작하고) 용어만 언급하고 넘어갔다. 최근에 올라온 "Methods of communication"이라는 글에 걸린 링크를 통해 지금 당장이라도 쓸 수 있음을 확인하고, 몇 자 적어보려고 한다. Ajax에는 Same Origin Policy라는 원칙이 있다. 말 그대로, 현재 브라우져에 보여지고 있는 HTML을 내려준 웹서버(Origin)에게만 Ajax 요청을 보낼 수 있다. MS가 XMLHttpRequest를 처음 만들 때만 해도 이런 제약은 당연한 것처럼 보였지만, 지금에 와서는 OpenAPI를 통한 매시업(Mashup)이 활성화되는 데 가장 큰 장애물이 되었다. 매시업이 아니더라도 여러 개의 도메인을 사용해야 하는 대규..

앱스프레소 확장 API를 사용한 AJAX/* 앱스프레소(Appspresso)는 이클립스 기반의 SDK 형태로 배포되어 사용하기 더 편리하다(?)는 것과 WAC(Wholesale Applications Community)의 Waikiki API를 제공한다는 점을 빼면 폰갭(PhoneGap)과 비슷한 하이브리드 웹앱 프레임웍/툴이다. 이 녀석을 만든 장본인이라 블로그질 하기가 좀 뭣하지만... 어차피 보는 사람도 별로 없는 블로그라 ㅋㅋ */ 일반적인 웹 어플리케이션(혹은 웹 서비스)이 갖는 크로스 도메인 제약이 (폰갭과 달리) 앱스프레소로 만든 웹앱에도 동일하게 적용됩니다. W3C에 준비중인 Cross-Origin Resource Sharing(CROS)이 표준화되어 모바일 webkit에 적용되면 좋겠지만..

/* 막간을 이용해서 CSS 삽질~~ just for fun~~ 나름 삽질한다고 했는데... 해서 만들었는데... 아무도 안쳐다보는 것 같아서... ㅠㅠ 결과 동영상을 짤방으로~~(웅장한 사운드 주의!!!!) */ 웹킷 CSS 애니메이션으로 스타워즈 오프닝 크롤 구현하기 CSS3에는 자바스크립트의 도움없이 애니메이션 효과를 구현할 수 있는 방법이 추가되었다. 대표적인 것인 transition과 animation이다. transition은 간단한 전환 효과를 구현할 때 주로 사용되고, animation은 플래시와 유사한 키프레임 기반 애니메이션을 만들 때 사용된다. 21세기, 머나 먼 은하계 저 멀리... IE6가 세계에서 두번째로 많은 대한민국의에서 HTML5와 CSS3의 멋진 기능들이 그림의 떡일 뿐이..

웹에서 아이폰스러운 Carousel 구현하기 페이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다. 이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다. 백문이..

터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기 아이폰/아이패드/아이팟의 모바일 사파리와 안드로이드의 모바일 크롬 등은 모두 터치기반 모바일 웹킷을 사용하는 브라우져들이다. 이 브라우져들은 버튼 등을 눌렀다(touchstart) 떼도(touchup) 즉시 반응(click)하지 않는데, 그 이유는 연속되는 터치 동작(touchstart-touchmove-touchend)들이 제스쳐(swipe, long click, …)인지 여부를 확인하기 위해 최대 300ms의 지연시간이 생기기 때문이다. 모바일 웹 사이트를 만드는 경우라면 이 정도의 지연시간은 크게 문제가 되지않지만, 상대적으로 신속한 반응을 요구하는 “웹앱"이라면 얘기가 달라진다. 해결책은 간단하다: 1. 손가락으로 무언가를 누르면(touchstar..

아무 것도 가진 것 없는 개발자에게 구글과 스택오버플로는 애달픈 양식 아무도 관심 없는 메모리에서 하나의 비트도 커다린 빛 나의 코드는 나의 힘 나의 코드는 나의 삶 끝없는 사다리 if문에서 버그의 낌새를 알아채듯이 한 달 된 신입의 코드 속에서 희망의 변수를 보았으면 나의 코드는 나의 힘 나의 코드는 나의 삶 거미줄처럼 얽힌 로직 속에서 릴리즈되지 않는 메모리처럼 QA가 없어도 이 프로그램 속에 마지막 한 마리의 버그가 있는 한 나는 고치고 코딩하리 나는 고치고 코딩하리 주워 온 소스와 라이브러리 찬란한 마일스톤에는 멀지 않으리 땜빵으로 가득한 코드 속에는 TODO와 FIXME가 쏟아져 나오면 나는 써내리 나의 코드를 나는 써내리 우아한 코드를 그러나 그대 모두 타이핑할 때 코드는 멀리 멀리 날아가리 ..

퍼키군의 트윗에서 본 옴니 한글 카드 사진 덕분에 옛날 기억들이 새록새록... 이젠 추억이라 말할 수 있을 만큼의 시간이 지났고... 그냥 생각나는 대로 적어보려고 한다. 초딩.. 정확히는 국딩 시절, 처음 접한 FC-30은 그냥 신기하고 알 수 없는 그 무엇 그 이상도 그 이하였다.(응?) 컴퓨터라는 것을 인식하고 접한 기계는 8비트 애플... 정확히는 로얄 컴퓨터라는 회사에서 만든 애플II+호환 기종이 처음이라고 보는 게 맞겠다. 한수찬님이 쓴 애플 입문 II+(제목이 특이해서 지금도 기억한다)와 애플 어셈블리 두 권의 책이 유일한 (한글로 된)스승이 었고, 컴퓨터에 한글이 안나오는 것이 전혀 이상하다는 생각도 못했다. 그 무렵에는 (전산을 전공했던)형이 남겨둔 디스켓들을 뒤적거리다가 이것 저것 실행..

얼마전에 쓴 "HTML5/CSS3/JavaScript로 아이폰 앱 만들기"에서 설명(응? 언제 설명했는데?) 반복적인 초기 작업을 더 쉽게 할 수 있도록 Xcode 프로젝트 템플릿을 만들어 보았다. Dropbox에 올려둔 hellowebapp-ios-xcode_project_templates.tar.gz 를 받아서, "~/Library/Application Support/Developer/Shared/Xcode/Project Templates"에 풀고, Xcode에서 File 메뉴의 New Project를 선택하거나, Xcode를 실행하고 "Create a new Xcode project"를 선택)하면, 프로젝트 템플릿을 선택하는 대화상자가 나오는데, "User Templates" 아래에 "WebApp"..

사무실에 앉아서 이짓꺼리(?) 하고 있다. 이런 쓰잘데기 없는 동영상을 굳이 만들어 올리는 이유는 "웹 앱"(WebApp; HTML5App)이 그렇게 거창한 것도 아니고, 어려운 것도 아니고, 멀리 있는 남의 나라 이야기도 아니라는 것을 보여주기 위해서다. PhoneGap, Titanium, QuickConnect 같은 거창한(?) 제품을 동원하지 않더라도 JQueryMobile, Jo, Wink, Sencha Touch 같은 UI 툴킷과 HTML5 canvas 태그 그리고 HTML5 JS API들(WebStorage, WebSQLDatabase, WebWorker, ...), 그리고 W3C의 DAP(Geolocation, ...)를 사용하면 웬만한 앱은 만들 수 있다. 아무튼, "3분" 만에 "웹 기술..