이상한모임 슬랙 #dev-frontend 채널에서 Lodash에 대해 이야기하다 지연 평가(Lazy Evaluation)를 지원한다는 이야기를 듣고 검색하게 되었다. 검색 결과로 찾은, Filip Zawada의 How to Speed Up Lo-Dash ×100? Introducing Lazy Evaluation 포스트를 번역한 글이다.

지연평가는 필요할 때만 수행하는 평가 방식으로 함수형 프로그래밍에서는 널리 사용되는 방법이다. 이 글은 lodash 뿐만 아니라 지연평가가 어떤 방식으로 접근하고 동작하는가에 대해 쉽게 설명하고 있다.


Lo-Dash와 같은 라이브러리는 더이상 빨라질 수 없을 정도로 충분히 빠르다고 항상 생각했다. Lo-Dash는 자바스크립트를 짜내다시피 해 다양한 기술을 완벽하게 잘 섞었다. 이 라이브러리는 JavaScript의 가장 빠른 문장, 적응형 알고리즘을 위해 사용하며 때로는 부수적으로 발생하는 예기치 못한 재귀를 피하기 위해 성능을 측정할 때에도 사용한다.

지연 평가 Lazy Evaluation

하지만 내가 잘못 생각했다. Lodash는 획기적으로 빨라지는 것이 가능했다. 이 일에 필요한 것은 미세한 최적화에 대한 생각을 멈추고 올바른 알고리즘을 사용하고 있는지 살피는 것으로 시작해야 한다. 예를 들면, 일반적인 반복문에서 반복에 걸리는 단위 시간을 최적화하려 한다:

var len = getLength();
for(var i = 0; i < len; i++) {
    operation(); // <- 10ms - 어떻게 9ms로 만들 수 있을까?!
}

이런 경우는 대부분 어렵고 매우 제한적이다. 때로는 getLength()를 최적화 하는 것이 더 의미있다. 이 함수가 반환하는 값이 작을수록, 10ms 주기는 짧아진다.

다음 코드는 간략하게 작성한 Lodash에서 지연평가를 하는 방식이다. 이 방법은 주기의 횟수를 줄이는 것이지 주기에 걸리는 시간을 줄이는 것이 아니다. 다음 예를 고려해보자:

function priceLt(x) {
   return function(item) { return item.price < x; };
}
var gems = [
   { name: 'Sunstone', price: 4 }, { name: 'Amethyst', price: 15 },
   { name: 'Prehnite', price: 20}, { name: 'Sugilite', price: 7  },
   { name: 'Diopside', price: 3 }, { name: 'Feldspar', price: 13 },
   { name: 'Dioptase', price: 2 }, { name: 'Sapphire', price: 20 }
];

var chosen = _(gems).filter(priceLt(10)).take(3).value();

$10보다 작은 가격의 보석 3개를 고르려고 한다. 일반적인 Lodash 접근인 엄격한 평가에서는 8개의 보석을 모두 걸러낸 후 앞 3개를 골라낸다:

Lodash naïve approach

충분히 쿨하지 않다. 이 방식은 8개의 모든 요소를 처리하지만 사실 필요로 하는 것은 그 중 5개 뿐이다. 지연 평가 알고리즘에서는 이 방식과 대조적으로, 배열에서 적은 숫자의 요소를 가져와 올바른 결과를 얻는다. 다음을 살펴보자:

Lo-Dash regular approach

이 방식으로 쉽게 37.5% 성능 향상을 만들었다. 이는 단순한 예시이며 사실 1000+배 성능 향상이 있는 예도 들 수 있다. 다음을 보자:

var phoneNumbers = [5554445555, 1424445656, 5554443333, … ×99,999];

// "55"가 포함된 전화번호 100개를 획득
function contains55(str) {
    return str.contains("55");
};

var r = _(phoneNumbers).map(String).filter(contains55).take(100);

이 예제에서 99,999개의 요소를 검사하게 되는데, 이 모두를 다 실행하지 않고 예를 들어 1,000개의 요소만 검사해도 결과를 얻을 수 있게 된다. 벤치마크에서 이 엄청난 성능 향상을 확인할 수 있다:

benchmark

파이프라이닝

지연 평가에 또 다른 잇점이 있는데 “파이프라이닝” 이라고 부른다. 이 아이디어는 체인으로 실행되는 동안 값이 전달되기 위해 배열이 생성되는 경우를 회피한다는 점이다. 모든 동작은 하나의 요소에 한번에 실행되야 한다. 다음 코드를 보면:

var result = _(source).map(func1).map(func2).map(func3).value();

간단하게 Lo-Dash가 어떻게 해석하는지 작성하면 다음과 같다. (엄격한 평가)

var result = [], temp1 = [], temp2 = [], temp3 = [];

for(var i = 0; i < source.length; i++) {
   temp1[i] = func1(source[i]);
}

for(i = 0; i < source.length; i++) {
   temp2[i] = func2(temp1[i]);
}

for(i = 0; i < source.length; i++) {
   temp3[i] = func3(temp2[i]);
}
result = temp3;

반면 지연 평가에서는 다음과 같이 실행된다:

var result = [];
for(var i = 0; i < source.length; i++) {
   result[i] = func3(func2(func1(source[i])));
}

임시 배열이 존재하지 않는다는 점은 극적인 성능 향상을 가져온다. 특히 배열이 크고 메모리 접근이 비싼 경우에서는 말이다.

유예 실행 Deferred execution

지연 평가가 가져온 또 다른 잇점은 유예 실행이다. 체인을 만들게 되면 언제나 .value()를 명시적으로나 암시적으로 호출하기 전까지는 연산되지 않는다. 이 접근은 쿼리를 먼저 준비하게 하고 나중에 실행하게 해 가장 최신의 데이터를 얻게 된다.

var wallet = _(assets).filter(ownedBy('me'))
                      .pluck('value')
                      .reduce(sum);

$json.get("/new/assets").success(function(data) {
    assets.push.apply(assets, data); // update assets
    wallet.value(); // returns most up-to-date value
});

이와 같은 방식은 몇가지 경우에서 또한 속도 향상을 가져온다. 실행 속도가 중요한 경우에 복잡한 쿼리를 일찍 만든 후 나중에 실행할 수 있게 된다.

정리

지연 평가는 새로운 아이디어가 아니다. 이미 LINQ, Lazy.js 등 여러 뛰어난 라이브러리에서 사용하고 있다. 내가 믿기에 Lo-Dash가 만든 큰 차이는 Underscore API를 그대로 유지하면서도 새롭고 강력한 내부의 엔진을 얻게 되었다는 사실이다. 새로운 라이브러리를 배울 필요도, 작성한 코드를 크게 변경할 필요도 없이 라이브러리를 업그레이드하면 된다.

