상황
나는 리액트 개발자 로 입사하고
프로젝트에 뛰어들어 개발을 하려고 코드를 열어보니
모두 앵귤러였고 .. 심지어 앵귤러1이었고 ..
난 그렇게 갑자기 앵귤러 개발자가 되었다.
근데 누가 봐도 너무 오래된 구닥다리 코드였고
모두들 개선하고 싶어했다.
(그만큼 버그도 많았고..)
그래서 난 기회를 놓치지 않고
리액트로 전환하는 리뉴얼 프로젝트 아이디어를 제시했고
대표님, 팀장님, 파트원 모두 합의하에 진행하게 되었다.
그런데 정말 앵귤러보다 리액트가 좋은 선택일까?
일단 앵귤러는 지옥도야..
일단 npm 트렌드를 분석해봤다.
npm 트렌드는 가장 많이 다운로드된 프레임워크를 비교할 수 있고, 현재 시장에서 어떤 위치를 차지하고 있는지 대충 알 수 있는 정보이다.
그런데 이것봐 ..
앵귤러는 혼자 맨날 지옥도에 있잖아..
선택받지 못했잖아 ..
리액트에 비해 너무 인기가 없어졌다..
그럼 이제 진짜 왜 인기가 없어졌고
왜 사람들이 안 쓰게 되는지 보자보자
앵귤러
- 개발사: 구글
- 역사: 2010년 10월에 자바스크립트 기반으로 등장했고, AngularJS에서 Angular2를 출시했다.
-> Angular2는 기존 AngularJS와 호환이 안 되며, AngularJS는 지원 종료 되는 수순을 밟았다..
특징
- 프레임워크
- Incremental DOM 이라는 기술을 채택하여 DOM 을 조작한다
- 양방향 데이터 바인딩
- 내장된 angular router 제공
- HTML 템플릿 기반
- 모듈 기반
장점
- 완전한 프레임워크 -> 추가 라이브러리가 필요 없다
- 양방향 데이터 바인딩 -> 코드 간결화
단점
- 학습 곡선이 높다
- 번들 크기가 커서 초기 로딩 속도가 상대적으로 느리다
- 제약이 많다
리액트
- 개발사: 페이스북
- 역사: 2013년에 컴포넌트 기반 UI 라이브러리로 등장했고, 이후 Hooks가 도입 되었다.
특징
- 라이브러리
- virtual DOM 이라는 기술을 채택하여 DOM 을 조작한다
- 단방향 데이터 흐름
- React router 외부 라이브러리로 라우팅
- JSX 기반
- 컴포넌트 기반
앵귤러의 돔 조작 방식
: 앵귤러가 선택한 돔 조작 방식으로, 렌더링 과정에서 실제 돔을 사용해 변경사항이 있을 시 즉시 반영한다.
리액트의 가상돔을 활용할 땐 메모리에 가상돔을 두개 올려야하는데, 위와 같은 앵귤러 돔 조작 방식에서는 메모리 관리에 있어서는 훨씬 효율적이다.
장점
- 가벼운 라이브러리이다
- 가상돔을 활용해 빠른 렌더링, 성능 최적화
- 컴포넌트 기반 개발로, 재사용성을 높일 수 있다
- 단방향 데이터 흐름 -> 데이터 흐름이 명확해 디버깅이 쉽다
- 대규모 커뮤니티
단점
- 초기 설정이 필요하다 -> angular처럼 프레임워크가 아니므로 상태관리, 라우팅 등을 직접 설정해야한다
- 내장된 DI가 없어 리덕스나 contextAPI 등을 사용해 상태 관리를 해야한다
- 생태계 변화가 빨라 적응하기 어려울 수 있다
그럼 왜 결국 앵귤러는 인기가 없는건데?
높은 러닝커브
러닝커브가 높다 높다 들어만 봤지
나도 해보기 전까지는 와닿지 않았다.
근데 막상 해보니 어려운건 사실..
물론 초기에 잘 알아둔다면 프레임워크이므로 개발하고
유지보수하는 데 있어서는 장점이 있다고 생각한다.
그러나 처음 접할 때
ng-model, ng-change ..
그놈의 ng ng 뭐가 이렇게 붙는 게 많고
vm, directive 등
생소한게 많아 쉽지 않았다..
성능 문제
앵귤러는 완전한 프레임워크이므로 다양한 기능이 포함되어 있다.
이는 장점이기도 하지만! 반대로 초기 번들 크기가 크기 때문에 로딩 속도가 느리다는 단점이 있다
물론 리액트에도 라이브러리를 많이 설치하고 점점 무거워질 수 있겠지만, 리액트는 비교적 가볍고 빠른 렌더링이 가능하다고 널리널리 .. 알려져 있다.
자유도 부족
앵귤러는 엄격한 구조를 가지고 있다.
사실 앵귤러를 모르고 회사 프로젝트 코드를 분석했을 땐
앵귤러의 구조? 라기 보다는 회사에서 정한 개발 규칙인 줄 알았다 ㅋ..ㅋ.. 그만큼 몰랐다
근데 앵귤러는 사실 엄격한 넘이었고..
모듈 시스템을 필수적으로 사용해야하며
component -> module -> service 등 계층적 구조를 강제한다..
앵귤러의 한계
나는 앵귤러로 개발하면서
input창에 사용자가 공백만을 입력하면 버튼이 비활성화 되고
한글자라도 입력하면 저장 버튼이 활성화 되게끔 하는 개발을 맡았었다.
그런데 앵귤러의 한글 잘림 현상이 나타나면서..
앵귤러의 한계를 마주했다.
앵귤러 한글 잘림 현상이란?
한글과 같은 조합형 문자의 경우, 일반적으로 글자를 입력 후 스페이스나 엔터키 등을 클릭했을 때 입력 완료 시점에 브라우저 이벤트가 발생하는데, 앵귤러는 이 이벤트에 따라 양방향 바인딩을 처리하기 때문에 마지막 글자가 뷰에 바인딩 되지 않으며 발생하는 현상이다.
정말 생각지도 못한 곳에서 쉽게 되지 않는 걸 보고
앵귤러와 살짝 다툴뻔 ㅎ 했고
// 앵귤러1 양방향 바인딩 한글 짤림 문제 해결을 위해 directive 추가
var app = angular
.module('inspinia')
.controller('EntityCtrl', EntityCtrl)
.directive('koreanInput', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.on('compositionupdate', function(event) {
ngModel.$setViewValue(event.target.value);
scope.$apply();
});
}
};
});
이렇게 이벤트를 직접 감지하도록 directive를 만들어 추가해주며 해결했다.
사실 정말 당연히 될거라고 생각했던 일인데
이렇게 한계를 마주하게 될줄은 몰랐다.
결론
아무래도 앵귤러의 장단점이 뚜렷하듯이
리액트도 장단점이 뚜렷하고
앵귤러는 여전히 대규모 기업용 애플리케이션에서는 사용하지만, 가볍고 배우기 쉽고 빠른 리액트가 인기가 있을 수 밖에 없는 것 같다.
무엇보다 이 세계는 너무 빠르게 발전하고
언제 리액트도 뒤쳐지고 잊혀질지 모르는 것 처럼
앵귤러도 그렇게 리액트에 뒤쳐진 것 뿐 아닐까 싶다.
변화하는 자바스크립트 생태계에서는 리액트가
더욱 적합한 대안이 되었다.
개인적으로 느낀점
나는 사실 앵귤러도 신입으로서 너무 어려웠지만
한편으론 재밌기도 했다
리액트와는 다른 매력이 있었기에
복잡한 구조라도 찾아가는 맛이 있었달까 ..
그래도 가끔 개발이 너무 급할 때
ng-model 과 같은 ng들은 진짜 ng였고
찾아보기 바빴다
// 실제 사용한 코드
<div class="col-md-3" ng-repeat="project in projects">
<li class="divider" ng-show="project_modules"></li>그러다 리액트로 전환하니
뭔가 개운해지는 느낌이었달까..
간결한 코드를 보며 속이 시원했다
근데 사실 성능이 더 좋아졌다 이런걸 느꼈다기 보다는
그냥 개선해가는 과정이 개발자로서 뿌듯하고 재밌고
그랬던 게 아닐까 싶다
내가 만드는 서비스.. 이 아이가
더 멋있어지는 느낌에 좋았던게 아닐까 싶다!
마치며
사실 나는 리액트만 해왔기 때문에
아무리 앵귤러가 새롭게 재밌었어도
리액트보다 어려운 건 사실이었다.
그리고 채용 공고만 살펴봐도앵귤러보다 리액트를 할 줄 안다는 것이 더 메리트가 있다고 생각했다.
그래서 앵귤러 보다는 리액트로의 전환이 맞다고 생각했고
리액트로 전환합시다! 했지만,
막상 이만큼 왜 앵귤러보다 리액트를 사용해야하는지
고심끝에 낸 의견은 아니었다.
이렇게 더 깊게 알아보고 의견을 냈으면 좋았을걸! 이라는 아쉬움도 남지만, 그래도 리액트로 전환한 것에는 후회가 없었고
이렇게라도 한 번 더 복기해본다!
참고
https://velog.io/@kangactor123/AngularwithReact
https://blog.bitsrc.io/incremental-vs-virtual-dom-eb7157e43dca
