이재홍의 GitHub 탐험기 2014/08/09

phantomjs - Scriptable Headless WebKit

https://github.com/ariya/phantomjs

UI가 없는 웹 브라우저입니다. WebKit 엔진을 커맨드라인용으로 만든거라 보면 됩니다. 웹 페이지 테스트 자동화에 유용합니다.

JavaScript에서 phantomjs가 제공하는 API를 사용하여 웹 페이지의 DOM 요소를 가져오거나, 버튼 또는 링크 클릭, 문자열 입력 등을 할 수 있습니다. 특정 사이트에 자동 로그인을 한 뒤 데이터를 긁어온다던지...

아래는 간단한 예제입니다.

var page = require('webpage').create();
var url = 'http://www.phantomjs.org/';
page.open(url, function (status) {
  var results = page.evaluate(function () {
    return document.title;
  });

  console.log(results);

  phantom.exit();
});

phantomjs로 test.js 파일을 실행하면 웹 사이트에 접속하여 title을 가져옵니다.

phantomjs test.js

phantomjs-node - PhantomJS integration module for NodeJS

https://github.com/sgentle/phantomjs-node

Node.js용 phantomjs 모듈입니다. Node.js를 이용하여 웹 페이지 테스트 자동화를 할 수 있습니다.

npm으로 설치하고

npm install phantom

page.evaluate 함수의 첫 번재 매개변수에 phantomjs용 JavaScript 코드를 넣습니다. 이 코드에서는 바깥의 Node.js 함수, 변수에 접근할 수 없습니다.

phantomjs에서 처리된 결과는 두 번째 매개변수의 콜백으로 넘어옵니다. 이 콜백 함수는 Node.js 영역입니다.

var phantom = require('phantom');

phantom.create(function (ph) {
  ph.createPage(function (page) {
    page.open('http://www.phantomjs.org', function (status) {
      console.log('opened phantomjs? ', status);
      page.evaluate(function () {
        return document.title;
      }, function (result) {
        console.log('Page title is ' + result);
        ph.exit();
      });
    });
  });
});

p5.js - A JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing

https://github.com/lmccart/p5.js

Processing의 스펙을 JavaScript로 구현한 그래픽 라이브러리입니다.

Processing.js와는 다른 프로젝트입니다. Processing.js는 Processing 언어 자체를 JavaScript로 실행하는 프로젝트지만, p5.js는 Processing 언어를 실행하지 않고 JavaScript로 Processing 함수들을 구현해놓았습니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.22/p5.min.js"></script>

<script>
function setup() {
  createCanvas(600, 400)
}

function draw() {
  ellipse(50, 50, 80, 80);
}
</script>

TimelineJS - TimelineJS: A Storytelling Timeline built in JavaScript

https://github.com/NUKnightLab/TimelineJS

JavaScript 연대표 라이브러리입니다. 예제 화면은 http://timeline.knightlab.com/에서 볼 수 있습니다. 정말 멋지군요.

jshint - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code

https://github.com/jshint/jshint

JavaScript 문법 체크 도구입니다. JavaScript는 콜백도 많고 괄호도 복잡해서 문법이 틀릴때가 종종 있습니다. 특히 웹용 JavaScript 코드를 작성할 때 세미콜론이 빠져있으면 용량을 줄인(minify) 뒤에 에러가 납니다. 이때 jshint를 사용하면 잘못된 문법을 쉽게 찾을 수 있습니다.

http://jshint.com에 JavaScript 코드를 붙여넣으면 잘못된 부분을 표시해줍니다.

이상 끝.