기억하고 싶은 것들

CoffeeScript, prototype의 단축 표현 '::'

sangpire — Mon, 30 Jan 2012 22:29:19 +0900

CoffeeScipt 에서 prototype 사용법

JavaScript Prototype

JavaScript에서 prototype은 해당 클래스의 모든 인스턴스가 공유하는 메소드입니다.

String.prototype.bark = function() {
	return "멍멍!!";
};
String("강아지").bark(); // 멍멍!!
"Dog".bark();		// 멍멍!!
"고양이".bark();		// 멍멍!!

그런데 .prototype. 이거 입력이 은근 귀찮습니다.

CoffeeScript Prototype

커피스크립트에서는 :: 연산자로 .prototype.을 대신합니다.

String::bark = -> "멍멍!!"
String("강아지").bark()		## 멍멍!!
"Dog".bark()			## 멍멍!!
"고양이".bark()			## 멍멍!!

가끔 prototype의 메소드를 static 메소드인양 쓰고 싶다면 그냥 쓰면 됩니다.

String::bark() ##"멍멍!!"

보다 완벽한 내용은 CoffeeScript 홈페이지에서...

Class에 관한 내용 바로 다음에 나오네요.

vim, 오늘 .vimrc 에 추가된 설정 정보.

sangpire — Fri, 13 Jan 2012 00:55:57 +0900

vim, 탭이나 개행문자를 보고싶어요.

list mode

List mode: Show tabs as CTRL-I is displayed, display $ after end of line.

즉, list mode로 들어가면, 탭문자와 줄바꿈 문자가 화면에 표시되게 됩니다. 그리고 list mode는 다음 명령으로 들어갈 수 있습니다.

:set list

'listchars'

list 모드에서, 탭 문자나, 개행문자를 '→' '↵' 와 같은 문자로... 나타나게 할 수 있습니다.(인코딩이 UTF-8인 경우, UTF-8 문자도 사용 가능.)

그리고 탭문자나 개행문자 이외에도 다음과 같은 문자들을 지원합니다.

eol:c	개행문자 'c'로 표시
tab:xy	탭문자 첫 글자는 'x'로 이후는 탭 너비에 따라 하나 이상의 'y'를 표시
trail:c	구문이 끝난뒤 들어간 불필요한 공백문자를 'c'로 표시
extends:c	vim이 'nowrap' 상태에서 화면을 뚫고 넘어간 문장이 있는 라인 오른쪽에 'c'표시
precedes:c	마찬가지로 'nowrap' 상태에서 오른쪽으로 길게 편잡중일때 화면에 가려진 왼쪽 영역에 'c'를 표시
conceal:c	'conceallevel'이 1인경우, 숨김문자(?, Concealed Text)영역에 'c' 표시.
nbsp:c	줄 바꿈 없는 공백(Non-Breakable Space)를 'c'로 표시

위 설정들 중 몇몇을 복합적으로 설정하려면 다음과 같은 방법으로 설정합니다.

:set lcs=tab:>-,trail:-
:set lcs=tab:>-,eol:<,nbsp:%
:set lcs=extends:>,precedes:<

기존의 lcs 속성에 새로운 속성을 추가하려면 다음과 같이 입력하면 됩니다.

:set lcs+=nbsp:_

색을 다르게..

탭이나 줄바꿈 기호가 들어간 뒤로 코드가 더 지저분해진 경우 다음의 명령으로, 해당 기호의 색을 배경색과 비슷하게 수정할 수 있습니다.

hi NonText ctermfg=7 guifg=gray
hi SpecialKey ctermfg=7 guifg=gray

"eol", "extends" 그리고 "precedes"는 NonText으로 "nbsp", "tab" 그리고 "trail"은 SpecialKey로 화면 표시 전/배경 색을 수정해 주면 됩니다.

최종 모습

CoffeeScript, CoffeeScript 가 바로 생각나지 않는 JavaScript 코드들.

sangpire — Sat, 10 Dec 2011 10:00:58 +0900

"setTimeout" on JavaScript.

setTimeout 은 자바스크립트에서 자주 쓰이는 평범한 함수의 형태입니다.

setTimeout(function(){
	eat('food');
}, 6000);

CoffeeScript 코드로 바꾸려면 어떻게 해야 할까요?

"setTimeout" on CoffeeScript.

저는 이렇게 작성했습니다. 바로 생각이 나지 않더군요.

setTimeout ()->
    eat 'food'
  , 6000

"assert.response" on JavaScript

JavaScript TDD 프레임웍인 expresso에서 assert.response 는 이렇게 생겼습니다.

assert.response(server, {
		url: '/foo',
		method: 'POST',
		data: 'bar baz'
	}, {
		body: '/foo bar baz',
		status: 200
	}, function(res){
	// All done, do some more tests if needed
	});