Lo-Dash를 사용하지 않더라도 이 글이 영감을 줬기를 바란다. 자신의 어플리케이션에서 병목을 찾아 jsperf.com의 try/fail 스타일의 최적화는 그만 할 때도 되었다. 대신 나가서 커피를 마시며 알고리즘에 대해 생각해야 할 때다. 창의성이 중요하지만 알고리즘 개론와 같은 좋은 책으로 배경지식을 다지는 것도 좋다. 행운을 빈다!


번역에 피드백 주신 Heejoon Lee님 감사드립니다.

이상한모임 슬랙 #dev-frontend 채널에서 함수가 1급 시민이라는 얘기가 나온 적이 있었다. Wikipedia를 읽다가 Partial Application에 대한 이야기가 있어 검색하던 중 John Resig이 작성한 Partial Application in JavaScript를 읽게 되었다. 2008년 글이라 요즘 코드와는 조금 다른 부분이 있지만 개념을 잡기에는 충분히 도움이 되는 것 같아 번역했다.


면밀하게 보면, 부분만 사용한 함수는 함수가 실행되기 전에 미리 인자를 지정할 수 있는, 흥미로운 기법이다. 이와 같은 효과로 부분만 반영된 함수는 호출할 수 있는 새로운 함수를 반환한다. 다음 예제를 통해 이해할 수 있다:

String.prototype.csv = String.prototype.split.partial(/,\s*/);
var results = "John, Resig, Boston".csv();
alert( (results[1] == "Resig") + " The text values were split properly." );

위에서는 일반적으로 사용하는 String의 .split() 메소드에 인자로 미리 정규표현식을 저장하는 경우다. 그 결과로 만들어진 새로운 함수 .csv()를 쉼표로 분리된 값을 배열로 변환하는데 사용할 수 있다. 함수 인자를 앞에서부터 필요한 만큼 채우고 새로운 함수를 리턴하는 방식을, 일반적으로 커링(currying)이라 부른다. 간단하게 커링은 어떻게 구현되는지 다음 프로토타입 라이브러리에서 확인할 수 있다:

Function.prototype.curry = function() {
  var fn = this, args = Array.prototype.slice.call(arguments);
  return function() {
    return fn.apply(this, args.concat(
      Array.prototype.slice.call(arguments)));
  };
};

상태를 기억하기 위해 클로저(closure)를 사용한 좋은 케이스다. 이 경우에 미리 입력한 인수(args)를 저장하기 위해서 새로 만들어지는 함수에 전달되었다. 새로운 함수는 인수가 미리 입력되게 되고 새로운 인수도 하나로 합쳐져(concat) 전달된다. 그 결과, 이 메소드는 인수를 미리 입력할 수 있게 되고 활용 가능한 새 함수를 반환하게 된다.

이제 이 스타일의 부분 어플리케이션은 완전 유용하지만 더 좋게 만들 수 있다. 만약 주어진 함수에서 단순히 앞에서부터 인수를 입력할 것이 아니라 비어있는 모든 인수를 채우기 원한다면 어떻게 해야할까. 다음과 같은 형태의 부분 어플리케이션 구현은 다른 언어에도 존재하지만 JS에서는 Oliver Steele가 Function.js 라이브러리에서 시연했다. 다음 구현을 살펴보자:

Function.prototype.partial = function (){
  var fn = this, args = Array.prototype.slice.call(arguments);
  return function(){
    var arg = 0;
    for ( var i = 0; i < args.length && arg < arguments.length; i++)
      if ( args[i] === undefined )
        args[i] = arguments[arg++];
    return fn.apply(this, args);
  }
}

이 구현은 근본적으로 curry() 메소드와 비슷하지만 중요한 차이점이 존재한다. 특히 이 함수가 호출될 때, 미리 입력하고 싶지 않은 인수에 대해 undefined를 입력하는 것으로 나중에 입력하도록 만들 수 있다. 이 방식의 구현은 인수를 병합하는데 더 편리하게 활용할 수 있게 돕는다. 인수를 배정하는 과정에서 비어있는 곳에 적절한 간격으로 처리해 나중에 실행할 때 조각을 맞출 수 있게 만든다.

위에서 문자열 분리 함수를 생성하는데 사용한 예에도 있지만 다른 방식에서 어떻게 새 함수 기능을 활용할 수 있는지 확인하자. 함수를 간단하게 지연해서 실행하도록 하는 함수를 생성할 수 있다.

var delay = setTimeout.partial(undefined, 10);
delay(function(){
  alert( "A call to this function will be temporarily delayed." );
});

delay라는 이름의 새로운 함수를 만들었다. 언제든 함수를 인자로 넣으면 10ms 후에 비동기적으로 실행하게 된다.

이벤트를 연결(binding) 하기 위한, 간단한 함수를 만들 수 있다:

var bindClick = document.body.addEventListener
                  .partial('click', undefined, false);

bindClick(function() {
  alert( "Click event bound via curried function." );
});

이 기법은 라이브러리에서 이벤트를 연결하기 위해 사용하는, 간단한 헬퍼 메소드로 사용할 수 있다. 이 결과로 단순한 API를 제공해 최종 사용자가 불필요한 인수로 인해 번거롭게 되는 경우를 줄이고 단일 함수를 호출하는 횟수를 줄일 수 있다.

클로저를 사용하면 결과적으로 코드에서의 복잡도를 쉽고 간단하게 줄일 수 있어서 JavaScript 함수형 프로그래밍의 강력함을 확인하게 된다.

이상한모임

이상한모임 이름으로 활동한 기간만 2년 여 시간이 흘렀다. 대다수의 커뮤니티 활동은 명확한 목적과 목표를 가지고 모이지만 이상한모임은 개개인이 각자 좋아하는 것이 있다는 이유만으로 모이기에 개개인의 행동집합에 가깝다. 모임이지만 동시에 모임이 아닌 성격이 강해 “우발적인 모임”이며 각각의 목적을 향해 가는 모임이다. 초기에는 각자 자리를 잡고 해시태그 #이상한모임으로 공유하면 각자 위치에 따라 참여하는 정도였지만, 지난 기간을 돌아보면 참 다양한 행사와 프로그램, 크고 작은 많은 일들이 있었다.

