Rails의 JavaScript 처리 문제점
웹 애플리케이션은 HTML, CSS, JavaScript, Ruby, SQL 등 다양한 언어로 구성된 다국어 환경입니다. Rails는 Active Record를 통해 SQL과의 상호작용을 성공적으로 추상화했지만, RJS 헬퍼를 사용한 JavaScript 생성 방식은 여러 문제를 야기합니다. JavaScript의 라이브러리와 사용 패턴은 Ruby보다 훨씬 빠르게 진화하고 있어, Rails 프레임워크가 모든 변화를 따라가기 어렵습니다. 특히 Rails 2의 RJS는 JavaScript 코드를 뷰(view)에 분산시켜 테스트를 어렵게 만들며, Selenium과 같은 통합 테스트만으로는 수많은 상호작용을 검증하기 비효율적입니다.
비침투적 JavaScript로의 전환
이러한 문제점을 해결하기 위해 발표자는 비침투적 JavaScript 패턴을 제안합니다. 핵심적인 내용은 다음과 같습니다.
-
RJS 사용을 중단하고, 순수한 JavaScript 함수를 직접 작성합니다.
-
JavaScript의 프로토타입 기반 특성을 고려하여 함수들을 클래스(sets)로 구성합니다.
-
클래스들을 동작 및 위치별로 체계적으로 정리합니다.
-
모든 JavaScript 코드를 테스트 주도 방식으로 개발합니다.
-
Rails 3는 이러한 비침투적 JavaScript 방식을 채택하여 개선될 예정입니다.
실제 코드 예시 및 구조화
구체적인 예시로, link_to 헬퍼에서 인라인 JavaScript를 제거하고 대신 CSS 클래스를 부여하는 방식을 보여줍니다. JavaScript 코드는 public/javascripts 디렉토리에 별도의 파일(project_form.js)로 분리하여 관리합니다. 이 파일 내에서 ruby_kyi.project_form과 같은 클래스를 정의하고 initialize, removeTask 등의 함수를 포함합니다. document.ready 이벤트 시점에 해당 클래스를 초기화하여 동작을 DOM 요소에 연결합니다. 여러 페이지에서 동일한 기능을 사용할 경우, project_edit_page, project_new_page와 같은 페이지별 클래스를 생성하여 project_form 객체를 초기화하는 방식으로 확장성을 확보하여 코드의 복잡성을 관리할 수 있습니다.
JavaScript 테스트 프레임워크 Jasmine
JavaScript 테스트를 위해 Pivotal이 개발한 오픈소스 BDD(Behavior-Driven Development) 테스트 프레임워크인 Jasmine을 소개합니다. Jasmine은 RSpec과 유사한 스타일을 가지며, JavaScript 코드를 JavaScript로 테스트하는 철학을 따릅니다. 특히 DOM에 의존하지 않아 웹 이외의 JavaScript 환경에서도 테스트가 가능합니다. gem install jasmine으로 설치하며, spec/javascripts 디렉토리에 스펙을 작성합니다. describe, it, expect 및 매처(matcher)를 사용하여 동작을 기술하며, 사용자 정의 매처도 지원합니다. Jasmine은 내장 서버를 통해 브라우저에서 테스트를 실행할 수 있으며, 지속적 통합(CI)을 위한 Selenium 연동 및 Johnson을 이용한 헤드리스(headless) 테스트 플러그인도 제공합니다. Q&A 세션에서는 Jasmine이 Ajax 호출이나 시각적 효과와 같은 부수 효과(side effect)를 스파이(spy)와 목(mock)을 통해 효과적으로 테스트할 수 있는 기능도 설명합니다.