본문 바로가기

HTML5_JS_CSS

자바스크립트 프레임웍 제대로 알고 사용하기

 

jQuery라는 것을 많이 들어보셨을 것 같습니다. 자바스크립트 프레임웍이라고 하는 것인데요, 자바스크립트 라이브러리라고도 합니다.

이번엔 자바스크립트 프레임웍이 어떤 특징을 가지고 있고, 어떤 장점을 가지고 있는지 한번 확인하겠습니다.

자바스크립트 프레임웍의 올바른 이해를 통해 100% 제대로 활용할 수 있는 계기가 되면 좋겠습니다.
 

자바스크립트 개발은 서버사이드 개발과 비교할 수는 없지만 결코 더 쉽지 않은 이유가 많습니다.

어디에서 명세화 되어 있지 않은 브라우저 호환성(compatibility) 문제의 경우 개발자의 디버깅으로 하나하나 해결해야 합니다. 또한 자바스크립트의 구현은 어찌나 어렵고 귀찮은지, 특히 OOP개념으로 구현된 코드를 수수정하거나 읽는 것만으로도 힘이 듭니다.
이 뿐만이 아닙니다
. 디버깅은 정말 환상적입니다. 최근에서야 각 브라우저 벤더사들이 소위 개발자툴을 함께 제공하고 있긴 합니다만
아직도 디버깅을 어떻게 해야 하고 오류메시지를 어떻게 이해하고 해결해야 할지는 많은 UI개발자들을 지치게 만들고, UI개발을 꺼려하게 되는 가장 큰 이유이기도 합니다.

하지만 이러한 문제를 조금씩 줄여 나가는 노력이 생겼습니다.

호환성 문제를 모아서 라이브러리화 시키고, 자주 쓰는 함수를 재사용할 수 있게 하며, 쉽게 OOP개념의 코드를 구현 할 수 있도록 일정수준의 패턴을 알려주기도 합니다. 본질적인 자바스크립트 개발의 어려움(자바스크립트의 특성을 이해해야 하는 어려움에서 출발)을 해소해주진 못하지만, 정말 편리하게 UI개발을 해주는 것들이 나왔습니다.

JQuery가 대표적인 자바스크립트 프레임웍 입니다. (놀랍게도 최근 1-2년 이야기 입니다)

물론 아직까지 YUI, prototype, dojo, mootools, extJs등이 건재하며 비슷하면서도 툴마다의 특성과 철학을 가지고 유지되고 있습니다.

 

아래 표는 최근의 추세를 보여줍니다. jQuery  사용성 과 속도라는 핵심가치에서 모두 우수한것임에 틀림 없는것 같습니다


<점유율 비교>

 


자바스크립트 프레임웍이 가지고 있는 장점과 특징을 꺼내서 정리해보도록 하겠습니다
.

 

호환성(compatibility) - 가장 어려운 UI개발자의 고민을 해결
브라우저는 절대 표준화되지 않을 것 입니다. 심지어 HTML5라는 스펙은 표준을 위한 것이라기 보다는 브라우저의 native한 성격을 최대한 활용하기 위해서 나온 것일 뿐 입니다. 현재 draft상태의 많은 스펙을 마치 표준인 것처럼 브라우저 사들이 경쟁적으로 도입할 것이며, 새롭고 편리한 기능은 누가 먼저랄 것도 없이 먼저 반영하여 릴리즈 할 것 입니다. 그중에 메이저급 기능이라면 HTML6이라는 이름으로 오픈 될 수도 있으니 놀라지 마시기 바랍니다. 아무튼 이런 과정에서 새우등이 터지는 겪이니 개발자는 인기있는 브라우저가 잘 동작하게 코드를 다듬어야 합니다.

자바스크립트 프레임웍은 이런 짓을 누구보다 빨리 반영해주고 있습니다. 대부분의 호환성 문제를 고민하지 않아도 좋습니다.

 

최신성 - 최신 브라우저와 기기를 지원

새로운 브라우저와 기기가 하루가 멀다고 새로나오고 업그레이드가 되고 있습니다

