Webpack – dev server 에서 파일로 내려보내기

Webpack dev server 를 사용하다 보면 memory에서 file로 떨구고(?) 싶을 때가 있다.
방안을 찾다보니 비슷한 것을 고민한 사람이 있었는데, 결국 Plugin으로 만들어서 공개 해 놓았다.

WriteFilePlugin
https://github.com/gajus/write-file-webpack-plugin

사용 방법은 간단하다.
설치 후 plugin 에 추가 해 주면 된다.

plugins: [
  new StringReplacePlugin()
],

지금 환경의 경우 dev server를 gulp로 사용하고 있기 때문에 gulp task에서 동적으로 추가 해 주었다.~

gulp.task('wp:dev-server', function (callback) {
  // modify some webpack config options
  var myConfig = Object.create(webpackConfig);
  var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  var WriteFilePlugin = require('write-file-webpack-plugin');

  myConfig.plugins.push(new WriteFilePlugin());
...  

Babel 6 – converting issue in ‘export default’

Babel 6를 이용해서 transform을 하면 IE8이하를 지원할수 없는 현상이 발생한다.
Babel 커뮤니티에서 어떻게 대처 할진 모르겠지만 현시점 기준으로는 사용이 어렵다. (https://phabricator.babeljs.io/T2817)
우선 5 버전대를 이용해야 하는 방법 밖에 없는듯 하다. (ES3 플러그인이 있긴하지만 변환이 잘 되지 않음.)
Webpack 빌드시 아래 의존성을 유지하도록 하면 된다.

dependencies: {
    "babel-loader": "@5.x",
    "babel-runtime": "@5.x" 
}

업데이트 (at 2016-2-2)
es3ify 를 이용하면 가능해 보인다.

npm install --save es3ify-loader
var babelQuery = {
      presets: ['es2015'],
      plugins: [
          'transform-es3-member-expression-literals',
          'transform-es3-property-literals'
      ]
}

config.module = {

        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                // es3ify required for IE8
                loaders: ['es3ify', `babel?${JSON.stringify(babelQuery)}`]
            }]
}

ECMAScript 6 – traceur과 함께 만나보는 ES6

ES6는 Class, let, => 등의 기존 문법과는 다른 문법들이 존재합니다.
현재의 모던 브라우저에서 조차 바로 사용할 수 없는데요, Traceur 을 이용하면 지금 바로 작성해 볼 수 있습니다.
커피스크립트나 타입스크립트처럼 컨버팅 프로세스를 거쳐서 기존 브라우저에서도 사용할 수 있게 해 주는 도구입니다.
태스크러너 (gulp, grunt)를 이용하면 지금 바로 쓸 수 있는 ES6를 바로 사용해 볼 수 있겠네요.
ES6-Shim 등과 같이 겸해서 사용하면 좋을꺼 같습니다.

traceur-compiler
traceur 컴파일러

Egghead.io traceur intro lecture
에그헤드의 traceur 소개 동영상 페이지입니다.

gulp-traceur
gulp의 traceur 러너 플러그인입니다. grunt도 있지 않을까 싶네요.

ECMAScript 6 – Class Example

ES6 의 Class 를 테스트 하기 위한 아주 기본적인 코드입니다.
상속(Extend)와 constructor를 바로 써볼 수 있습니다.
Chrome Canary 버전을 이용하거나, Babel Transform을 이용하면 별도 harmony 옵션없이 바로 사용해 볼 수 있습니다.

class Mystic {
        constructor(){
                console.log('Mystic');
        }
}

var a = new Mystic();

class Test extends Mystic{
        constructor(){
                console.log('Test');
        }
}
new Test();

ECMAScript 6 – let 키워드에 대해

enter image description here

이전 ECMAScript는 기본적으로 블록 스코프를 지원하지 않습니다.
오직 함수 선언을 이용한 스코프만을 지원하고 있는데요, let을 이용하면 for문이나 if문의 블럭을 이용해서 스코프를 지정할 수 있습니다.

아래 2라인의 구문은 사실상 차이가 없다라고 볼 수 있지만, if문이나 for문의 블럭을 만나면 이야기가 달라집니다.

let a = '123';
var a = '123';

예를 들어, for문의 블록에서 아래와 같이 선언을 하게 되면, 하단부에서는 a라는 변수를 사용할 수 있게 됩니다.

ECMA Script 5

for(var i = 0; i < 10; i++){
    var a = 123;
}
console.log(a); // 123 출력

ECMA Script 6

for(var i = 0; i < 10; i++){
    let a = 123;
}
console.log(a); // undefined 출력

이처럼 기존 문법에는 없던 새로운 문법을 이용해 블럭 스코프를 생성할 수 있게 됩니다. 크게 복잡한 점은 없지만, 스크립트를 좀더 유연하게 사용할 수 있어서 실무에서 유연하게 사용할 수 있지 않을까 싶습니다.

프론트엔드/백엔드 다국어 처리 i18next

엄청 쉽고 간편한 다국어 처리 솔루션.

i18next

http://i18next.com

그간 다국어처리에 대해 생각하고 고민하던 왠만한 것들은 전부 다 들어가있다. 현재까지 본 것중에는 가장 좋은거 같다. jquery를 이용해 프론트엔드에서 사용할 수 있으며, node.js 를 플랫폼으로 쓰는 경우, 다국어 모듈을 이용해 동일 언어 설정파일을 서버에서도 바로 쓸 수 있다.
(properties 파일을 이용하는 방식은 아니고 json형태의 소스를 쓴다)
자체적으로 쿠키 설정값을 이용할 수 있어서 언어 교체도 URL을 이용해 바로 할 수 있다.
EX) http://site.com?lang=ko

From JS

// with options
$.i18n.init({ lng: "en-US" });
// "later"
var x = $.t("key");

From Markup

<!-- inner HTML replace -->
<a id="btn1" href="#" data-i18n="key.to.set.text"></a>
<!-- title attribute replace -->
<a id="btn1" href="#" data-i18n="[title]key.to.set.text"></a>
<!-- title attribute replace -->
<input type="text" data-i18n="[placeholder]key.to.set.text"></input>