idiomatic.js (자바스크립트 코딩 일관성을 위한 가이드라인) 한글문서 소개

engfordev.com 에서, 누구나 참여하는 개방형(?) 공동번역을 진행하고 있어요.

이번에는 idiomatic.js -자연스럽고 일관성 있게 자바스크립트 코딩하는 원칙- 을 번역했고요.

JavaScript 를 공부하고 계시거나, 관심있으신 학생이나 개발자에게 도움이 될 것 같습니다. 혹시 JavaScript 를 이용해서 프로젝트를 진행하거나, 협업하는 경우에 한번 고려해볼 만 하기도 하고요. (물론 이 문서에 나온 그대로 따르기 보다는 적절하게 일관성을 갖춰 하는게 포인트겠지만요)

원문 링크 (English) : https://github.com/rwldrn/idiomatic.js/ – Principles of Writing Consistent, Idiomatic JavaScript

한글 링크 (Korean) : https://github.com/EngForDev/idiomatic.js/tree/ko/translations/ko_KR – 자연스럽고 일관성 있게 자바스크립트 코딩하는 원칙

한글 번역에 참여해 주신, engfordev 의, 홍환민(Hwan Min Hong) / 권민택(MinTaek Kwon) @leoinsight / 심태원(Tw Shim)@marocchino, github / 김나솔(Nassol Kim) @nassol99, github / 심민규 / 원강민 / 유정협 /이대엽 님 감사합니다.

engfordev 에서의 작업에 대한 정리글은 요기 ( http://opentutorials.org/course/167/1363 ) 에 있습니다.

 

Mac OS X Lion 10.7.3 에서 ruby 1.9.3 설치 삽질기

OS 환경은 Mac OS X Lion 10.7.3
참고로 xcode 4.3 버전이 설치되어 있다. ( 커맨드라인툴까지 설치한 상태 )

Github 에서 블로그를 할 수 있게 해주는 옥토프레스 (Octopress) 를 설치해 볼 요령으로, 루비를 설치하려는데 잘 안되고 에러가 나서, 실패경험을 포스팅 해둔다.

처음 발생했던 에러 :

rvm requires autoreconf to install the selected ruby interpreter however autoreconf was not found in the PATH

autoreconf 를 못찾겠다는건데, 알고보니 애플에서는 더이상 제공을 하지 않는 듯 하다. 나랑 비슷한 에러가 발생한 블로그 글(http://brianpeddle.com/2012/03/10/setting-up-ruby-on-rails-issues/)을 통해 정보를 얻었다.

간단하게 OS X 10.7 용 gcc installer 를 설치하면 된다.
https://github.com/kennethreitz/osx-gcc-installer/downloads

근데 문제는 여기서 끝나지 않았다.

두번째 에러 발생 :

Error running ‘patch -F 25 -p1 -N -f <“/Users/rkjun/.rvm/patches/ruby/1.9.3/p125/xcode-debugopt-fix-r34840.diff”‘, please read /Users/rkjun/.rvm/log/ruby-1.9.3-p125/patch.apply.xcode-debugopt-fix-r34840.log
ruby-1.9.3-p125 – #autoreconf
ruby-1.9.3-p125 – #configuring
ruby-1.9.3-p125 – #compiling
Error running ‘make ‘, please read /Users/rkjun/.rvm/log/ruby-1.9.3-p125/make.log

사실 이 문제도, OS X 10.7용 gcc-installer 를 다운로드(링크는 요기)해서 설치하고 나면 해결이 되는 문제였는데, 아마도 설치후 재부팅을 하지 않아 오류가 발생했던 것 같다. -_-; 오늘 집에 와서,
rvm install 1.9.3 명령을 실행하니 잘 설치된다. 혹시 루비1.9.3 설치가 안되는 경우에는, non-llvm gcc 를 사용하기 위한, –with-gcc=clang 을 주고 설치해야 한다고 한다.

일단 이것으로 루비 설치는 완료했다.

.profile 에는 다음 코드를 추가해 놓자. (rkjun 은 user name 이다)

“/Users/rkjun/.rvm/scripts/rvm” ]] && source “/Users/rkjun/.rvm/scripts/rvm”
rvm use 1.9.3 –default

명시적으로 1.9.3 을 사용하겠다고 하지 않는 한, 여전히 맥에 기본내장된 1.8 버전대가 사용된다. -_-; 터미널을 재실행하고, 버전 확인.

~ rkjun$ ruby –version
ruby 1.9.3p125 (2012-02-16 revision 34643) [x86_64-darwin11.3.0]

이로써, 루비설치는 완료했고, 이제 옥토프레스(Octopress) 를 설치할 차례.

우선, bundler 설치는 잘 된다.

~ rkjun$ gem install bundler 

그 담에 다시 또 문제에 봉착.

~ rkjun$ bundle install

번들 설치중에 에러가 발생했다. -_-;