아직까지는 커뮤니티의 구성원이 개발자가 많긴 하지만 “이상한모임은 개발자 모임이다”는 틀린 명제다. 초기 구성원에 개발자의 비율이 높았고 개발자는 개발자만 알기 때문에 앞으로도 개발자가 더 많이 가입할 가능성이 많지만 이상한모임은 “이상한 사람에 의한 모임”이다. 이상한 사람은 행동으로 옮기는 사람이다. 관심있는 일이 있으면 찾아봐야 직성이 풀리는 사람이다. 하고 싶은 일을 하지 않으면 온 몸이 근질근질한 사람이다. 전혀 관심사가 다른 사람들이라도 모여서 각자 하고 싶은 일을 이야기하면 공통된 주제가 나오고 한 명, 두 명 일 때보다 할 수 있는 일이 더 많아진다.

그렇게 저지른 이상한 일들이 참 많다. 하루 아침에 팀블로그를 만들어서 함께 글을 공유하기도 하고, 평소에 보기 힘든 사람들을 모아 독특한 주제의 세미나를 진행하고, 만들고 싶은 웹서비스를 공개 리포에서 함께 만들어내기도 하고, 정기/비정기 정모 및 번개를 진행하기도 하고, 관심있는 주제를 스터디하거나 코스 강의를 개설해 함께 듣기도 한다. 요즘은 슬랙을 통해 많은 활동이 진행되고 있는데 얼마나 세세하고 다양한 관심사를 심도있고 깊이 있게 서로 공유하고 있는지 일일이 설명할 수가 없다. (심지어 서로의 관심사에 서로 과제를 던져주는 진풍경도 볼 수 있다. 게다가 다들 그 과제를 한다!) 이렇게 이상한 사람들에 의한 이상한모임이 계속 이뤄지고 있다.

이상한모임 2014년 5월 정모

예전과 달리 한 두 명이 열정만 가지고 시간을 써서 행사를 꾸릴 수 있는 규모가 아니기 때문에 운영진이라는 조직이 생기긴 했지만 여전히 수평적으로 운영되고 있고 누구나 목소리를 내고 참여할 수 있다. 이상한모임의 시작부터 개개인의 모임이었기 때문에 따로 운영진은 필요 없었겠지만 이상한 사람들이 하고 싶어하는 이상한 짓을 돕고 싶고 이 일을 지속적으로 하기 위해서는 커뮤니티의 영속성을 위해 고민할 사람들이 필요해서 모인 것 뿐이다. 이상한 짓을 적극 권장하고, 권장하다 못해 열심히 지원하려고 하는 것은 여기 말고는 없지 않을까. 운영진이 있지만 여전히 이상한모임은 사람들의 아이디어로 꾸려가는 이상한 모임이다. 누구든 참여해서 생각을 공유하고, 하고싶은 일을 얘기하면 관심있는 사람들이 모이고 각자의 관점에서 더 큰 일을 만들어내는 과정은 매력적이다 못해 중독적이다.

이제는 사람들이 많이 모였고 예전에 비해 더 쉽게 일을 저지를 수 있도록 시스템을 갖춰가고 있다. 이상함을 마음 속 깊은 곳에 눌러놓고 숨긴 채 지내는 많은 사람들이 이상한모임에 참여해 아이디어를 발산했으면 한다. 이상한모임은 로켓은 아닌데 UFO는 맞는 것 같다. UFO에 자리가 나면 일단 올라타라!


이상한모임에서 진행하는, 다양한 주제로 함께 글을 쓰는 글쓰기 소모임입니다. 함께 하고 싶다면 #weird-writing 채널로 오세요!

요즘 출퇴근 하는 시간에는 눈도 쉴 겸 팟캐스트를 자주 듣는다. 그 중 Hanselminutes을 애청하고 있는데 Scott Hanselman이 여러 분야 사람들을 인터뷰하는 방식으로 진행되는 팟캐스트다. 이 팟캐스트에서 진행한 Getting started making NodeBots and Wearables 에피소드에서 NodeBots 프로젝트Johnny-Five.io에 대해 알게 되어 살펴보게 되었다.

NodeBots

NodeBots 프로젝트는 말 그대로 JavaScript를 이용해 로봇공학을 배우는 프로젝트로 세계 각지에서 진행되고 있다고 한다. JS를 사용할 수 있는 이점을 살려 쉽고 재미있는 과정을 제공하고 있는데 2015년 7월 25일은 국제 NodeBots의 날로 각 지역별로 프로그램이 진행된다.(멜번에서도!) 아쉽게도 한국에는 아직 오거나이저가 없는 것 같다.

Johnny-Five는

Johnny-Five는 JavaScript 로봇공학 프로그래밍 프레임워크로, 이전 포스트인 ino toolkit으로 Arduino 맛보기에서 C 문법 스타일의 sketch를 사용한 반면 이 프레임워크로 JavaScript를 이용해 제어할 수 있다. 그리고 REPL을 제공하고 있어서 실시간으로 데이터를 확인하거나 nodejs의 다양한 라이브러리도 활용할 수 있다. NodeBots 세션에서는 손쉽게 웹API로 만들어 브라우저를 통해 제어하는 등 이전 환경에서는 만들기 까다로웠던 부분을 재미있게 풀어가는데 활용하고 있다. 게다가 이 프레임워크는 아두이노에만 국한된 것이 아니라 다양한 개발 보드를 지원하고 있는 것도 장점이다.

그 사이 주문한 서보 모터는 도착했는데 서보 실드나 브래드보드가 도착하지 않아서 여전히 LED 깜빡이는 수준이라 아쉽다. 🙁 이 포스트에서는 Raspberry Pi에 Arduino Uno를 연결해서 진행했다.

요구 환경

OSX에서는 Node.js, Xcode, node-gyp가 필요하고 Windows에서는 Node.js, VS Express, Python 2.7, node-gyp가 필요하다.

$ npm install --global node-gyp

요구 사항은 Getting Started 페이지에서 확인할 수 있다.

Firmata 설치하기

Arduino에서 Johnny-Five를 사용하기 위해서는 Firmata를 먼저 설치해야 한다. Firmata는 마이크로 컨트롤러를 소프트웨어로 조작하기 위한 프로토콜인데 펌웨어 형태로 제공되고 있어 arduino에 설치하기만 하면 된다.

Arduino IDE를 사용하고 있다면 아두이노를 연결한 후, File > Examples > Firmata > StandardFirmata 순으로 선택한 후 Upload 버튼을 클릭하면 된다고 한다.

CLI 환경에서 작업하고 있는 경우에는 Firmata 코드를 받아 ino로 빌드 후 업로드할 수 있다. 여기서는 v2.4.3 이지만 Firmata github에서 최신인지 확인하자.

$ wget https://github.com/firmata/arduino/releases/download/v2.4.3/Arduino-1.6.x-Firmata-2.4.3.zip
$ unzip Arduino-1.6.x-Firmata-2.4.3.zip
$ cd ./Firmata/

