PYRASIS.COM: 이재홍의 GitHub 탐험기 시즌2 2014/11/23

책 또는 웹사이트의 내용을 복제하여 다른 곳에 게시하는 것을 금지합니다.
책 또는 웹사이트의 내용을 발췌, 요약하여 강의 자료, 발표 자료, 블로그 포스팅 등으로 만드는 것을 금지합니다.

sequelize - Sequelize is an easy-to-use multi sql dialect object-relationship-mapper for node.js.

MySQL, MariaDB, PostgreSQL, SQLite를 지원하는 Node.js용 ORM 모듈입니다. ORM은 관계형 데이터베이스를 프로그래밍 언어의 오브젝트 형식으로 사용하도록 해주는 라이브러리입니다.

예전처럼 SQL문으로 데이터를 조작하지 않고, 프로그래밍 언어의 API 형식으로 쉽게 데이터를 조작할 수 있습니다. Ruby on Rails 이후로 ORM이 많이 나오고 있습니다.

// MySQL DB 이름, 계정, 암호 설정
var sequelize = new Sequelize('exampledb', 'admin', 'adminpassword', {
  host: 'mysql.example.com',
  port: 6379,
  maxConcurrentQuries: 1024,
  logging: false
});

// MySQL DB 테이블 정의
var ExampleUser = sequelize.define('exampletable', {
  userId: { type: Sequelize.INTEGER, allowNull: false, unique: true },
  userType: { type: Sequelize.STRING, allowNull: false },
  userName: Sequelize.STRING
});

// MySQL DB 테이블 생성
sequelize.sync();

sequelize.define() 함수로 테이블을 정의합니다. 각 레코드의 이름과 데이터 형식, 유일 키(Unique Key), 널 허용 여부 등을 설정할 수 있습니다. 그리고 sequelize.sync() 함수를 호출하면 DB에 테이블이 생성됩니다. 이미 테이블이 있으면 그냥 넘어갑니다.

ExampleUser.findAll({
  where: { userType: { eq: 'ExampleType' } }
}).success(function (users) {
  users.map(function (user) { return user.values; }).forEach(function (e) {
    console.log(e.userId);
    console.log(e.userName);
    console.log(e.userType);
  });
});

findAll() 함수로 간단하게 데이터를 가져올 수 있습니다. 데이터를 가져온 뒤 map 함수로 각 데이터에 접근할 수 있습니다.

user = ExampleUser.build();
user.userId = 1;
user.userType = 'ExampleType';
user.userName = '이재홍';
user.save().success(function () {
  console.log('success');
});

ExampleUser.build() 함수로 오브젝트를 만든 뒤 데이터를 넣어주고, user.save() 함수만 호출하면 DB에 데이터가 추가됩니다. 아주 간단하죠.

자세한 사용법은 공식 문서에 잘 나와있습니다.

YouCompleteMe - A code-completion engine for Vim

https://github.com/Valloric/YouCompleteMe

Vim용 자동완성 플러그인입니다. Vim을 쓸 때 자동완성이 안되서 좀 불편했는데 드디어 나왔군요.

PuTTY에서도 잘 동작합니다.

interact.js - JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers

https://github.com/taye/interact.js

자바스크립트로 드래그 & 드롭을 구현한 라이브러리입니다.

IE는 8 이상부터 지원합니다.
모바일에서는 멀티터치도 지원합니다.
jQuery같은 라이브러리는 없어도 됩니다.

웹에서 표현할 수 있는 액션이 점점 다양해지는군요.

<script src="http://code.interactjs.io/interact-1.1.2.min.js"></script>
<script>
interact('.draggable')
    .draggable({
        // allow dragging of multple elements at the same time
        max: Infinity,

        // call this function on every dragmove event
        onmove: function (event) {
            var target = event.target,
                // keep the dragged position in the data-x/data-y attributes
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

            // translate the element
            target.style.webkitTransform =
            target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';

            // update the posiion attributes
            target.setAttribute('data-x', x);
            target.setAttribute('data-y', y);
        },
        // call this function on every dragend event
        onend: function (event) {
            var textEl = event.target.querySelector('p');
            
            textEl && (textEl.textContent =
                'moved a distance of '
                + (Math.sqrt(event.dx * event.dx +
                             event.dy * event.dy)|0) + 'px');
        }
    })
    // enable inertial throwing
    .inertia(true)
    // keep the element within the area of it's parent
    .restrict({
        drag: "parent",
        endOnly: true,
        elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    });

    // allow more than one interaction at a time
    interact.maxInteractions(Infinity);
</script>

<style>
#drag-me {
    width: 25%;
    height: 100%;
    margin: 10%;

    background-color: #29e;
    color: white;
    
    border: solid 0.4em #666;
    border-radius: 0.75em;
    padding: 3%;

    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
}

#drag-me::before {
    content: "#" attr(id);
    color: #000;
}
</style>

<div id="drag-me" class="draggable">
    <p> Click or touch and drag this element around </p>
</div>