jQuery vs Angular 2 코드 비교

참고: angular2에 대한 연재는 여기를 참조해 주세요. 틀린 부분이나 의견, 피드백은 언제든지 환영합니다. 

들어가기 전에

이 포스팅은 지난 2015 나는 프로그래머다 컨퍼런스 중 React 라이브 코딩에서 보고 알게 된 jQuery versus React.js thinking 글에서 출발하여 (원저자의 허락을 받아) Angular2 버전으로 쓴 것입니다.

This post is the result affected by original post “jQuery versus React.js thinking” that I found on React.js live coding session in “I am programmer” conference. I wrote this post with the permission of original blog post’s author.

이 글에서는 아주 간단한 예제를 jQuery와 Angular2로 각각 구현하여 어떤 차이점이 있는지 확인해 보려고 합니다. jQuery와 Angular2의 직접적인 비교라기 보다 최근의 프론트엔드 프레임워크가 어떤 방식으로 어플리케이션을 구성하는지 확인하기 위한 목적의 글입니다.

 

예제 설명

예제는 jQuery versus React.js thinking과 동일하며 아래와 같은 기능으로 이루어져 있습니다.

  • 아이템의 목록이 있으며 아이템은 detail 정보를 기본적으로 드러내지 않음
  • 사용자가 아이템 클릭 시에 해당 아이템의 detail 정보가 펼쳐짐
  • 이 때 클릭 안 한 아이템들은 grey로 색 변경
  • 클릭한 아이템을 재클릭 시, detail 정보는 다시 감추고 원래 상태로 돌아감
  • 클릭해서 펼쳤던 아이템 외에 다른 아이템 클릭 시 펼쳤던 아이템은 닫히고 클릭한 아이템을 펼침

 

jQuery 방식

jQuery 방식의 소스는 원 글의 소스와 동일합니다.

라이브 예제
JS Bin on jsbin.com

jQuery 방식의 구현은 먼저 아이템 정보와 상태가 그대로 html 파일 내 DOM에 분산되어 있습니다. 또한 데이터와 프레젠테이션 로직이 한 곳에 뭉쳐 있습니다. 각 상태를 변경하기 위해서는 “li”, “:hidden”과 같은 셀렉터를 사용해서 접근해야 합니다. 기능이 복 잡해 질수록 DOM에 접근하는 코드로 인해 리팩토링과 개선이 쉽지 않습니다.

Angular 2 방식

Angular2는 컴포넌트 기반으로 앱을 구성하게 되어 있습니다. 예제가 간단하기 때문에 하나의 파일 안에서 모든 기능을 구현해 넣을 수 있습니다. 하지만 가장 Angular 2 스타일 다운 특징을 보여주고자 각 요소를 최대한 기능에 맞게 나누었습니다. 또한 예제는 Javascript에 타입 등의 syntax가 추가된 Typescript로 구현되어 있습니다.

라이브 예제

product.component

Component 클래스 안에 컴포넌트를 구성하는 핵심 정보들이 다 있습니다. 먼저 6번 라인의 templateUrl을 통해서 해당 컴포넌트의 뷰를 “products.component .html”에 정의하고, 7번 라인에  styleUrls에서 해당 컴포넌트를 위한 스타일 파일을 선언해 두었습니다.

아이템 데이터는 ProductService라는 클래스에 있습니다. Angular2에서는 실제 비즈니스 로직은 Service 클래스에 담도록 안내하고 있습니다. 그리고 Service를 Component에서 가져다 쓸 때에는 간단한 선언을 통해서 자동으로 Service객체를 주입받습니다. 8번 라인이 Component에서 사용할 의존성을 선언한 것입니다.  8번 라인과 같이 providers에 의존성 선언 후에는 construtor 메서드 안에 파라미터로 해당 의존성을 선언해 주면 의존성 주입이 자동으로 이루어집니다.

product.service

서비스 클래스는 아이템 데이터를 반환하는 getProducts 메서드 하나 만을 갖고 있습니다. ES6에 추가된 const 키워드를 사용하여 상수로 mock 데이터를 선언하여 메서드에서 반환합니다. 실제 상황에서는 getProducts 메서드 안에서 ajax 호출을 하도록 구현합니다.

2번 라인에서 import한 Product와 12번 라인에 메서드의 반환타입으로 Product[]로 되어 있는 것은 아이템 데이터의 타입을 명시한 Product 클래스 정보입니다. Typescript는 반드시 타입을 필요로 하기에 다음과 같이 모델 클래스를 선언하여 사용합니다.(자세한 내용은 연재 중인 Angular.io 글 목록을 참고해 주세요.)

 

Angular2 방식에서 눈에 띄는 점은 jQuery방식과 달리 명시적으로 파일단위 관심사의 분리가 이루어진다는 점입니다. Angular2는 다음과 같은 요소들로 관심사를 나눕니다.

  • template: 뷰 역할
  • component: 뷰와 모델, 상태 관리
  • service: 비즈니스 로직

jQuery 방식에 비해 파일 개수도 늘어나고, 코드의 양도 늘어나지만 Angular2 방식이 기능 개선 및 유지보수에 훨씬 더 효율적인 방식입니다. 또한 Angular2는 독립적인 컴포넌트 방식으로 개발하기에 재사용에도 용이하며, 컴포넌트별 독립적인 테스트까지 가능하여 jQuery 방식에 비해 이점을 갖는 부분이 많습니다.

결론

웹 어플리케이션의 복잡도가 증가하면서 지속적인 개선 및 유지보수를 고려할 때, 일정 규모 이상의 웹 어플리케이션 개발 시 프레임워크 사용은 더 이상 선택사항이 아니라고 생각합니다.

이 글은 jQuery와 Angular2와 모습을 직접적으로 비교한 것은 아닙니다. 그보다 구현하려는 대상과 목적에 따라 적절한 선택이 필요함을 보여주려고 한 것입니다. 여러 프론트엔드 프레임워크 중에서 Angular2 역시 앞으로 주목하고 관심가질 만한 좋은 기술이라는 것을 알려드리면서 글을 마칩니다.

참고: jquery-versus-react-thinking

Angular2 글 목록보기