# StandardFirmata.ino를 복사해서 빌드에 포함시킴
$ cp ./examples/StandardFirmata/StandardFirmata.ino ./src

이 상황에서 바로 빌드하면 에러가 난다. StandardFirmata.ino를 에디터로 열어 다음 코드를 찾는다.

#include <Firmata.h>

그리고 다음처럼 Firmata.h 파일을 폴더 내에서 찾도록 수정한다.

#include "./Firmata.h"

모든 준비가 끝났다. USB로 연결한 후, ino로 빌드와 업로드를 진행한다.

$ ino build
$ ino upload

Firmware를 생성하고 업로드하는 과정을 화면에서 바로 확인할 수 있다. 이제 Johnny-five를 시작하기 위한 준비가 끝났다.

Johnny-five로 LED 깜빡이 만들기

앞서 과정은 좀 복잡했지만 johnny-five를 사용하는건 정말 간단하다. 먼저 nodejs가 설치되어 있어야 한다. 프로젝트를 만들고 johnny-five를 npm으로 설치한다.

$ mkdir helloBlinkWorld
$ cd helloBlinkWorld
$ npm init # 프로젝트 정보를 입력
$ npm install --save johnny-five

설치가 모두 완료되면 blink.js를 생성해 다음 JavaScript 코드를 입력한다.

var five = require("johnny-five"),
    board = new five.Board();

board.on("ready", function () {

  // 13은 보드에 설치된 LED 핀 번호
  var led = new five.Led(13);

  // 500ms으로 깜빡임
  led.blink(500);

});

정말 js다운 코드다. 위 파일을 저장하고 node로 실행하면 보드와 연동되는 것을 확인할 수 있다. (아쉽게도 동영상은 만들지 않았다 🙂 더 재미있는 예제를 기약하며)

$ node blink.js

JavaScript가 다양한 영역에서 사용되고 있다는 사실은 여전히 신기하다. 이 프레임워크도 상당히 세세하게 많이 구현되어 있어서 단순히 JS 로보틱스 입문 이상으로도 충분히 활용할 수 있겠다는 인상을 받았다. 조만간 Tessel 2도 나올 예정인데 이 기기의 js 사랑도 이 라이브러리와 견줄만 할 정도라 많이 기대된다.

지난번 구입한 Raspberry Pi에 이어 이번엔 Arduino가 도착했다. 첫인상으로 비교했을 땐 Raspberry Pi는 똑똑하고 Arduino는 우직한 기분이 든다. 🙂 Arduino는 모든 정보가 오픈소스로 공개되어 있어서 훨씬 다양한 종류의 보드가 존재한다. Arduino가 적혀 있는 공식 보드도 있지만 자체 브랜드가 적혀있거나 아예 아무 내용도 적혀있지 않은, 저렴한 보드도 있다.

Arduino의 모습

ebay를 통해서 5달러로 ATmega328P가 탑재된 아두이노 호환 보드를 구입했다. 이외에도 소켓 브레드보드, ESP8266 WIFI 무선 송수신 모듈, Servo를 위한 모듈을 구입했는데 오늘 보드가 먼저 도착했다. 저항도 구입해야 하는데… 낱개로는 저렴하지만 결국 비싼 취미가 되고 있는 느낌이다.

별도 모듈 없이 보드 자체만 가지고서는 보드에 있는 LED를 껐다 켰다 하는 것이 할 수 있는 전부다. 기본적으로 보드 메모리에 설치되어 나오는 것도 이 LED를 껐다 켰다 하는 _blink_인데 전원을 넣으면 LED가 깜빡이는 것을 확인할 수 있다. 다음 사진에서 빨간 LED는 전원이고 초록색은 조작할 수 있는 LED다.

이 포스트에서는 Raspberry Pi에 Arduino를 USB로 연결해 진행했다. 여기서 사용한 ino 툴킷은 아쉽게도 맥과 리눅스 환경에서만 구동 가능하다. 만약 윈도우 환경이라면 Arduino IDE를 사용하자.

먼저 Raspberry Pi와 Arduino가 서로 통신할 수 있도록 드라이버를 설치한다. sudo를 쓰지 않아도 되는 환경이라면 사용하지 않아도 무관하다.

$ sudo apt-get install arduino

GUI 환경에서는 Arduino IDE를 설치하면 되지만 콘솔에서 작업하고 싶다면 Python으로 작성된 ino 툴킷을 사용하면 된다. 이 라이브러리는 pip 또는 easy_install로 설치할 수 있다.

$ sudo pip install ino

pip가 없다면 다음과 같이 easy_install을 사용할 수 있다. 물론 리포지터리를 받아 setup.py를 실행해도 된다.

$ sudo apt-get install python-setuptools
$ easy_install ino

Arduino의 HelloWorld인 blink 프로젝트를 만들어보자. blink 프로젝트를 템플릿으로 사용해 프로젝트를 초기화한다.

$ mkdir helloWorld
$ cd helloWorld
$ ino init --template blink

lib 디렉토리와 src 디렉토리, 그리고 src/sketch.ino 가 생성된 것을 확인할 수 있다. sketch.ino를 열어보면 blink 템플릿 내용을 확인할 수 있다.

#define LED_PIN 13

void setup()
{
    pinMode(LED_PIN, OUTPUT);
}

void loop()
{
    digitalWrite(LED_PIN, HIGH);
    delay(100);
    digitalWrite(LED_PIN, LOW);
    delay(900);
}

이제 이 코드를 빌드해서 arudino에 올려보자. ino buildino upload로 간단하게 빌드, 업로드 할 수 있다.

$ ino build

위 명령어를 입력하면 빌드 과정을 보여준다. firmware.hex가 변환되고 업로드 할 준비가 완료된다. 이제 업로드를 진행한다.

$ ino upload

업로드가 진행되고 arduino에 있는 LED가 위에서 입력한, 새로운 패턴으로 깜박이게 된다.


아직 다양한 모듈이 없어서 맛보기만 했지만 LED 깜빡이는 것만 봐도 신기하다. 조만간 다른 모듈이 오면 더 재미있는 Thing을 만들 생각에 기대된다.

Client-side에서 패키지 관리를 위해서 bower를 자주 사용하는 편인데 bower는 module loader가 아니라 정말 말 그대로 패키지만 받아서 bower_components 에 넣어주는 정도의 역할만 하기 때문에 부수적인 작업이 많이 필요한 편이다. jspm은 module loader인 SystemJS를 기반으로 모듈을 불러온다. Traceur이나 Babel도 쉽게 적용할 수 있어 ES6 기준으로 개발하는데 편리하다.

jspm-cli를 먼저 설치한다.