커피 스크립트로, 어떻게 작성해야 할까요?

"assert.response" on CoffeeScript

많은 변종을 거쳐서 다음과 같은 코드가 작성되었습니다. 테스트 링크

assert.response server
  , 
    url: '/foo'
    method: 'POST'
    data: 'bar baz'
  ,
    body: '/foo bar baz'
    status: 200
  ,
    (res) ->
      # All done, do some more tests if needed

뭘 기억하고 싶은 거냐면...

CoffeeScript 코드를 작성하다 자주 오류가 나는 부분을 정리해 놓은 것입니다.

Ruby, accessors 란?

sangpire — Thu, 01 Dec 2011 07:51:44 +0900

Ruby, accessorsThe Day of Code

attr_reader, attr_accessor 는 뭘까요?

흥미만 잔뜩 있던, Ruby에 대해서 알고 싶기도 하고, 리팩터링 책도 읽지 못해본 상태라, 두마리 토끼를 잡아보려, "리팩토링:루비 에디션" 을 읽고 있습니다.

그런데 첫 코드에서 막혀 버렸습니다.

나머지는 대충 알겠는데, attr_reader, attr_accessor 요녀석들은 뭘까요?

class Movie
  REGULAR = 0
  NEW_RELEASE =1
  CHILDRENS =2
  
  attr_reader :title
  attr_accessor :price_code
  
  def initialize(title, price_code)
    @title, @price_code = title, price_code
  end
end

Accessors

Yukihiro Matsumoto 님의 Ruby User’s Guide에 쉽게 설명이 있네요.

Shortcut	Effect
attr_reader :v	def v; @v; end
attr_writer :v	def v=(value); @v=value; end
attr_accessor :v	attr_reader :v; attr_writer :v
attr_accessor :v, :w	attr_accessor :v; attr_accessor :w

CommonJS 두번째 살펴보기.

sangpire — Thu, 10 Nov 2011 00:37:59 +0900

CommonJS 는 JavaScript API를 정의하는 단체(=Group)이다.

자바스크립트는 빠르고 강력한 언어가 되었지만, 현재의 표준 JavaScript 스팩은 브라우져 환경을 벗어날 수 있는 API를 제공해 주지 못하고 있다.

CommonJS 는 JavaScript가 갖지 못한 API,
즉, Java 나 Ruby, Python이 갖고 있는 Standard Library API와 같은 API를 추가로 정의해서,
JavaScript를 범용 언어와 같이 만들고자 하는 것이다.

CommonJS 에서 가장 먼저 완성한 스팩은 Modules/1.0 이다.

(대부분이 말하는 CommonJS 를 따른다. 혹은 CommonJS 이다 라는 표현은, 이 CommonJS 모듈 스팩을 준수하고 있다 라는 뜻이다.)

Kris Kowal 님이 만드신, "CommonJS: JavaScript Everywhere" 라는 슬라이드 자료

CommonJS: JavaScript Everywhere

View more presentations from kriskowal

매우 간단하게 요약하자면,...

Slide 5, 슬라이드에 초반에 Python 코드가 등장,
Slide 6, JavaScript 로 Python 코드와 같은 코드를 작성할 수 있지만, 그 모든 방법은 표준이 아니다.
Slide 7, 특히, 모듈, 파일 시스템, 웹 서버 게이트 웨이(?), 바이너리 데이터 등등이 표준에 없다.
(ECMAScript의 브라우져 관련 API는 표준으로 있는데,...)
Slide 8, CommonJS에서 표준화를 하자!
Slide 11, CommonJS는 API 이다.
Slide 16 ~ 49, CommonJS 표준엔 Modules 1.1 부터.. Packages 까지 정의가 되어 있다.
Slide 52 ~ 53, (CommonJS API를 이용해서) 처음 등장한 Python 코드와 같은 역활을 하는 JavaScript 코드로 작성!!

CommonJS에서 표준화 작업중인 내용들

현재(2011.11.18), 아래와 같은 내용(=CommonJS 위키 페이지에서 확인 가능)들이 토론되어지고 있는 중이다.

Uniform Baseline / 글로벌 (discussion) - 여러 JS 엔진에서 동일하게 동작하도록 하기위한 토론.
모듈 (1.1.1)
- binary: 바이너리 데이터 타입 (byte arrays and/or strings) (proposals, discussion, early implementations)
- encodings: 인코딩과 문자열 (proposals, discussion, early implementations) -
- io: I/O 스트림 (proposals, discussion)
- fs, fs-base: 파일 시스템 (proposals, discussion, early implementations)
- system: 시스템 인터페이스 (stdin, stdout, stderr, &c) (1.0, amendments proposed)
- assert, test: 단위 테스트 (1.0, amendment proposals pending)
- sockets: 소켓 I/O TCP/IP 소켓 (early proposals)
- event-queue: 리액터(=Reactor, 이벤트 발생자)/이벤트 큐 (early proposals)
- worker: 워커(Worker) (공유하지 않는 동시(=concurrent) 프로세스/쓰레드) (proposal)
- console: 콘솔(=console) (proposal)
패키지 (1.0)
Package Mappings (proposal)
Web Server Gateway Interface (JSGI) (proposals, discussion, early implementations)
Promises (proposal) - 비동기 처리를 위한 스팩

