레일스에는 기본적으로 Prototype과 Script.aculo.us라고 하는 걸출한 자바스크립트 라이브러리가 내장되어 있다. 이들 라이브러리와 함께 레일스에서 제공하는 여러가지 자바스크립트 헬퍼를 사용하면 Ajax를 비롯한 멋드러진 "최첨단" 웹 애플리케이션의 작성이 "누워서 떡먹기"로 쉬워진다. 예를 들어, link_to를 remote_link_to로만 변경하면 통상적인 HTTP호출이 갑자기 "자동마술적으로" Ajax 호출로 둔갑하는 것 같은 것은 시작에 불과하다.

그럼에도 내가 레일스와 함께 사용할 자바스크립트 라이브러리로 jQuery 를 선택한 데에는 몇 가지 이유가 있었던 것 같다.

• jQuery의 조작방법이 Prototype에 비해 (내겐) 더 쉽고 직관적이었다.
• 자바스크립트를 겸손한(Unobtrusive) 방식으로 사용하는, 소위 'Progressive Enhancement'를 적용하고 싶었다.
• jQuery의 다양한 플러그인들이 마음에 들었다.
• 너무 '레일스-스러운' 방식에만 얽매이고 싶지 않았다.

물론 레일스에서 jQuery를 마치 Prototype 다루듯 사용할 수 있게 해 주는 jRails 같은 플러그인도 존재한다. 또한 Prototype 기반에서도 얼마든지 unobtrusive하게 자바스크립트를 사용할 수도 있다. (LowPro나 UJS 레일스 플러그인 같은 것을 사용하면 된다). 그렇지만 그럴 바에야 레일스 관례를 따르는게 낫지 않을까. Prototype을 쓸건가 아니면 jQuery나 Mootools 같은 다른 라이브러리를 사용할 거냐는 물론 다분히 선택의 문제이며 개인적인 취향의 문제인 경우가 많다. 그렇지만 적어도 레일스 개발자라면, 레일스가 가져다 주는 편안함과 관례에 너무 익숙해 버린 자기 자신을 뒤돌아 보는 의미에서라도, 한번 쯤은 "익숙한 것과의 결별"을 시도해 봄직도 하다.

참고로 내 레일스 애플리케이션에서 jQuery로 Progressive Enhancement를 해 나가는 과정을 간략히 소개한다.



1. 통상적인 방식으로 HTML 코드를 작성한다. (물론 레일스니까, 레일스 폼 헬퍼를 사용하며, 또한 리소스 접근은 REST 방식을 따른다)

뷰는 다음과 같다. 전체 뷰가 아닌, 컨셉만 보인 것이다.

<%= link_to "덧글(#{post.comments.size})", comments_path(post), :class => 'comments_link' %>

<%= render :partial => 'posts/comment', :collection => post.comments %>

<% form_for :comment, comments_path(entry), :html => { :class => 'comment_form' } do |form| %>
<%= form.text_area :body, :rows => 2 %>
<%= submit_tag '저장' %>
<% end %>

2. 제대로 잘 작동하는지 확인했다면, 이제 jQuery로 Progressive Enhancement한다.

우선 새로운 댓글을 추가하는 부분을 만들자. jQuery의 Form 플러그인을 사용한다.

$('.comment_form').ajaxForm({
success: function(data, status, form) {
form.siblings('ul').append(data)
},
data: {ajax: true},
clearForm: true
});

작동하는 걸 확인했으면, 이번에는 댓글을 삭제하는 부분을 작성해 보자. 동적으로 이벤트를 바인드하기 위해 jQuery LiveQuery 플러그인을 사용한다.

$('.delete_comment_link').livequery('click', function(){
if(window.confirm('Are you sure?')) {
var link = $(this);
$.ajax({
type: 'POST',
url: link.attr('href'),
data: '_method=DELETE&ajax=true',
beforeSend: function(){ link.prepend('<img src="/images/loader.gif"/>') },
success: function(html){ link.parent().remove() }
})
}
return false;
});

컨트롤러는 통상적인 REST 컨트롤러와 다를 바 없다. 다만, ajax호출인지 아닌지를 파악하여 각각에 따라 다르게 렌더링하는 부분만 더하면 된다.