$ npm install --global jspm/jspm-cli

프로젝트 폴더에서 jspm init로 프로젝트를 초기화 한다. 초기화 과정에서 프롬프트로 기본적인 사항들을 입력 받는데 ES6를 위해 어떤 transpiler를 사용할지 정할 수 있다. 여기서 설정한 모든 내용은 package.json에 저장되며 SystemJS를 위한 config.js 파일도 자동으로 생성된다.

$ jspm init

jspm으로 npm과 github에 있는 라이브러리를 쉽게 설치할 수 있다. (jspm install registry:package@version) 또한 alias로 등록되어 있는 라이브러리는 registry를 입력하지 않고도 설치할 수 있다. 그 목록은 registry 리포지터리에서 확인할 수 있다.

$ jspm install github:github/fetch
$ jspm install fetch

위에는 github의 fetch 구현을 사용했지만 whatwg-fetch를 사용할 수도 있다. 패키지를 사용할 때 패키지명을 다음과 같이 맵핑해서 사용할 수 있다. 다시 말하면 fetch에 맵핑하면 import "whatwg-fetch" 대신 import "fetch"로 불러오는 것이 가능하다.

$ jspm install fetch=npm:whatwg-fetch

다음 코드대로 index.html을 작성한다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('app/main'); // 진입점이 되는 js 경로
    </script>
</head>
<body></body>
</html>

app/main.js를 작성한다. github에서 haruair의 리포지터리 갯수를 구해 console.log로 출력한다.

import 'fetch'

fetch('https://api.github.com/users/haruair/repos')
  .then(response => response.json())
  .then(repos => console.log(repos.length))

이제 결과를 확인해보자. php -S localhost:8000 또는 python -m SimpleHTTPServer 8000으로 간단하게 서버를 띄워 console을 확인한다.

jspm의 장점은 js 뿐만 아니라 css와 같은 파일도 import 할 수 있어 컴포넌트 형태로 개발하기 쉽다. Webpack에서도 각 확장별로 loader를 지정해주면 알아서 처리해주지만 jspm은 설정 파일을 조작할 필요 없이 단순히 jspm의 systemjs/plugin-css만 설치하면 되는 편리함이 있다.

$ jspm install css

app/style.css를 간단하게 추가해서 확인해보자.

body {
  background: #0dd0dd;
}

방금 작성한 css 파일을 js에서 import 하는 것이 가능하다. 다음 코드를 app/main.js에 추가하면 페이지에서 css를 불러오는 것을 확인할 수 있다.

import './style.css!'

css 외에도 less도 가능하다. sass는 아직 systemJS을 지원하는 플러그인이 없는 것으로 보인다.

패키지 묶기 (bundle)

jspm은 bundle도 지원한다. 간단하게 jspm bundle 명령어로 묶을 수 있고 app/main과 같이 진입점을 사용하고 있는 경우 jspm bundle-sfx app/main -o <outfile> 식으로 묶을 수 있다.

Jack Franklin의 London React Meetup, ES6 Modules & React with SystemJS에서는 uglifyjs와 html-dist 패키지를 함께 활용해 다음과 같은 Makefile을 만들어 make build로 묶을 수 있도록 만들었다.

먼저 uglifyjs와 html-dist를 npm으로 설치해야 한다.

$ npm install --save-dev uglifyjs html-dist

다음 내용으로 Makefile을 만든다. 2행 이후의 내용은 모두 스페이스가 아닌 탭으로 시작해야 한다.

build:
    -rm -r dist/
    mkdir dist
    jspm bundle-sfx app/main -o dist/app.js
    ./node_modules/.bin/uglifyjs dist/app.js -o dist/app.min.js
    ./node_modules/.bin/html-dist index.html --remove-all --minify --insert app.min.js -o dist/index.html

이제 make build로 dist 폴더 내에 minify된 index.html과 번들된 app.js, app.map, 그리고 uglifyjs로 변환된 app.min.js를 확인할 수 있다.


jspm의 아쉬운 점은 아직 브라우저에서만 명확하게 동작한다는 점이다. registry에 등록되지 않은 패키지도 npm이나 github에서 직접 받을 수 있도록 지원하고 있지만 브라우저에서 제대로 지원하지 않는 라이브러리의 경우 사용할 수 없다. 또한 isomorphic한 방식으로 접근할 때 nodejs가 jspm으로 설치한 라이브러리를 불러오지 못하기 때문에 pre-rendering을 하려 한다면 중복되는 패키지를 다시 받아야 하는 불편함이 있다. 하지만 jspm은 무엇보다 설정을 배우는 것에 시간을 많이 쓰지 않고서도 ES6를 바로 사용할 수 있다는 장점이 있다. 또한 cli도 상당히 단순해서 다른 도구과 달리 바로 써먹을 수 있는 즐거움이 있다. 이 jspm이 서버측, 클라이언트측 모두 사용할 수 있도록 나온다면 말 그대로 강력함을 뽐내지 않을까 상상해본다. 🙂

ECMAScript 6 에서 추가되는 많은 새로운 기능들이 기대가 되면서도 아직까지 직접 사용해보지 못했었다. 최근에 JavaScript 관련 컨퍼런스 영상 뿐만 아니라 대부분의 포스트도 최신 문법으로 작성되는 경우가 많아 살펴보게 되었다.

ES5 표준은 2009년에 표준화되어 점진적으로 반영되고 있지만 ECMAScript 6는 2015년 6월 승인을 목표로 작성되고 있는 새 ECMAScript 표준이다. Prototype 기반의 객체 지향 패턴을 쉽게 사용할 수 있도록 돕는 class의 추가, => 화살표 함수 표현, 템플릿 문자열, generatoryield 등 다른 언어에서 편리하게 사용하던 많은 기능들이 추가될 예정이다.

현재 나와있는 JS 엔진에는 극히 일부만 실험적으로 적용되어 있어서 실제로 사용하게 될 시점은 까마득한 미래와 같이 느껴진다. 하지만 현재에도 기존 JavaScript와 다른 문법을 사용할 수 있도록 돕는 transform compiler가 존재한다.

TypeScript, CoffeeScript는 JavaScript 문법이 아닌 각각의 문법으로 작성된 코드를 JavaScript에서 동작 가능한 코드로 변환한다. 이와 같은 원리로 ECMAScript 6 문법으로 작성된 파일을 변환-컴파일하는 구현이 존재한다. 이 포스트에서 소개하려는 라이브러리, babel이 바로 그 transcompiler 중 하나다.

Babel 사용하기

다른 라이브러리와 같이 npm으로 설치 가능하다.

$ npm install --global babel