Installing rb-fsevent (0.4.3.1) with native extensions Unfortunately, a fatal error has occurred. Please report this error to the Bundler issue tracker at https://github.com/carlhuda/bundler/issues so that we can fix it. Thanks!
/Users/rkjun/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/site_ruby/1.9.1/rubygems/installer.rb:552:in `rescue in block in build_extensions’: ERROR: Failed to build gem native extension. (Gem::Installer::ExtensionBuildError)

/Users/rkjun/.rvm/rubies/ruby-1.9.3-p125/bin/ruby extconf.rb
creating Makefile
CFLAGS=’-isysroot /Developer/SDKs/MacOSX10.7.sdk -mmacosx-version-min=10.7 -mdynamic-no-pic -std=gnu99 -Os -pipe -Wmissing-prototypes -Wreturn-type -Wmissing-braces -Wparentheses -Wswitch -Wunused-function -Wunused-label -Wunused-parameter -Wunused-variable -Wunused-value -Wuninitialized -Wunknown-pragmas -Wshadow -Wfour-char-constants -Wsign-compare -Wnewline-eof -Wconversion -Wshorten-64-to-32 -Wglobal-constructors -pedantic’ /usr/bin/clang -isysroot /Developer/SDKs/MacOSX10.7.sdk -mmacosx-version-min=10.7 -mdynamic-no-pic -std=gnu99 -dead_strip -framework CoreServices -o ‘/Users/rkjun/.rvm/gems/ruby-1.9.3-p125/gems/rb-fsevent-0.4.3.1/bin/fsevent_watch’ fsevent/fsevent_watch.c
fsevent/fsevent_watch.c:1:10: fatal error: ‘stdio.h’ file not found
#include <stdio.h>
^
1 error generated.
extconf.rb:59:in `<main>’: Compilation of fsevent_watch failed (see README) (RuntimeError)

덜덜덜.  stdio.h 파일이 없다니 -_-;
암튼, 이것도 간신히 해결했다.

방법은 간단했다.

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/

요거 한방이면 된다. (출처는 요기-Octopress issue 320)

10분만에 설치될 줄 알았던 걸, 이틀 삽질끝에 간신히 설치했다. -_-;

p.s  옥토프레스(octopress) 를 사용하기 위해선, ruby 1.9.2 를 설치해야 한다. (설치방법은 1.9.3 버전과 동일하므로 생략^^)

아무도 프로그래밍 자체를 배우고 싶어하지는 않아요! – engfordev 번역

개발자를 위한 영어 (engfordev) 팀에서 공동번역을 진행하고 있습니다. 누구나, 얼마든지 참여할 수 있고, 많은 부분 참여하지 않아도 되고, 내가 원하는 부분만 참여해도 되고요. 영어공부에 대한 자발적인 동기로 참여하고 있습니다.

최근에 번역완료된 글을 소개합니다.

번역에 참여하신 분들 @rkJun , @xinuguru , nassol , m , sunheehwang821

한국어로 번역된 글 : 아무도 프로그래밍 자체를 배우고 싶어하지 않아요.  (Google Docs)

영어 원문 : Nobody Wants to Learn How to Program (The “Invent with Python” Blog)

EngForDev.com 의 관련 번역 정보 링크는 여기에.

일부 번역된 글을 인용해 보자면,

당신은 초보 프로그래머의 학습 주제로 다음과 같은 것들을 이야기하겠지요. 이를테면 재귀, 정규식 표현, MVC, 네트워킹, 파일 입출력 같은 것들이요. 하지만 이러한 것들은 그들이 스스로의 프로그램을 몇 가지 만들고 난, 훨씬 훨씬 나중에 가르쳐도 됩니다.

만약 당신이 프로그래밍을 가르친다면, 각 줄의 끝에서 세미콜론을 찍는걸 기억해야 한다는걸 재미있다고 느낄 사람은 아무도 없다는걸 기억하셔야 해요. 아무도 프로그래밍을 배우고 싶지 않아요. 그들은 단지 프로그램을 만드는 방법을 배우고 싶어할 뿐이죠.

프로그래밍을 가르치는 것, 배우는 것과 관련해 한번쯤 생각해볼 만한 글입니다.

2012.3.22 추가합니다.
engfordev blog 에도 번역 글이 올라와 있습니다. 더 읽기가 편할 거에요.^^

basket.js – LocalStorage 에 script 캐싱/로딩해주는 자바스크립트

HTML5 에서 제공하는 웹 저장 기술중 하나인 localStorage 를 사용하여, 자바스크립트를 캐싱하고, 로딩해주는 자바스크립트로 basket.js 라는 간단하지만 (개념 증명정도의) 흥미로운 자바스크립트 오픈소스.

먼저 localStorage 를 간단히 언급하자면, HTML5 에서 추가된 저장기술 중 하나인데 브라우저마다 차이는 있지만 대략 5MB ?? 정도 제공을 해 주고요.  구글크롬을 쓰신다면 CTRL+SHIFT+I (도구-개발자도구) 에서 Resources 란에 보면 Databases 와 Session Storage 사이에, Local Storage 항목이 존재합니다. 그 영역에 저장되는 거죠.

