웹개발자면 로컬에서 정적 웹서버를 띄워야 하는 경우가 많이 있는데 장기간 개발하는 프로젝트등은 Apache나 Nginx같은 웹서버를 설치해서 라우팅하면 되지만 이런 상황외에도 간단히 HTML을 보거나 어떤 프로젝트의 예제나 문서를 열어보려 할 때 필요한 경우가 많다. 그냥 웹브라우저에서 파일을 열어도 되겠지만 대게는 웹서버로 관리되므로 링크등을 생각하면 웹서버로 띄우는게 여러 모로 편한다. 로컬에서 HTML이나 css같은 정적 파일을 서빙하는 웹서버를 띄우는 유틸은 이미 다양하게 존재한다. python -m SimpleHTTPServer으로 간단하게 띄울 수도 있는데 명령어가 길어서 Rhiokim님이 만드신 locally를 주고 사용하고 있었다.

그러다가 harp.js를 SNS에서 보게 되었다. 처음에 프로젝트를 보았을 때는 정적서버라는게 아주 복잡한 기능이 필요한 것은 아니므로(이런 웹서버는 리얼에서 서비스용으로 쓰는것은 아니므로) 뭐 새로울게 있겠나 싶었지만 아래의 소개 동영상을 보는 순강 생각이 달라졌다.

14분 정도의 영상이라 약간 길긴 하지만 웹 프론트기술에 관심이 많은 사람이라면 이 동영상을 보면 harp.js가 어떤 기능을 제공하는지 알 수 있을 것이다. 아직 사용한 기간이 길지는 않아서 버그등이 있을 수도 있겠지만 기능상으로는 이런 류의 정적 웹서버의 최종형태가 아닌가 싶다. harp.js는 Node.js로 만들어졌으므로 npm install harp -g로 설치하면 커맨드라인에서 harp.js를 사용할 수 있다.

harp.js의 기본적인 기능

기존의 정적 웹서버들이 HTML, CSS, JS, 이미지등을 처리하고 있는데 harp.js는 Jade, Markdown, ejs, CoffeeScript, Less, Stylus등을 지원한다.(SASS는 지원안하는 듯) 요즘 많이 쓰는 HTML, CSS, JS로 컴파일 되는 언어들을 자동으로 컴파일해서 제공하므로 훨씬 활용도가 높다.

harp server를 실행하면 다음과 같이 Harp 로고가 나타나면서 현 위치를 기준으로 웹서버를 실행한다.

그래서 현 위치에 다음과 같은 index.jade 파일이 있으면 http://localhost:9000/에 접속하면 해당 파일이 HTML로 변환되어 나온다.

!!!
html
  head
    title Harp.js
  body
    h1 Hello World

당연히 index.html파일을 만들어도 되고 index.md로 마크다운을 작성해도 HTML로 변환해서 보여준다. 이렇게 다른 확장자를 사용할 때는 파일명은 사용하지 않거나 .html을 붙힌다. 즉, test.jade나 test.md파일이 있으면 접속은 http://localhost:9000/test나 http://localhost:9000/test.html로 접속한다.

!!!
html
  head
  body
    h1 Demo
    != yield

harp.js는 레이아웃 기능도 지원하는데 다음과 같이 Jade파일로 _layout.jade 파일을 생성하면 != yield부분에 각 파일의 내용이 들어가고 _layout.jade파일을 공통적으로 사용할 수 있다.

!!!
html
  head
    link(rel="stylesheet", href="style.css", type="text/css")
  body
    h1 Demo
    != yield
    script(type="text/javascript", src="app.js")

CSS나 JavaScript를 사용할 수 있는데 위처럼 작성했을 때 style.css파일을 만들어야 하지만 style.less나 style.styl을 만들어도 자동으로 CSS로 변환해 주고 app.js도 app.coffee로 작성해도 변환해 준다.

harp 커맨드 명령어

위에서 본 대로 harp server를 실행하면 현 위치에서 웹서버를 실행하는데 기본 포트는 9000포트이다. 이 포트를 변경하려면 harp server --port 8080과 같이 사용하면 된다. Node.js 관례에 따라 NODE_ENV=production harp server와 같이 실행해서 NODE_ENV환경변수를 production을 지정하면 LRU 캐싱을 적용한다.