ES6로 작성한 파일로 js 컴파일한 결과를 확인하려면 다음 명령어를 사용할 수 있다.

$ babel script.js

파일로 저장하기 위해 --out-file, 변경할 때마다 저장하도록 하려면 --watch 플래그를 활용할 수 있다. 파일 대신 경로도 사용할 수 있다.

$ babel ./src --watch --out-file script-compiled.js

babel을 설치하면 node.js의 CLI와 같이 사용할 수 있는 babel-node 라는 CLI를 제공한다. node처럼 REPL나 직접 파일을 실행할 때 사용할 수 있다. 직접 실행해서 확인할 때 편리하다.

$ babel-node # REPL 실행 시
$ babel-node app.js

자세한 내용은 babel CLI 문서에서 확인할 수 있다.

다른 도구와 함께 Babel 사용하기

Babel은 다양한 usage에 대한 예시를 제공하고 있다. Babel의 Using Babel을 확인하면 현재 사용하고 있는 도구에 쉽게 접목할 수 있다.

Meteor는 다음 패키지를 설치하면 바로 사용할 수 있다. 이 패키지를 설치하면 .es6.js, .es6, .es, .jsx 파일을 자동으로 컴파일 한다.

$ meteor add grigio:babel

Webpack을 사용하고 있다면 babel-loader를 설치한 후 webpack.config.js에 해당 loader를 사용하도록 설정하면 끝난다.

Webpack을 사용해보지 않았다면 다음 순서대로 시작할 수 있다. Webpack은 모듈을 하나의 파일로 묶어주는 module bundler의 역할을 하는 도구다. 먼저 CLI를 설치한다.

$ npm install --global webpack

프로젝트에서 babel을 사용할 수 있도록 babel-loader를 추가한다.

$ npm install babel-loader --save-dev

webpack.config.js 파일을 다음과 같이 작성한다.

module.exports = {
  entry: "./app.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
}

위 설정은 node_modules 디렉토리를 제외한, 프로젝트 내에 있는 모든 *.js를 babel로 변환 후 묶어준다. 각각 세부적인 옵션은 webpack 문서에서 살펴볼 수 있다.


매번 비슷하면서도 전혀 새로운 라이브러리가 많이 나와 때로는 따라가기 버겁다는 생각이 들 때도 있지만 찬찬히 들여다보면 그 새로움에 자극을 받게 된다. (부지런한 사람들 같으니!) 다음 세대 ECMAScript를 준비하는 마음으로 새로운 문법도 꼼꼼히 봐야겠다. Babel, Webpack 등 최근 나오는 라이브러리는 문서화가 잘 되어있는 편이라 금방 배우기 쉬운 편이니 각 문서를 확인해보자.

더 읽을 거리

5월은 여러가지 일이 있어 참 바빴던 달이라 이제서야 후기를 적는다. MelbJS은 매달 정기적으로 열리는 멜번 JavaScript 밋업이다. 멜번에서도 다양한 밋업이 정기적으로 열리고 있는데다 한결 같이 흥미로운 주제라 자주 가고 싶지만 끝나고 집에 가는 것이 애매해서 1년에 두어 번 정도 가지 못할 뿐더러 가더라도 막차를 타야해서 앞 세션만 듣고 나와야 하는 아쉬움이 늘 있다. 관심있는 주제도 있고 새로운 자극도 받을 겸 시간내서 참가했다.

Aconex 1

밋업은 매월 Aconex 오피스에서 진행하고 있다. 식당 공간을 다용도로 사용할 수 있도록 잘 만들어둬서 올 때마다 사무실이 생기면 꼭 이렇게 공간을 꾸며야겠다는 생각이 든다. 벽 한 켠은 칠판으로 만들어 둬 현재 이 회사에서 진행중인 프로젝트를 힐끔 살펴볼 수도 있다. (밋업을 가면 분위기라는게 있는데 Python 밋업은 학구적인 모임, JS 밋업은 힙스터 모임, .Net 밋업은 제2의 회사로 출근한 분위기다. 흐흐.) 스폰서가 많아 생맥주에, 피자에, 장소까지 풍성하다. 음식을 제공하는 행사마다 채식, 할랄 푸드를 먹는 사람을 위한 메뉴를 두는 모습이 참 보기 좋다.

Smarter CSS Builds with Webpack

envato의 개발자인 Ben Smithett의 세션이었는데 Webpack을 이용해서 CSS를 패키징하는 방법을 보여줬다. 패키징 자체는 크게 새로운 얘기가 아니었지만 컴포넌트 단위의 개발에서 CSS를 편리하게 적용할 수 있는 방법을 제시했다. 어플리케이션에서 실제로 필요하지 않은 CSS까지 전부 불러오는 것이 아니라 컴포넌트에서 필요한 CSS만 불러오는 형태로 작성해, 컴포넌트 단위 구성을 스타일까지 확장할 수 있게 된다.

물론 컴포넌트 단위로 사용하려고 하면 CSS도 컴포넌트 단위에 맞는 접근이 필요하다. CSS pre-compiler를 사용하게 되면 변수의 scope가 전역적으로 다뤄지기 마련이라 각 컴포넌트를 독립적인 css로 관리하는데 불편함이 있는데 각각 독립된 컴포넌트에서 필요한 변수셋을 불러오는 형태로 그 의존성을 분산할 수 있다.

컴포넌트를 더 컴포넌트답게 활용할 수 있게 하는 아이디어라서 더욱 마음에 들었던 세션이었다. react로 개발하고 있다면 살펴볼 만한 좋은 주제다. 전체 세션의 내용은 Ben Smithett의 블로그 포스트에서 확인할 수 있다.

React Native — One of these things is not like the other

Matt Delves의 세션으로 react native에 대한 전반적인 이야기를 다뤘다. 이전에 공식 문서 튜토리얼을 살펴봤을 때랑 많이 달라지지 않아 크게 새로운 이야기는 없었지만 flux 아키텍쳐에 대해 알게된 후 듣는 react native라서 기분이 새로웠다. 세션 중간에 Colin Eberhardt를 인용했는데 react에 대해 정확하게 표현하는 느낌이다.

“React는 사용자 인터페이스를 생성하는데 독창적이며 급진적인, 고수준의 함수형 접근을 도입했다. 간단히 말해, 어플리케이션의 UI는 단순히 현재 어플리케이션의 상태를 표현하는 함수 역할을 한다.”

“React introduces a novel, radical and highly functional approach to constructing user interfaces. In brief, the application UI is simply expressed as a function of the current application state.”

아직 구현되지 않은 view도 많고 부족한 부분이 있지만 계속 개선되고 있어서 더욱 더 기대되는 라이브러리다. 전체 발표 내용은 GitHub Repo.에 올려져 있다.