참고 사이트

vim, pathogen 플러그인

sangpire — Wed, 02 Nov 2011 12:48:15 +0900

빔 플러그인 관리를 더 쉽게 해주는, pathogen.vim

빔(Vim) 을 보다 막강하게 쓰기 위해선 적절한 플러그인이 필요하다. 그런데 빔에서 플러그인을 관리하는 일은 생각만큼 쉽지 않다.

특히, 가장 불편한 점은 여러 플러그인을 ~/.vim 폴더(윈도우즈 사용자의 경우, ~/vimfiles 폴더)에 덮어 씌워놓는 점. 그래서 플러그인을 업데이트하는 것은 언제나 어려웠다.

이런 나에게 단비 같은 플러그인이 바로 pathogen.vim이다.

설치

pathogen.vim 의 설치는 매우 간단하다.

~/.vim/autoload 안에 pathogen.vim 파일은 복사한 뒤,
~/.vimrc(윈도우즈의 경우 ~/_vimrc) 에 다음과 같은 코드를 한 줄 추가하면 된다.
```
call pathogen#infect()
```
이제 어떤 플러그인이든 ~/.vim/bundle 에 압축을 풀어 놓으면 각각이 플러그인이 인식된다. 버전 컨트롤 되고 있는 플러그인이라면, 그곳에 체크아웃하면 되는 것이다.

동기화

여러 대에서 Vim을 사용하고 있는 경우, 동기화까지 들어가면 더욱 유용하게 쓸 수 있게 된다.

나의 경우, D:\Dropbox 로 몇몇 설정파일을 동기화 중인데 그곳에 .vim 폴더도 포함되어 있다.

아까 수정했던 _vimrc를 다음과 같이 수정하면,

call pathogen#infect('D:\Dropbox\envs\.vim\bundle')

Dropbox에 있는 설정파일을 자동으로 읽어오게 된다.

더 설치하고 싶은 플러그인은 물론, Dropbox\envs\.vim\bundle 안에 설치하면 된다.

DropBox envs 폴더 구조

참고자료

JavaScript, split과 join으로 구현한, replaceAll 함수

sangpire — Tue, 25 Oct 2011 13:49:25 +0900

Daum 에 사용되고 있는 Jigu 라는 JavaScript 라이브러리 에는 문자를 치환하는 replaceAll 이라는 함수가 존재한다.

해당 함수는 정규 표현 식을 통한 치환 역시 지원하지만,

난 단순히 텍스트를 치환하는 코드를 통해 느낀 바가 커서 이곳에 기록해 두기로 마음 먹었다.

Code

function replaceAll(s, findstr, newstr) {
	 // .. 생략, 이곳에서 정규 표현식 처리 ..
	return s.split(findstr).join(newstr);
}

코드의 내용은 어렵지 않다, 단순히 찾고자 하는 단어를 기준으로 자른 배열을 만들고(split), 새로운 단어를 구분자로 사용하는 문자열을 만들라(join)는 코드이다

이 코드가 훌륭하다고 느끼는 이유는 split, join 모두 Native 함수라는 것. 그리고 그 연산으로 replaceAll을 만들어 낸 것이다.

초기에는 시시콜콜한 것들은 무시하세요.

sangpire — Mon, 24 Oct 2011 14:38:16 +0900

단 하나의 코드 조각이나 한 부분의 디자인 때문에 하루 온 종일을 소비하는 경우가 얼마나 됩니까? 하루동안 열심히 일했지만 실제로 별로 진행된 것이 없다는 것을 깨닫는 경우가 얼마나 자주 있습니까? 이런일은 너무 이른 시점에 세부적인 내용에 집착할 때 생깁니다. 완벽주의자를 위해 준비된 시간은 충분히 있습니다. 그냥 나중에 하면 됩니다.

개발 첫 주에 헤더의 폰트 크기에 대해서 걱정하지 마세요. 둘 째 주에 맘에 딱 드는 녹색을 찾으려고 하지 마세요. 세 째 주에 'Submit'버튼을 3픽셀정도 오른쪽으로 옮기는 일 같은 것은 의미가 없습니다. 페이지에 있는 내용들을 그대로 두고 그냥 사용하면서 잘 동작하는 지만 확인하세요. 모든 것이 명확해지고 나서 조정하고 더 완벽하게 만드세요.