harp용 기본 파일을 생성하는 기능도 제공하는데 harp init을 실행하면 다음의 4개 파일을 생성한다.

여기서 알 수 있듯이 404 파일이 있으면 404 응답에 이 파일을 사용한다.

harp compile를 사용하면 현재 폴더를 HTML, CSS, JS로 컴파일한 버전을 www폴더로 내보낼 수 있다. harp 자체로 서빙을 할 수 있지만 작성은 harp를 이용해서 jade나 less등으로 개발하고 최종 포맷은 html로 내보내서 사용할 수 있다.

그 외 기능

harp.js는 기본적으로 "설정보다 관례"를 따르고 있다. 시간이 지나면 자연히 여러가지 설정이나 기능이 더 들어가겠지만 현재는 harp.js가 가진 몇가지 기능이 있다. 앞에서는 폴더의 루트위치에 모든 정적파일을 두었지만 루트위치에 harp.json이라는 설정파일을 두면 모든 정적파일을 public폴더아래 두어야 한다.

즉 위와 같은 모양이 되고 웹브라우저의 접속은 public 하위가 제공하는 루트경로가 된다.

{
  "globals": {
    "foo"  : "bar",
    "bar": "baz"
  }
}

harp.json은 위와같은 형태가 되는데 foo, bar 변수는 Jade나 ejs 파일에서 전역변수로 사용할 수 있다. 그리고 _로 시작하는 파일은 정적파일로 제공하지 않으므로 파셜이나 메타데이터용으로 사용할 수 있다.

그리고 _data.json파일을 두어서 메타데이터로 사용할 수 있는데 예를 들어 posts폴더에 다음과 같이 만들었다고 해보자.

여기서 _data.json파일이 다음과 같이 생겼다면

{
  "post1": {
    "title": "Harp.js",
    "date": "2013-11-15"
  }
}

이 JSON의 키값이 post1과 같은 파일명을 가진 post1.jade파일에 자동으로 바인딩되어서 title과 date 변수를 사용할 수 있다.

맺음말

아직 버전이 0.9.x이기는 하고 나는 이런 류의 정적 도구를 프로덕션에서 사용하지는 않고 보통 개발용으로만 사용하기 때문에 성능에 대한 부분은 확인해 보지 않았지만 기능상으로는 최고이므로 harp.js로 갈아탔다. 개발용 뿐만 아니라 harp.js를 사용하면 간단한 정적 웹사이트나 정적 블로그를 간단히 만들어서 서비스하거나 관리할 수 있을 것 같다. 위키도 사실 harp.js를 쓰면 markdown으로 작성하고 디자인을 원하는대로 만들어서 제공할 수 있을 것으로 보인다.(난 현재 Gollum을 쓰는데 harp.js로 관리하는게 더 낫지 않을까 하는 생각을 하고 있다.)

그 외에 내가 관심가진 부분은 개발시에도 마크업개발에 이를 사용하면 어떨가 싶다. 개인프로젝트나 팀원간에 개발프로세스가 잘 밀착되어 있으면 처음부터 jade나 less로 개발할 수도 있지만 대부분의 회사 프로세스상으로는 마크업 개발자가 마크업을 해서 넘겨주면 서버개발자가 이 마크업을 서버에 연결하는 방식으로 진행되는데 이럴 때 종종 피곤한 부분은 레이아웃등에 관련된 부분이다. 보통 헤더, 푸터, 사이드 메뉴등은 공통적이므로 서버에서는 이 파일을 공통파일로 분리해서 하나로 관리하지만 HTML에는 이러한 인클루드 기능이 없으므로 페이지가 20개면 20개의 파일에 공통된 마크업이 계속 나타나고 변경시에 관리도 여러부분에 걸쳐 있으므로 관리가 쉽지 않은데 마크업 개발 자체를 이런 도구를 사용하면 좀 더 관리가 쉽지 않을까 하는 생각이 좀 들었다.(물론 해보지는 않았고 jade나 ejs를 사용해야 한다는 문제(?)는 존재한다.)