Aconex 2

요즘 쏟아지는 수많은 라이브러리를 다 써보지 못해서 늘 아쉬운 기분이 든다. 실무에서 사용하지 않고 있다면 개인 프로젝트로라도 진행해서 써봐야 이해도 되고 손에도 익는데 무언가 만들고 싶은 욕구가 덜해서 고민이 많다. 아무리 바쁘더라도 한 발자국 물러나면 별 일도 아닌 일인 경우가 너무나도 많은데 쉽지 않다. 여유를 다시 찾고 다시 재미있게 코드를 만들 수 있었으면 좋겠다.

지난 2월에 한국에서 구입했는데 다시 호주로 오기 전까지 배송이 안되서 결국 들고 오질 못했었는데 집에서 택배와 함께 보내줘서 이제야 개봉해보고 살펴보게 되었다.

라즈베리 파이는 영국의 Rasberry Pi Foundation에서 교육 용도로 개발한, 신용카드 사이즈의 컴퓨터로 USD 35달러라는 저렴한 가격에 판매하고 있다. 교육용 외에도 다양한 분야에서 활용하고 있어 보급형 개발보드의 새로운 세계를 열었다는 좋은 평을 받고 있다.

raspberry pi 2 model B

구입한 라즈베리 파이 2 Model B는 2015년 2월에 출시한 보드로 전 모델에 비해 업그레이드 된 모델이다. 사양은 다음과 같다.

  • Quad core broadcom BCM2836 CPU with 1GB RAM
  • 40pin extended GPIO
  • Micro SD slot
  • Multiple Ports: 4 USB ports, Full size HDMI, 4 pole Stereo output and Composite video port, CSI camera port & DSI display port
  • Micro USB power source

라즈베리파이 웹사이트 문서를 참고해 설치했는데 교육용 개발보드답게 문서화가 아주 잘되어 있어서 환경 구축에 큰 어려움이 없었다.

라즈베리파이 자체로는 사실 할 수 있는게 없어 몇 가지 부속이 더 필요하다. (요리사가 집 냉장고에서 대충 재료를 꺼내는 느낌으로) 내 부품 잡동사니에서 다음과 같은 부품을 찾았다. 다 가지고 있으면 본체만 구입하면 되겠지만 없다면 Starter Kit 같은 것도 판매하고 있다.

라즈베리 파이 2 Starter Kit 구입 링크

  • 8GB Micro SD, Micro SD reader (SKY라고 써져 있는데 이제 더이상 볼 수 없는 회사가 되어버렸다…)
  • iptime wifi USB (호주 처음 올 떄 가져왔으니 적어도 5년은 된 동글)
  • Micro USB 케이블
  • 흔한 이더넷 케이블 (랜선이라 부르는)
  • 애플 USB 충전기

다음은 라즈베리파이 웹사이트 문서에서 확인할 수 있는 내용으로 자세하게 보고 싶다면 문서를 참고하자. 이미지 세팅에는 mac 환경에서, 그 외에는 terminal SSH를 통해 라즈베리 파이에 접속해서 진행했다.

이미지 설치하기

먼저 사용하고 싶은 이미지를 라즈베리파이 웹사이트 다운로드 페이지에서 내려 받는다. 여기서는 Raspbian 이미지를 사용했다. zip 파일 압축을 해제하면 img 파일이 나오는데 이 이미지를 micro SD에 풀어준다. 그 img를 그대로 넣는게 아니라 명령어를 사용해서 넣어야 한다.

먼저 Micro SD를 SD 카드 어뎁터나 micro SD 리더기 등을 통해 맥에 연결한다. 그리고 터미널을 열어 diskutil list로 어느 경로로 마운트 되었는지 확인한다.

$ diskutil list
/dev/disk0
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:      GUID_partition_scheme                        *1.0 TB     disk0
   1:                        EFI EFI                     209.7 MB   disk0s1
   2:          Apple_CoreStorage                         999.7 GB   disk0s2
   3:                 Apple_Boot Recovery HD             650.0 MB   disk0s3
/dev/disk1
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:                  Apple_HFS Macintosh HD           *999.4 GB   disk1
                                 Logical Volume on disk0s2
                                 Unencrypted
/dev/disk2
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:     FDisk_partition_scheme                        *2.0 TB     disk2
   1:               Windows_NTFS My Passport             2.0 TB     disk2s1
/dev/disk3
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:     FDisk_partition_scheme                        *8.1 GB     disk3
   1:             Windows_FAT_32 Sky                     8.1 GB     disk3s1

내 경우는 /dev/disk3 인 것을 확인할 수 있었다. 이제 마운트되어 있는 디스크를 언마운트해야 한다.

$ diskutil unmountDisk /dev/<disk# from diskutil>
# 본인의 disk 번호를 확인 후 그 값을 넣어야 한다
# 예를 들면 diskutil unmountDisk /dev/disk3

그리고 이미지가 있는 경로에서 다음 dd 명령어로 이미지를 넣어준다.

sudo dd bs=1m if=/path/to/image.img of=/dev/<rdisk# from diskutil>
# 경로를 상황에 맞게 수정해야 한다
# 내 경우는 sudo dd bs=1m if=~/Downloads/2015-05-05-raspbian-wheezy.img of=/dev/rdisk3

원래 문서에서는 of=/dev/disk3로 입력하도록 하는데 disk는 버퍼로 인해 속도가 느리다고 한다. disk로 한참 기다려도 생각보다 오래 걸려 찾아보니 맥에서 disk는 정말 느리므로 rdisk를 활용하라는 글을 찾을 수 있었다. 입력이 다 끝났으면 micro SD를 라즈베리 파이에 연결한다.

라즈베리 파이 접속하기

모니터가 있으면 더 편하게 했겠지만 본체만 가지고도 충분히 기본 설정이 가능하게 잘 구성되어 있다. 라즈베리 파이에 Micro SD, 무선 랜카드, 그리고 초기 설정을 위해 사용할 이더넷 케이블(랜선)을 연결한다. 케이블 한쪽은 라즈베리 파이 본체에 반대쪽은 맥에 직접 연결(Direct Connection)한다. 그러고 나서 전원 usb를 꼽으면 초록색 빨간색 LED가 빤짝이며 부팅된다. 빨간색이 오래 켜져있으면 부팅이 완료된 것이다.

맥에서 터미널을 열어 ssh로 로그인한다.

$ ssh pi@raspberrypi.local
# password는 raspberry

기본적인 메시지와 함께 쉘이 뜨는 것을 확인할 수 있다. 다음 명령어로 환경 설정을 시작한다.

$ sudo raspi-config

