뷰 스크립트 간소화에 대한 이런저런 생각들

기본

최근에 두달 정도 진행한 프로젝트(댓글에 소셜을 추가)를 마감하고 든 생각 중 하나는 ‘자바스크립트 복잡도를 어떻게 줄일 수 있을까?’ 였습니다. 물론, jQuery를 사용하긴 하지만 뷰의 여러가지 인터랙션을 처리하다 보면 jQuery도 금새 복잡해지고 길어지더라구요. jQuery로 만들어진 스크립트가 복잡해 지고 있다는 기분이 드는 시점부터는 jQuery method chaining 도 무작정 좋아 보이지 만은 않았습니다. 쓰기엔 편하지만 이게 뭐하는 코드인지 이해하는 건 또 다른 문제 같구요. 그래서 ‘이 메소드 체이닝을 묶어서 적당한 이름의 함수로 빼볼까?’ 하는 생각도 많이 했었네요.

이런저런 고민 끝에 요새 JavaScript 쪽에서 많이 나타나고 있는 MV* 프레임워크에 눈이 가기 시작했습니다. 그런데 이게 종류가 원체 많다보니 혼란스럽기만 하더라구요. 그래서 봄싹 그룹스에 물어봤었고 많은 분들이 다양한 답변을 달아주셨습니다 🙂

답변을 정리해 보면..

1. AMD로 스크립트를 모듈화 시켜라

2. 프레임워크 적용이 배보다 배꼽이 더 클 수도 있다

3. Ember.js/KO/Backbone 추천

사실 저도 Ember.js에 흥미를 가지고 있었는데요.. 간단하다고 주장하는 Ember.js 홈페이지와는 다르게 예제를 봐도 복잡해 보여서(…) Require.js 부터 살펴봤습니다.

Require.js는 define() 으로 스크립트 덩어리를 모듈화 시켜놓고 require() 로 필요한 모듈만 호출해서 사용할 수 있습니다. 사용해 보니 괜찮았습니다만 ‘스크립트의 복잡성을 해결하는데 정말 큰 도움이 되는가?’ 는 잘 모르겠더라구요. 스크립트를 모듈화 시켜놓고 재사용 하는 측면에서 봤을 땐 당연히 좋겠지만 근본적인 스크립트 로직을 줄일 수 있는 방법은 아니라고 생각이 들었습니다.

그래서 Ember.js 를 살펴보기 시작했는데요. 이거 상당히 흥미로운 프레임워크 입니다. 먼저, Ember의 핵심은 자바스크립트를 OOP처럼 사용할 수 있도록 만들었다는 것에 있는 것 같습니다. 보통 서버쪽은 OOP인 경우가 많으니 거의 서버쪽 클래스와 매핑한다는 기분으로 스크립트 작성을 할 수 있더라구요. 그리고 jQuery 쓰면서 가장 많이 하는 작업 중 하나가 Ajax로 서버에서 데이터 가져와서 뷰에 보여주는 것인데요. jQuery로 이 작업을 하려면 데이터를 DOM에 매핑하는 부분이 손도 많이가고 복잡한데, Ember.js에 통합된 Handlebars.js라는 뷰 템플릿을 사용해 굉장히 쉽게 할 수 있습니다.

참 좋죠. 그런데 몇 가지 걸리는 부분이 있습니다.

첫 번째로 뷰 템플릿인데요. 사실 서비스 규모가 어느정도 되면 뷰 템플릿은 선택이 아닌 필수라고 생각합니다. 매번 페이지가 반복되는 부분 없이 다르진 않을 테니까요. Handlebars.js, Thymeleaf 등 요새 뷰 템플릿을 보면 내츄럴 템플릿을 강점으로 내세우는 것 같습니다. 그런데 jsp와 태그 라이브러리를 쓰다보면 이런 내츄럴 템플릿의 장점을 100% 활용하기 어려운 점이 있다는 거죠. 결국 내츄럴 템플릿을 최대한 활용하려면 서버 없이도 볼 수 있는 html로 뷰가 만들어져야 하는데 그러면 그동안 잘써온 태그 라이브러리는 어떻게 할것인지.. 그리고 Ember.js 를 사용하려고 보면 기존에 jQuery로 만들어둔 로직들을 Ember의 MVC안에 녹여 넣어야 합니다. 즉, 이건 이거대로 저건 저거대로가 아니라 Ember.js를 적용한다는 건 뷰 설계부터 Ember.js 에 맞게 만들어 져야 한다는 거죠. 왜냐면 라이브러리가 아니라 프레임워크 이니까요.

이런 맥락에서 jsp+jstl이 기존 방법이라면 내츄럴 템플릿 + js framework가 새로운 개발 트렌드라고 할 수 있지 않을까? 하는 생각을 해봅니다.

상황이 이렇다 보니 기존에 만들어진 서비스를 이런 형태로 녹여내는 건 정말 어려운 작업일 것 같습니다. 새로운 프로젝트에 사용하기 위해선 기존에 태그 라이브러리로 하던 작업을 다른 곳에서 처리할 수 있도록 해야할 테구요. 이 부분이 잘 커버된다면 서버단은 JSON만 던지게끔 설계하고 Ember.js(또는 비슷한 js framework)를 사용할 수 있는 환경에선 부산물이 거의 없는 시맨틱하고 퓨어(?)한 마크업에 MV* js 프레임워크 사용으로 획기적으로 스크립트를 줄일 수 있지 않을까.. 하고 생각해 봅니다.

Advertisements