Angular.js(이하 앵귤러)로 프론트엔드 개발을 한지 거의 7개월이 흘럿다. 여러 시행착오를 겪으면서 얻은 결론은 앵귤러는 정말 빠르고 쉽게 배울수 있으며, 여타 다른 프레임워크에 견주어도 손색이 없다는 사실이다. 하지만 요새 들어서 자질구레한 문제점을 겪게 되면서 다른 프레임워크들을 배우게 되면서 앵귤러의 수명이 다한것이 아닌가라고 생각을한다. 그리고 지금 나는 React.js (이하 리액트)를 배우기 위해 전념을 하고 있다.
그림 1. 완벽해야 한다는 강박관념때문이었을까? Angular2는 그것이 가진 광범위하고도 뛰어난 가치에 비해서 그 효용성에 대해서 많은 의구심을 가지고 있는 개발자들이 많다. 아직은 베타버전이기에 확정할순 없으나, 프레임워크가 가지고 있는 무거움, 그리고 배우기 위한 시간이 정말 많이 걸린다는 것은 절대 쉽게 넘어갈수 없는 단점이다.
쉽게 앵귤러를 표현한다면 나는 앵귤러는 프론트엔드 세계의 php와 같은녀석이라고 생각한다. 다른 프레임워크들이 존재하지 않았을 시절, 웹개발자들이 쉽고 빠르게 배울수 있는 장점을 가지고 백엔드 세계에 혜성처럼 나타났다. 하지만, 지금에 들어서는 애플리케이션 규모가 커짐에 따라서 html과 php를 혼용하여서 쓰는 부분은 치명적인 단점으로 나타났고, 현재에 들어서는 wordpress라는 프레임워크를 제외하고서는 많이 선호되지 않는 백엔드 언어이다. 그리고 그 치명적인 단점은 앵귤러에서도 나타난다. 심지어 초심자들에게 앵귤러만의 자체적인 로직인 ng-*계열의 디렉티브들은 부담을 더욱 심어주기도 한다.
또한 앵귤러의 근본적인 설계자체에서 주는 장점은 곧바로 단점과 연결되기도 한다. 앵귤러 내부에서는 scope라는 영역안에서 변수들이 공유되어 사용되는데, 쉽게 접근가능하다는 장점은 애플리케이션의 규모가 커짐에 따라서 변수들을 관리함에 있어서 크나큰 장애물로 작용된다. 때문에 앵귤러 1.5버전이후부터는 component(이하 컴포넌트)라는 개념이 도입됨에 따라 각 컴포넌트들이 서로 개별적인 scope를 가지고 서로의 변수들은 공유하는 방식에 제한을 가함으로써 한층 발전을 도모하기도 하였다.
하지만, 이미 새롭게 나온 프레임워크는 컴포넌트 베이스 웹개발에 더욱더 유용하고 발전되었고, 2015년에 나온 새로운 자바스크립트 버전인 es6를 적극활용함으로써 성능을 더욱더 강화시켰다. 이러한 추세를 바탕으로 앵귤러는 앵귤러2를 발표하였지만, 개인적으로 현재의 추세를 정면으로 반박하는 행동이라 생각한다. 이곳에서 앵귤러2에 대해서 자세히는 다루지 않겠지만, 간단히 이야기하자면 앵귤러가 경량화되어있엇고 쉽고 빠르게 배울수 있었다면, 앵귤러2는 개발에 필요한 모든 것을 함축시킨 프레임워크를 만들겟다는 강박관념에서인지 정말 무겁다. 애초에 로컬셋업 자체부터 배우고 익혀야 하고, 곁가지로 배워야하는 것들이 너무많다. 강조하고 싶은 점은 너무 완벽을 추구하다가 정작 중요한 것을 빠트린 것같다는 느낌이다.
그것에 반하여서 최근에 Facebook에서 발표한 아직 어리지만 많은 사랑을 받고있는 react.js는 앵귤러보다 더욱더 경량화 되었고, html과의 완벽한 결별을 선언하고 새로운 마크업 랭귀지인 JSX를 이용해서 보다 효율적으로 DOM (Document Object Model)을 다룰수 있게 되었다. 흔히들 생각하기에 프레임워크는 MVC라고하여 Model, View, Controller를 기본적으로 다루어야 하지만, 리액트는 분명하게 View만 다루고 있는, 어찌보면 부족한 프레임워크이다.
그림 2. 3마리의 토끼 MVC보다는 한마리 토끼인 View만을 초점을 둔 프레임웜크 리액트. 리액트는 개발을 위한 환경만을 제공하고 그 내부는 전부 순수 자바스크립트 (es6)로 채웟다는 느낌이다. 아직은 어린 프레임워크이기 때문에 커뮤니티가 앵귤러에 비해 작고 튜토리얼 들이 없어서 다가가기 어렵지만, 그 반응은 정말 폭발적이다.
하지만, 오히려 나는 이부분이 리액트의 장점이 되었다고 생각한다. 앵귤러가 초기에 탄생하던 2010년 무렵에는, 자바스크립트는 자체로써의 성능보다는 그 언어가 가지는 범용성을 활용하고자 하는 철학으로 앵귤러가 제작되었고 자바스크립트가 가지는 한계성을 “보안”하기 위해서 개발되었다라고 생각하는 것이 맞다. 하지만, 현재는 es6가 나오고 점차 그 호환성이 확장됨에 따라서 더이상 자바스크립트는 부족함이 많은 언어가 아니라, 범용성에 더불어 다른 언어들처럼 무거운 프로그래밍에도 사용될수있게 되었다.
그림 3. 리액트 예제. HTML과 같이 보이는 구문은 사실 HTML이 아니라 JSX이다. JSX는 컴파일되어서 자바스크립트가 되고, 이것은 DOM으로 렌더링되기 전에 Virtual DOM으로 메모리에 저장된다. 계속해서 DOM을 렌더링하는 앵귤러는 앱의 규모가 커져감에 따라서 앱의 퍼포먼슨느 기하급수적으로 감소하는 반면, Virtual DOM은 효율적인 저장방식과 렌더링을 제공하여 규모가 커져도 높은 퍼모먼스를 자랑하는 고도의 scalability를 자랑한다.
리액트는 새로운 신택스를 개발하여 초심자들에게 무언가 새로운 것을 또 배워야한다는 것이 아니라, 최소한의 습득, 오직 자바스크립트, 만을 통해서 웹브라우저 상에 UI를 구축할수 있게 만들었고, 자바스크립트가 가진 광대한 커뮤니티를 통해서 다른 플러그인들과 적절히 배합하여 MVC를 구축할수 있게끔 만들었다.
그림 4. 대통령도 미리 알려준다는 구글 빅데이터. 아직은 앵귤러의 방대한 커뮤니티를 꺽을 정도는 아니지만, 리액트의 성장세는 무섭다.
배우는 것은 언제나 고되다. 이때까지 앵귤러는 배우기 위햇 정말 많은 고생도 하였고 앵귤러를 통해서 많은 앱도 제작하였지만, 규모가 큰 앱에서 거의 좌절단계에 이르렀다. ES6를 활용하여서 앵귤러의 스트럭쳐를 재정비하고 컴포넌트 베이스 개발을 적극활용하는 처방도 많이 하였지만, 계속해서 드는 의구심은 “이럴꺼면 왜 앵귤러를 사용해야하는가?”였다. 앵귤러2로의 전향은 또다른 난제에 봉착하였고 마치 ‘혹떼려다 혹을 더붙인 느낌이었다’. 결국 내가 찾은 해답은 React.js였다. 신생언어이지만, 모든 프레임워크에 지대한 영향력을 미쳤고 후발주자이지만 모든 선발주자들이 리액트의 구조를 채택해가고 있다.
마지막으로 강조하고 싶은 점은, 어떤 것도 최고는 없고 장점과 단점만이 있다. 하지만, 새로운 초심자들이 지금 현재 어떤 프레임워크를 배워야한다고 말하다면 나는 흔들림없이 리액트와 es6라고 말해주고 싶다.