1번으로 파일 시스템을 재설정하고 2번으로 사용자 비밀번호를 변경한다. 변경이 완료되었으면 Tab을 누르면 Finish를 선택할 수 있다.

wifi 설정하기

라즈베리 파이를 유선랜으로 연결해두는 환경이면 좋겠지만 내 방은 공유기랑 멀어서 wifi를 기본적으로 사용하도록 설정해야 한다. 내 wifi usb 동글은 충분히 낡아서 그런지 드라이버 설정 없이 바로 인식했다. 먼저 스캔을 한다.

$ sudo iwlist wlan0 scan

이제 랜카드가 스캔한 AP가 모두 출력되는데 연결하고자 하는 SSID를 확인하자. 그리고 /etc/wpa_supplicant/wpa_supplicant.conf에 ssid와 AP 접속할 때 사용하는 비밀번호를 입력한다. vim은 없고 vi가 있는데 nano를 써도 무관하다. 취향에 따라 사용하고 여기서는 nano로 적어둔다.

$ sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

이제 내용을 입력할 수 있다. ssid에는 AP명, psk에는 AP 비밀번호를 입력한다.

network={
    ssid="HARUAIR_AP"
    psk="goawayfreerider"
}

입력을 완료했으면 ctrl + x, y 그리고 엔터를 누른다. 이러면 자동으로 변경을 확인해서 wifi에 연결된다. 안되면 무선랜을 sudo ifdown wlan0으로 내렸다가 sudo ifup wlan0으로 다시 켜준다. 인터넷 연결 확인은 간단하게 ping을 활용할 수 있다. ping google.com을 입력했을 때 resolving host problem 같은게 나지 않고 정상적으로 핑을 주고 받으면 연결이 된 상태다. 이제 vim을 설치할 수 있다. 😀

wlan0이 연결이 되었으면 이제 이더넷 케이블은 제거해도 된다.

라즈베리파이 기본 호스트명 변경하기

만약 여러대의 라즈베리파이를 사용할 예정이라면 편의를 위해 호스트명을 변경해두는 것이 편리하다. 위에서 환경설정에 사용했던 raspi-config에서 8 Advanced Options를 선택하면 A2 Hostname 항목에서 변경할 수 있다. 다음은 이 간편한 방법을 두고 복잡한 과정으로 변경하는 방법이다.

두 군데를 수정하면 되는데 /etc/hostname 파일과 /etc/hosts 파일이다. 각각 파일의 역할이 궁금하면 구글에서 찾아보자.

$ sudo nano /etc/hostname

rassberrypi를 원하는 호스트명으로 변경한다. (변경 후에 저장하려면 ctrl + x, y 그리고 엔터.)

$ sudo nano /etc/hosts

가장 마지막 줄에 있는 127.0.1.1 rassberrypi에서 뒷 호스트명을 변경한 호스트명으로 교체하고 저장한다. 이제 다음 명령어로 변경사항을 반영하고 재부팅한다.

$ sudo /etc/init.d/hostname.sh
$ sudo reboot

재부팅하면 변경된 호스트명으로 접속할 수 있다.

new hostname

라즈베리 파이를 직접 사용해보니 그냥 일반 컴퓨터와 크게 다르지 않았다. 사양도 높은 편이라서 하드만 연결하면 NAS 용도로 충분히 사용할 수 있을 정도인데 왜 좋은 평을 받는지 충분히 이해가 되었다. 최근 IoT의 열풍도 그냥 나타난 것이 아니라 이런 작고 강력한 하드웨어의 든든한 지원 덕분이라는 것을 실감할 수 있었다.

어떻게 활용하면 오래, 재미있게 가지고 놀 수 있을지 생각해봤는데 요즘 Azure에서 IoT와 관련해 여러 서비스가 나오고 있어서 센서를 구입해 이 서비스를 이용해볼 생각이고 그리고 손으로 만질 수 있는 개발에 대한 로망이 있어 확장 실드와 모터를 구입해 servo control을 해보려고 한다. 웹과 연동되는 장난감을 만들 생각에 벌써 신난다. 😀

PHP에서 데이터를 json 문자열로 변환할 때 json_encode(mixed $value) 함수를 사용하게 된다. 이 함수를 이용해 개체를 변환할 때에도 활용할 수 있다. 기본적으로는 클래스에서 public인 프로퍼티에 대해서만 json으로 반환한다. protected나 private, 또는 데이터를 가공해 json으로 반환해야 한다면 해당 클래스에서 JsonSerializable 인터페이스를 구성해 어떤 형태로 변환할 것인지 정의할 수 있다. 이 인터페이스는 PHP 5.4.0 이상, PHP 7 에서 지원하고 있다.

<?php
class Student {
    public $first_name;
    public $last_name;
    protected $school;

    public function __construct($first_name, $last_name, $school) {
        $this->first_name = $first_name;
        $this->last_name = $last_name;
        $this->school = $school;
    }
}

$haruair = new Student("Edward", "Kim", "WeirdSchool");
print $haruair;


// result :
// {
//   "first_name": "Edward",
//   "last_name": "Kim"
// }
?>

public 프로퍼티만 필요로 한 경우라면 별도의 인터페이스 구성 없이도 사용할 수 있다. 다만 대부분의 라이브러리에서 protected 또는 private으로 프로퍼티를 작성하고 __get(), __set() 매직 메소드를 구현해 사용하고 있고 또 권장하고 있기 때문에 그런 경우엔 다음과 같이 JsonSerializable 인터페이스를 활용할 수 있다.

<?php
class Student implements JsonSerializable {
    public $first_name;
    public $last_name;
    protected $school;

    public function __construct($first_name, $last_name, $school) {
        $this->first_name = $first_name;
        $this->last_name = $last_name;
        $this->school = $school;
    }

    public function jsonSerialize() {
        return [
            'full_name' => "{$this->first_name}, {$this->last_name}",
            'first_name' => $this->first_name,
            'last_name' => $this->last_name,
            'school' => $this->school,
        ];
    }
}

$haruair = new Student("Edward", "Kim", array("Jeju Univ", "Weird School"));
print $haruair;


// result :
// {
//   "full_name": "Edward, Kim",
//   "first_name": "Edward",
//   "last_name": "Kim",
//   "school": [
//       "Jeju Univ",
//       "Weird School"
//   ]
// }
?>

변환하는 과정에서 json 문자열을 추가하거나 데이터의 구조를 변환하는 등 다양한 형태로 활용할 수 있다.

더 읽을 거리

웹사이트 설정

웹페이지 색상을 선택하세요

Darkreader 플러그인으로 선택한 색상이 제대로 표시되지 않을 수 있습니다.