HTML5 새로운 스펙을 도입하고 싶고, 아이패드와 같은 새로운 기기에서 본인의 코드가 정상적으로 동작하기 위해서는 코드의 수정이 불가피 합니다. 하지만 프레임웍에서는 이런 부분을 가장 빨리 지원해주고 있습니다.  HTML5 input Type에는 datetime이나 email, range등 자바스크립트로 문자열제어를 통해서 어렵게 입력값조정을 했던 것을 기본 type으로 지원해주고 있습니다(대부분의 프레임웍은 form 조작을 쉽게 해줍니다). 이런 부분은 프레임웍을 사용함으로써 보다 쉽게 사용이 가능합니다.

 

안전성 - 버그 없이 빠른 렌더링 보장

자바스크립트의 대부분 작업은 사실 HTML 이나 DOM을 조작하는 것입니다. 이런 부분은 selector라는 native한 속성을 기반으로 브라우저에서 편리하게 다양한 기능을 제공합니다. 이런 것을 사용자가 보다 직관적으로 쉽게 사용할 수 있도록 다양한 selector를 지원하고 있습니다. 이런 부분의 지원없이 DOM API만을 가지고 직접 DOM Tree를 탐색하는 것은 성능에 문제를 일으킬 수 있습니다.

프레임웍의 사용으로 반복적인 코드를 상당히 줄일 수 있습니다. 결국 LOC(Line of code)의 경량화로 네트웍비용까지 감소하게 됩니다.

안정성에서 마지막으로 강조 하고 싶은 것은 축적된 노하우 입니다. 자바스크립트 프레임웍이 나온지는 얼마 되지 않았습니다. 하지만 반면에 자바스크립트라는 언어의 버전이 변경되는 등 큰 변화는 없었습니다. 4-5년된 자바스크립트 프레임웍의 나이는 결코 적지 않습니다. 그 동안에 잠재된 문제점은 모두 발견되어 수정되었다고 볼 수 있습니다. 다만 새로운 브라우저와 기기로 인한 호환성 문제와 새로운 기능의 불완전함등만 있을뿐입니다. 이제 대부분의 프레임웍이 여러분의 서비스를 주요한 이슈를 발생시켜 해치지 않을 것 입니다.

 


 

생산성- 보다 빠르게

프레임웍은 Dom조작뿐 아니라, 특정 Element에 이벤트를 바인딩하는 과정 , Ajax통신의 절차적인 프로세스등 일관전 구조에 따라 동적인 처리를 지원합니다. 결과적으로 이런 규칙으로 인해 협업 개발시(collaboration)에 커뮤니케이션 비용을 줄일 수 있습니다

그리고 단순한 스트링을 조작하는 유틸리티 함수등의 사용으로 중복코드를 줄일 수 있으며, 이벤트 바인등하는 과정에서 매크로를 사용하여 개발하는 것을 활용하면 코드량을 확실히 줄일 수도 있습니다 역시 결국 보다 빠르게 개발할 수 있습니다.

마지막으로 다양한 UI Component(widgets)를 사용할 수 있습니다. 디자인요소에 따라서 코드의 수정이 불가피한 경우가 많지만 대부분의 UI Component 사용은 UI 개발을 매우 빠르게 해주는 것임에 틀림 없습니다. 대부분의 프레임웍은 UI Component를 공식관리해주고 있으니 더욱 믿고 쓸수 있습니다.

 

그외

같은 이야기이지만 코드의 유지보수ㅡ가 용이한점, 일관된 구조로 인해 가독성이 좋아지는 점 등의 장점이 있습니다.

 

대부분의 프레임웍은 이러한 장점을 모두 가지고 있습니다. 적은 부분의 개발 코드에서도 프레임웍을 사용하는 것을 권장해드립니다.

혹시라도 프레임웍 사용을 하지 않는다고 하여도 프레임웍기반의 마이그레이션을 하는 방법은 어렵지 않으며, 선택적인 기능만 프레임웍기반으로 개발할 수 있습니다.

다만 여러 프레임웍을 동시에 사용하는 것은 자제해야 합니다.

일시적인 비용일지라도 하나의 프레임웍기반으로  마이그레이션을 하여 사용하는 것이 좋습니다. 이런 과정이 어렵다면 프레임웍이 제공하는 충돌방지 방법(namespace로 감싸는 방법등)을 사용하시면 됩니다.

 

아직도 프레임웍에 대한 어려움을 느끼셨다면 이번기회에 프레임웍을 사용하여 개발이 힘을 쏟아 보시는것이 어떨까 합니다 ^^

 

 

반응형