시시콜콜한 세부사항들은 그것을 사용해보고 상세한 개발을 진행해봐야 비로소 분명해집니다. 어떤 부분에 더 관심을 가져야할 지도 알 수 있습니다. 어떤 부분이 누락되었고, 어떤 부분을 보완해야할 지는 실제로 사용해봐야만 알 수 있습니다. 그런 순간이 왔을 때 작업하면 됩니다. 너무 빨리는 하지 마세요.
Getting Real by 37signal

MySQL, 매달 방문하는 사용자를 확인하는 쿼리문.

sangpire — Mon, 24 Oct 2011 13:10:17 +0900

코드

SELECT YEAR(`date`), MONTH(`date`), COUNT(DISTINCT `username`)
FROM `table`
WHERE `date` > '2011-01-01'
GROUP BY MONTH(`date`)

date에 설정된 날짜를 기준으로,
2011년 1월 1일 부터 매달 기록된 데이터의 개수를,
username 필드를 기준으로 중복없이 표시.

결과

용어

COUNT: 필드의 수를 표시.
DISTINCT: 중복되는 필드는 제거.

디터람스의 '좋은 디자인'을 위한 10가지 원칙

sangpire — Sun, 07 Aug 2011 13:54:34 +0900

Good design is innovative

좋은 디자인은 혁신적이다. 현식의 기능성은 결코 고갈되지 않는다. 기술의 발전으로 항상 혁신적인 디자인을 위한 새로운 기회가 제공된다. 혁신적인 디자인은 언제나 새로운 기술과 나란히 발전하기 때문에 그 자체에 끝이란 없다.

Good design makes a product useful

좋은 디자인은 제품을 유용하게 한다. 제품은 필요해서 구입한다. 그 필요성의 기준은 몇가지가 있다.

제품은 기능적으로 뿐만아니라 심리적으로나 시각적으로 만족을 주어야 한다. 좋은 디자은은 제품의 필요성을 강조하며, 따라서 필요성에 방해되는 모든 것을 무시한다.

Good design is aesthetic

좋은 디자인은 아름답다. 제품의 시각적 만족감은 필요성의 일부다. 왜냐하면 우리가 매일 사용하는 제품은 우리 자신과 우리 삷의 질에 영향을 주기 때문이다. 제대로 작업된 대상만이 아름답다.

Good design makes a product understandable

좋은 디자인은 제품을 이해하기 쉽도록 한다. 좋은 디자인은 제품의 구조를 명료하게 보여준다.

제품이 스스로 말하도록 하면 더 좋다. 가장 좋은 것은 스스로 설명하게 만드는 것이다.

Good design is honest

좋은 디자인은 정직하다. 좋은 디자인은 제품을 실제보다 더 혁신적이고, 더 강력하고, 더 가치있게 보이도록 하지 않는다. 지킬 수 없는 약속으로 구매자를 속이려 하지 않는다.

Good design is unobtrusive

좋은 디자인은 불필요한 관심을 끌지 않는다. 어떤 목적을 달성한 제품은 연장과도 같다. 그것은 장식물도 아니고 예술작룸도 아니다. 따라서 제품의 디자인은 사용자의 자기 표현이 가능한 여백을 남겨두기 위해서 중립적이고 절제되어야 한다.

Good design is long-lasting

좋은 디자인은 오래 지속된다. 좋은 디자인은 유행을 쫓지 않으며, 그렇기 때문에 절대로 구식이 되지 않는다. 유행을 쫓는 디자인과 달리 좋은 디자인은 오래 지속된다. 요즘같이 쉽게 쓰고 버리는 시대에도 그렇다.

Good design is thorough down to the last detail

좋은 디자인은 마지막 디테일까지 철저하다. 어떤 것도 임의로 혹은 우연히 만들어지지 않는다. 디자인 과정에서의 배려와 정확성은 구매자에 대한 존중을 보여준다.

Good design is environmentally friendly

좋은 디자인은 환경 친화적이다. 좋은 디자인은 환경보존에 중요한 공헌을 한다. 자원을 보존하고, 제품의 일생을 통해 발생할 수 있는 물리적, 시각적 공해를 최소화한다.

Good design is as little design as possible

좋은 디자인은 할 수 있는 한 최소한으로 디자인한다. 더 적은 게 더 낫다. 좋은 디자인은 존질적인 것에 집중한다. 따라서 제품은 불필요 짐을 지지 않는다. 순수함, 단순함으로 되돌아가자!

대림 미술관에서 있던던, Less and More, The Design Ethos of Dieter Rams 전에 다녀온뒤,...

당시 브라운은 현재 애플과도 같은 디자인이 멋진 회사였던것 같다. 그 말은 현재의 애플도 언제 그랬냐는 듯 평범한 회사가 될어 버릴 수 있다는 말이겠지...