앵귤러(Angular)는 클라이언트 (웹) 애플리케이션을 개발을 위해 만들어진 오픈소스 프레임워크입니다. 최근의 프론트엔드 라이브러리 (또는 프레임워크)로 React, Vue와 함께 자주 언급되고 있습니다. 이번 글에서는 앵귤러가 무엇인지, 특징과 장, 단점은 무엇인지에 대해서 살펴보도록 하겠습니다.
1. AngularJS로 시작하다.
AngularJS는 단일 페이지 애플리케이션 (SPA, Single Page Application) 방식의 프론트엔드 개발을 위한 자바스크립트 프레임 워크 (또는 라이브러리)입니다. AngularJS는 동적 콘텐츠 작성을 하는 데 있어서 (당시로는) 획기적인 접근 방식으로 유행을 불러일으킬 만큼 많은 수요가 있었습니다.
자바스크립트에서 처리하던 부분의 많은 부분을 HTML 템플릿 내로 가져오면서 자바스크립트는 단순화 되고, 데이터의 바인딩도 자유로워서 많은 편리함을 가져다주었습니다.
하지만 권불십년 화무십일홍 (權不十年 花無十日紅).
영원한 강자는 없는 법.
이제는 React나 Vue.js에 밀리고, 앵귤러 생태계도 앵귤러 후속 버전(Angular 2+)으로 전환되고 있는 만큼 새로운 프로젝트를 AngularJS를 사용할 일은 거의 없을 것 같습니다.
💡 AngularJS의 간략한 history
- Angular.JS는 2012년에 공식적으로 V1.0이 공개되었습니다.
- Angular2 정식 버전이 공개된 이후에도 지속적으로 업데이트를 진행 중입니다.
- 현재 마지막 버전은 2020년 6월 1일에 release 된 1.8.0입니다.
- 2021년 6월까지 support 예정입니다.
- 더 이상의 breaking change는 없습니다.
AngularJs의 LTS 계획에 대해서는 아래 링크를 참고하세요.
Stable AngularJS and Long Term Support
AngularJS is planning one more significant release, version 1.7, and on July 1, 2018 it will enter a 3 year Long Term Support period.
blog.angular.io
2. 새로운 Angular의 등장
Angular는 AngularJS의 후속 버전으로, 2016년 9월, Angular 2 버전 (공식적으로 Angular 2 버전 이상을 Angular라고 부르고 Angular1 은 AngularJS로 부릅니다)이 처음 공개되었습니다. 현재 시점(2020년 6월)에는 Angular 9가 release 되어 있고 version 10이 준비 중입니다. (update: 2020년 6월 24일에 Angular 10이 release 되었습니다)
Angular는 AngularJS의 후속 버전이지만 눈곱만큼도(!) 호환성이 없어서 개발자들의 원성이 자자했습니다. (겉으로 보기에는 오히려 Vue.js가 angularJS와 더 비슷해 보이는 것 같습니다.)
템플릿의 문법도 형태는 비슷하지만 세부적으로는 기존과 완전히 다르게 변경되었고, 타입스크립트 (TypeScript)를 기본으로 사용하도록 되어있습니다. 코드의 생김새도 기존의 자바스크립트보다는 오히려 자바 등과 비슷한 것 같습니다. 또한 기본적인 promise 대신 RxJS를 사용한 Observable 개념을 전면에 배치하였습니다.
사실상 이름 빼고는 모든 것이 전혀 다른 프레임워크입니다.
거의 발가락이 닮았다 수준 같습니다. (다만, AngularJS 1.5에 도입한 component 개념은 다소 비슷한 면이 있는 것 같습니다)
초기에는 같은 Angular 내에서도 버전업이 되면서 breaking change가 종종 있어서 상당히 짜증을 불러왔지만, 많은 시간이 흐른 만큼 현재는 비교적 안정적이고 체계적으로 관리되고 있는 것 같습니다.
3. Angular의 특징
- 완전한 프레임 워크로, 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공합니다.
- TypeScript를 사용합니다. 초기에는 JavaScript로도 할 수 있다고 광고했지만 사실상 과대광고라고 생각됩니다.
- Angular CLI를 제공하여 개발환경을 지원합니다. 파일 생성, 빌드, 패키징, 라이트 서버 기능 등 개발에 필요한 거의 모든 기능을 자체적으로 제공합니다.
- 모듈과 컴포넌트 기반으로 동작합니다.
-
웬만한 기능의 라이브러리는 모두 포함시켜서 자체적으로 제공합니다. (라우팅, HTTP, Form 등등)
- 기본적으로는 단일 페이지 애플리케이션 (SPA, Single Page Application) 개발을 위한 프레임워크입니다. 다만, Server Side Rendering을 위한 기능을 구비하고 있습니다.
4. Angular의 장점
그러면 Angular의 장점은 무얼까요? 웹 검색을 해보면 일반적으로 나오는 내용들에 대해서는 일단 패스하고, 그다지 고급스럽지 않은 개발자로서 사용하면서 느낀 점에 대해서 간략히 다루겠습니다.
프레임워크다.
프레임워크라는 이름에 걸맞게 개발에 필요한 모든 것이 거의 갖추어져 있습니다.
라우팅, HTTP 등 애플리케이션 개발에 필요한 대부분의 기능들은 내부적으로 포함되어 있습니다. 전문가들이 알아서 친절하게도 이것저것 모두 넣어 놨습니다. 심지어 UI를 위한 컴포넌트 라이브러리도 공식적으로 제공하고 있습니다.(Angular Material)
하다 못해서 코딩 스타일도 가르쳐줍니다. (https://angular.io/guide/styleguide)
유지 관리가 용이하다.
코드 유지 관리 성을 높이기 위해 TypeScript를 사용하고, 또한 (일단은) 당분간은 안정적으로 지속적인 기술 지원이 이루어지고 있기 때문에 유지 측면에서 장점이 있습니다. 약간의 자유도를 희생하긴 하지만, 앵귤러 스타일에 맞추어 코딩해야 하기 때문에 누가 코딩하더라도 코드의 변이가 크지 않을 것 같습니다. (Plain JavaScript의 경우처럼 천차만별이 아니라)
아무래도 유지 보수 측면에서 좀 더 용이합니다.
초기 배포는 어려울지 몰라도!
모든 길은 Angulr-cli로!
프레임워크답게 Angular-cli를 이용한 여러 가지 편리한 기능들이 있습니다.
- 프로젝트 생성을 도와줍니다. 명령어 하나로 프로젝트를 생성하고 알아서 모든 의존성 패키지를 함께 설치해줍니다. 모듈/컴포넌트/디렉티브/서비스 등을 생성하는 역할 또한 Angular cli로 할 수 있습니다.
- 라이트 한 서버를 제공합니다. 별다른 설정에 대한 노력 없이 간단하게 서버를 실행하여 개발을 진행할 수 있습니다. 코드를 수정하면 즉시 변경사항이 반영되어 웹페이지에서 렌더링 됩니다. Node.js의 nodemon이나 기존 client의 livereload와 비슷하게 생각하면 될 것 같습니다.
- 기본적으로 Webpack을 내장하고 있으며 알아서 빌드까지 수행합니다. Typescript를 컴파일하고 자바스크립트를 압축하는 것까지 자동으로 해주며, (저와 같이) 웹팩에 대한 지식이 전혀 없어도 사용 가능합니다.
- 테스트도 할 수 있어요!
이와 같이 전체 개발 프레임을 구성하기 위한 환경을 갖추기 위한 노력 비용이 절감됩니다.
구글이 뒤를 받치고 있다. (일단은)
이것이 과연 장점일까? 하는 의구심이 있긴 합니다.
다만 일단은 구글이 단기간에 망할 것 같지는 않고, 뭔가 오랜 기간 서포트할 것 같은 근거 없는 믿음을 줍니다.
물론 구글은 뒤집어엎는 것도 생각보다는 잘하는 것 같아서...
언제 갑자기
여기 더 좋은 물건이 있는데!
하면서 새로운 거 들고 나올지도 모르겠습니다.
AngularJS가 그렇게 사라진 것처럼...
모바일 앱 용 대안이 있다 (Native Script, Ionic)
Web 개발에 사용된 내용을 Mobile App에 적용할 수 있습니다. Native Script는 사용해본 적이 없어서 모르겠지만, Ionic은 비즈니스 로직을 거의 90% 재활용이 가능합니다. 꽤 괜찮은 수준의 프로토타입을 빠르게 만들 때 매우 좋습니다. 특히 아이폰에서는 웹뷰 자체가 부드러워서 복잡한 앱이 아니면 네이티브에 크게 꿀리지 않았던 것 같습니다. 최근에는 잘 모르겠네요!
또한 항상 앱을 대체할 잠재력을 지니고 있는 (몇 년째 잠재력만...) PWA (Progressive Web App)에 대한 대응 기능도 갖추고 있습니다.
물론 React나 Vue 대비 장점은 아닙니다. 위의 툴들도 슬슬 다른 라이브러리를 지원하기 시작했고...
React 쪽에는 React Native라는 걸출한 놈이 있어서 상대적으로는 조금 꿀리는 것 같습니다.
5. Angular의 단점
좋은 점만 있다면 이미 많이들 사용하겠죠? 근데 현실은 그렇지가 않네요...
단점을 알아볼까요?
프레임워크다.
모든 것은 정해져 있고 일반적인 앵귤러만의 패턴이 있습니다. 앵귤러 스타일을 다소 강요하는 측면이 있습니다.
워낙에 기본적으로 제공되는 게 많다 보니 다른 선택의 여지가 없다는 점도 있긴 합니다. 혹시 뭔가 기본 방식이 마음에 안 들더라도 써야 합니다.
개인적으로는 고오급 개발자도 아니고, 게으른 관계로 선택은 앵귤러에 맡기는 것이 편안하네요...
학습 곡선
인터넷에 보면 앵귤러는 어렵고 복잡하고 공부할 것도 많다고 흔히 들 이야기합니다.
진짜냐고요..?
맞습니다.
실제로 공부할 양이 많긴 합니다. 앵귤러는 "내가 너희를 위해 모든 것을 제공 하노라!" 라는 정신으로 무장한 건지, 정말 소소한 것들에 대해서까지 많은 것을 제공합니다. 애초에 시작 시점에 배워야 하는 것들이 많긴 합니다.
처음 접근을 위해서 뭔가 공부해야 할 사항이 늘어나는 것 같습니다.
Angular CLI, Typescript, Module, Component, RxJS, Form, Router, Pipe, directive...
그리고 나만 그런 걸지 모르겠지만...
공식 문서가 깔끔하게 잘 정리되어 있는 것 같긴 한데, 이상하게 가독성이 떨어집니다.
(앵귤러 문서뿐만 아니라 구글의 문서는 이상하게 나랑 안 맞아요 ㅜ.ㅜ)
다만, 꼭 100%를 습득하지 않고 20% 정도만 소화해도 어지간한 코딩은 가능하지 않을까 싶긴 합니다.
난이도 부분에 대해서는 추후에 따로 작성해보겠습니다.
Hello World? Hell World!
jQuery 라이브러리 링크하듯이
<script src="angular-9.4.1.min.js"></script>
이런 식으로 되면 얼마나 좋겠습니까만은...
프레임워크답게, 기본적으로 앵귤러 프로젝트를 생성하면 기본 폴더 용량이 어마어마합니다. (대부분의 용량은 node_modules가 차지합니다)
물론 빌드 후 결과물은 작습니다만, 어쨌든 처음 접근을 위해서는 꽤나 많은 자원을 필요로 합니다.
소외감(!)
일단 앵귤러를 쓰기 시작했다면!
React나 Vue와 비교한 내용을 검색을 해보고자 한다면 웬만하면 하지 않는 것이 정신 건강에 좋습니다.
뭔가 앵귤러에 원한이 맺힌 글들이 많습니다. ^^;
React와 Vue의 경우, 서로 찬양하는 글들이 난무하고 있지만 앵귤러 찬양글은 좀처럼 찾아보기 어려우며 오히려 저주스러운 글들이 심심치 않게 발견됩니다.
검색해보면 "내가 앵귤러를 때려친 이유", "앵귤러에서 Vue로 이동한 이유", "리액트가 앵귤러보다 좋은 이유" 등등 글들이 가득합니다. 내가 리액트, 뷰를 버리고 앵귤러로 온 이유! 이런 참 찾기 힘듭니다. ㅎㅎ
뭔가 모르게 소외감을 느낍니다. ㅎㅎ
그래도 요즘은 좀 나아진 것 같습니다.
하지만 만족도는...
출처: https://2019.stateofjs.com/front-end-frameworks/
AngularJS에서 단절된 것의 영향도 포함된 게 아닐까 싶기도 합니다만.
SEO (Search Engine Optimization)
기본적으로 SPA (Single Page Application) 이기 때문에 SEO 측면에서 불리한 면이 있습니다. 앵귤러의 문제점이라기보다는 SPA 방식의 단점이라고 볼 수 있겠네요.
보통 검색엔진이 크롤링한 후 Javascript를 실행하지는 않기 때문에 대부분의 검색 엔진은 제대로 페이지를 분석하기 어렵습니다. 물론 최근의 구글 검색은 SPA에 대해서 보완이 되고 있다고는 하지만 검색 포털이 구글만 있는 것도 아니고...
SPA에 대한 자세한 내용은 아래 글을 참조하세요!
[웹/앵귤러 (Angular)] - [앵귤러] SPA (Single Page Application)에 대한 고찰
[앵귤러] SPA (Single Page Application)에 대한 고찰
프런트엔트 라이브러리를 공부하다 보면 "단일 페이지 애플리케이션 (SPA)"이라는 용어가 자주 등장합니다. 이번 글에서는 앵귤러 및 기타 프론트엔드 라이브러리 또는 프레임워크에서 자주 등��
paperblock.tistory.com
최근의 프론트엔드 라이브러리는 SEO에 대응하기 위한 SSR (Server Side Rendering) 기술을 포함하고 있습니다.
6. 언제 앵귤러를 사용할까?
많지 않은 경험으로, React나 Vue를 사용해보지 않은 상태에서의 생각임을 먼저 밝힙니다.
* 사용자와의 Interaction이 풍부한 애플리케이션
단순한 홈페이지 등에는 그다지 적합해 보이지는 않습니다. 물론 안 되는 건 아니지만, 보통은 홈페이지 작성용으로 이미 구축해 온 라이브러리들이 누적되어 있을 테니... 굳이 앵귤러로 이동한다고 해서 별다른 장점이 없을 것 같습니다. 오히려 SEO 측면에서 안 좋을 것 같네요.
그보다는, 다소 사용자와 주고받으면서 해야 하는 일이 많은 애플리케이션 개념의 사이트 (SaaS)에 적합할 것 같습니다. 사실 기능이 아주 복잡한 경우에 기존의 방식(jQuery)으로 작성하는 것은 꽤나 힘든 일입니다. 이러한 경우에는 Angular를 통한 생산성 향상을 이룰 수 있을 것 같습니다. 물론 여기까지는 다른 프레임워크나 라이브러리에게도 공통된 것이겠죠?
* 엔터프라이즈 규모의 애플리케이션
앵귤러는 기본적으로 어느 정도의 덩치를 지니고 있기 때문에, 규모가 좀 되는 프로젝트에 적합할 것 같습니다. 자체적으로 많은 툴과 라이브러리를 포함하고 있고 대부분이 버전이 맞춰서 관리가 되므로 개발자가 크게 신경 쓸 필요가 없습니다. 그리고 어느 정도 코딩하는 스타일이 정해져 있기 때문에 여러 명이 동시에 개발하는 경우에 장점을 보일 것 같습니다.
Plain Javascript를 생각해보세요. 분명 Javascript 코드인데 누가 작성했느냐에 따라서 코드가 분석하기 어려운 경우가 많습니다. 그에 비해서는 아무래도 정해진 패턴이 있다 보니 어느 정도 프로그래머에 따른 코드의 편차가 줄어들 확률이 큽니다. 라이브러리도 자체적으로 많은 부분 (animation, routing, http...)을 통일된 형태로 지원하니까요.
아무래도 출중한 개발자의 개인기에 덜 의존하게 되겠죠.
출중한 개발자가 어느 날 갑자기 퇴사하더라도 유지보수가 덜 걱정됩니다!
* 귀차니즘이 압도할 때
빌드, 패키징 등 이것저것 선택하고 설정하기 귀찮고 코딩만 하고 싶을 때!
* 템플릿과 Javascript 부분이 분리되는 걸 선호하는 사람
이건 사람마다 다른데... 개인적으로는 아직은 HTML, CSS, JS가 분리되는 편이 더 나은 것 같습니다. 물론 파일이 많아지기는 합니다만.
* 어느 정도 구속은 기꺼이 감수하는 사람
너무 많은 자유는 오히려 안 좋을 수 도 있습니다. 구조 설계 등의 스킬이 뛰어나지 않은 상태에서의 너무 많은 자유는 오히려 질 나쁜 코드를 작성하게 될 가능성이 있습니다.
* 퇴사자가 많은 회사의 사장...
누가 프로그래밍해도 고만고만 비슷할 가능성이...
맺음말
아마도 AngularJS와의 단절, 너무 복잡한 초기 접근 등의 이유로 인심을 많이 잃은 것 같습니다만, 앵귤러의 최근 버전은 많이 안정화된 것 같습니다. 그리고 아직까지는 꾸준히, 활발하게 서포트되고 있는 것 같습니다.
처음의 걱정과는 달리 업데이트도 꾸준히 진행되면서 성능이나 편의성 면에서 많은 발전이 있었습니다. 순위가 좀 뒤바뀌었으면 하네요.
이번 글에서는 뭔가 단점을 부각해서 정리해 놓은 것 같지만 개인적으로는 만족스러운 편입니다.
만약 여력이 된다면 한 번쯤은 시도해 보는 것도 좋을 것 같습니다.
앵귤러를 공부해보고 싶다면 아래의 글을 참고해보세요!
언젠가는 다시 예전의 명성을 되찾을 수 있을까요..? 아니면 서서히 사그라질까요?
몇 년 후가 더 궁금해지는 프론트엔드 시장입니다.
'웹 > 앵귤러 (Angular)' 카테고리의 다른 글
| [앵귤러] SPA (Single Page Application)에 대한 고찰 (0) | 2020.07.31 |
|---|---|
| 앵귤러 학습을 위한 도우미 (0) | 2020.06.18 |
| 앵귤러 (Angular)는 정말로 어려울까? (0) | 2020.06.11 |