자바스크립트 콘솔에서 직접 localStorage 를 접근해 보면, 아래 처럼 작동하구요.
> localStorage.setItem(“Name”, “rkJun”)
> localStorage.getItem(“Name”)
“rkJun”

basket.js 는 LocalStorage 를 활용하여, jQuery 같은 자바스크립트 라이브러리를 통째로 LocalStorage 영역에 저장하고 호출해서 이용하도록 자바스크립트로 구현해 놨습니다. 물론, 당연히 성능의 극대화를 끌어올리기 위해서구요. (시작은 트위터 -영문- 에서…) basket.js 소개페이지에는 jQuery , backboneJs, underScoreJs 를 담아놨습니다.
사용법은 간단합니다.

basket.require(‘js파일경로’) : 호출 (해당 js파일이 있는지 체크해서 localStorage 에 있으면 무시, 없으면 ajax 방식으로 가져와 localStorage 에 넣습니다. )

basket.remove(‘js파일경로’) : localStorage 에 제거
basket.add(‘js파일경로’) : localStorage 에 추가

물론 체인방식도 제공하고요.
basket.require(‘jquery.js’).require(‘underscore.js’).require(‘backbone.js’);

basket.require(‘jquery.js’).wait().require(‘jquery.plugin.js’)  를 통해, jquery.js 호출이 끝나고 나서 다음을 실행하도록 wait() 를 걸 수도 있습니다. jQuery plugin 을 실행하기 전에 jQuery 가 먼저 호출이 돼 있어야 하니까요.

다만, 이  basket.js 에서 캐싱을 위해 선택한 localStorage 가 고민끝에 선택한 건 아니라고 언급해 두며,  WE NEED TO KILL OFF THE LOCALSTORAGE API 라는 글도 링크걸려 있구요. (대략 localStorage 는 형편없고 후지다. IndexedDB 만이 대안이다 라고···.)

암튼 basket.js 의 성능 실험 자체가 꽤 흥미로워서, 소개해 봤습니다.

HTTP Header 속에 숨겨진 재밌는 wordpress 구인정보

최근 우연히 curl (http://curl.haxx.se/) 이란 명령어를 알게 됐습니다.

일종의 커맨드라인 기반 웹 요청도구인데, 간단하게 웹 페이지 헤더정보도 볼 수 있고, 여러모로 쓸모가 많은 것 같습니다. curl 사용법에 대한 얘기를 하고자 하는 건 아니니, curl 명령에 대한 자세한 사용법은 이 링크(http://mwmw7.tistory.com/56) 를 참조하면 좋을 듯 하고요.

curl 명령어를 제 블로그 URL 로 실행해 봤는데, 재밌는 결과가 나와서, 같이 공유해 봅니다.

curl 명령에 헤더정보만 나오도록 -I 옵션을 붙여,제 블로그 URL 로 실행했습니다.

~ rkJun$ curl -I https://rkjun.wordpress.com

실행결과입니다.

HTTP/1.1 200 OK
Server: nginx
Date: Fri, 02 Mar 2012 16:39:24 GMT
Content-Type: text/html; charset=UTF-8
Connection: close
Vary: Accept-Encoding
Vary: Cookie
X-hacker: If you're reading this, you should visit automattic.com/jobs and apply to join the fun, mention this header.
X-Pingback: https://rkjun.wordpress.com/xmlrpc.php
Link: <http://wp.me/2cLlv>; rel=shortlink
Last-Modified: Fri, 02 Mar 2012 16:39:24 +0000
Cache-Control: max-age=300, must-revalidate
X-nananana: Batcache

위에서 주목할 만한 곳은 중간에 X-hacker 부분입니다.
이 부분이 보이면, 우리회사 (워드프레스)에 지원하라는 거죠. 덧붙여서 “나 이 헤더 봤다”고 얘기하라고.

꽤 재밌는 구인방법이 아닐까 싶습니다. 이런데다 몰래 이런 걸 심어두고 말이죠ㅋ
(그냥 페이지 소스보기 같은 걸로는 안나오거든요 -_-)

워드프레스에 블로그를 개설한 지는 얼마 안됐지만, markdown 기능이 되지 않아, 좀 아쉬워서 차라리 Jekyll 이나, Octopress 로 Github 에 블로그를 운영할까 살짝 고민하던 찰라였는데, 워드프레스가 꽤 맘에 들어졌습니다.

고로, 한동안은 워드프레스에서 쭈욱, 블로깅 할 것 같습니다.

구글링 해 보니, 또다른 명령어(lwp-request) 로 똑같이 header 정보를 취해서 xhacker 가 보인다고, 벌써 2008년에 포스팅된 글이 있기는 하네요 :

http://www.simplicidade.org/notes/archives/2008/05/xhacker.html

~ rkJun$ lwp-request -U -s -S -e  -m HEAD http://www.wordpress.com/

실행결과 보이는 Head 정보는 curl 과 (거의) 같습니다.
그리고 꽤 공감되는 한마디를 적어놨네요.

Nice way to do job hunting.

암튼, 개인적으로는 꽤 흥미로웠네요.