[웹] AngularJS vs ReactJS. 이 것이 문제로다

이번에도 역시 오랜만에 포스팅을 작성해봅니다. 회사 일을 하며, 업무도 하고, 개인적인 공부도 하고, 취미생활도 하고, 데이트도 해야하다 보니 글을 작성할 시간이 부족할 수밖에 없나 봅니다. 그래서 이번에는 제가 공부도 하며 관심이 가고 있는 주제의 대해 다뤄볼까 합니다. IT보다는 개발쪽에 관심있는 분들이라면 재미있게 읽어보고 여러 의문점과 의견을 생각해보실 수 있을 겁니다. 요즘 뜨는 언어중에 하나인 javascript. 과거 10~15년 전만해도 홈페이지에 눈내리기, 마우스 애니메이션 등 단순한 꾸미기용도로 사용되었는데, 지금은 Front-end, Back-end 등 중요한 자리를 차지하게 되었습니다. 이 중에서도 저는 Front-end에서 javascript문법으로 만들어진 Framework의 AngularJS, ReactJS에 대해 주저리주저리 이야기 해볼까 합니다. 이 이름을 처음들어보신 분들도 있고, 이미 여러서비스에 적용해보신분들도 있을 것 같습니다.

# Front-end Javascript Framework

정말 얼마전까지만해도 홈페이지라고 하면 정적인 데이터들을 보여주는 화면이라고 해도 될 정도로 단순한 구조를 가지고 있었습니다. 동적인 페이지라고 해봤자 게시판정도? (게시판조차도 BackEnd에서 각 링크를 옮겨다니는 경우가 대부분이였죠)밖에 없었고, 화려한 UI부분은 플래시가 대부분을 차지하고 있었습니다.

그런데 어느날 크롬이라는 아이가 나오면서 JavaScript처리능력이 외계인과도 같을 정도로 빨라졌습니다. 이와 동시에 해외에서는 플래시들을 버리기 시작했고, 순수 HTML,CSS,JavaScript만을 가지고 화려한 UI들을 만들고, 홈페이지를 만들게 되었습니다. 한국의 경우는 불과 1년정도 전부터 이러한 개념들이 조금씩 사용되고 있는 것 같습니다. (아직도 보수적인 곳도 많기는 합니다.)

그렇게 되면서 홈페이지라는 것도 규모가 커지게 되었고, HTML+CSS+JavaScript. 거기에 반응형 웹페이지까지 개발해야한다면 CSS3의 MediaQuery까지! 하나의 개발단위로까지 커졌습니다. 그래서 지금은 FrontEnd개발자라는 말까지 생겨났습니다.

저 같은 경우는 웹쪽 시작한지 얼마되지 않아서 과거 웹시장의 대해서는 잘 모릅니다. 그런데 제가 들어오기전부터 이러한 대규모 웹을 처리하기 위해 여러가지 라이브러리들이 나왔고, 그 중에서 많은 분들이 알고 계시는 것들이 jQuery, BackboneJS, underscore등이 있을 것입니다. (뭐 아직까지도 많이 사용하고 있고 저 역시도 사용하고 있습니다.)
하지만 위에 라이브러리로 역부족이였는지 그 이후로 새로운 것들이 많이 나왔고, 그나마 현재 정착되어 많은 서비스나 엔터프라이즈급들에 적용되는 것이 Google사의 AngularJS, FaceBook의 ReactJS가 있습니다.
(음.. 이렇게 나열하고 보니 공룡기업들의 싸움같네요 ㅎ_ㅎ;;)

아마 지금 이 글을 읽고 계신 독자 여러분들도 저 두개를 가지고 어떤 것을 사용해야하나 고민하고 계실 것 같습니다. 저 역시도 똑같은 고민을 하였고, 고민을 하다가 결국 두개다 실제 운영되는 서비스에 적용을 하면서 각 상황에 따라 어떤 것을 사용하면 좋을지 감을 잡게 되었습니다.

# AngularJS

AngularJS (앵귤러JS라고 부르면 됩니다.)

• 오픈소스의 JavaScript Framework입니다.
• 클라이언트에서 MVC패턴이 적용된 Framework입니다.
• 대표적인 특징이 양방향 데이터 바인딩, 템플릿 엔진, 의존성 주입이 있습니다.
• MIT 라이선스를 준수합니다.

간략하게 AngularJS에 대해서 설명해보았습니다.
FrontEnd라는 개념자체가 생소하던 시절, 서버와 UI를 같이 작업하던 일명 웹 개발자가 넘어와서 사용하기 딱 좋게 만들어진 Framework라고 생각하시면 될 것 같습니다. 클라이언트(브라우저)에서 MVC패턴을 적용하여 내부에서 페이지가 바뀌지 않은 상태에서 여러가지 뷰들을 location에 따라 변경할 수 있습니다. SPA(Single Page Application)을 구현하기에 가장 잘 만들어졌죠.
Controller마다 각 View와 Model들을 연결하여 서버의 데이터가 갱신될때, 혹은 클라이언트에서 서버에 데이터를 수정할 때 양방향으로 컨트롤할 수 있게 잘 구성되어 있습니다. 대신 클라이언트에서 Controller들을 구현하고 하다보니, 코드가 쉽게 노출될 수 있는 위험이 있기때문에 여러 툴을 이용해서 JavaScript코드를 깨거나 webpack들을 이용해야 보안상 안전하게 이용할 수 있습니다.

그리고 웹개발을 하고 있는 저희들은 jQuery에 너무 익숙해져있습니다. 허허허…
언제 어디서나 DOM과 네트워크 요청들을 쉽게 해야하는데, AngularJS는 그렇지 못합니다.. 그래서 처음에 사용하면 정말 당황아닌 당황을 하게 되는 상황이 벌어집니다. 뭐, 이러한 상황은 힘들더라도 문서대로 잘 지켜서 개발을 하던가 ($http), Singletone패턴을 적용하여 각 정보들을 공유할 수 있게 하던가 (Angular에는 factory라는 것이 있어서 이 부분은 쉽게 가능합니다 : ) ), 그냥 jQuery를 추가하여 사용하던가… 라는 방법들이 있습니다. jQuery의 경우 충돌이 날 것 같기도 한데, 의외로 사용해도 괜찮은 것 같고, 실제로 AngularJS로 서비스하는 홈페이지들보면 jQuery와 함께 사용하고 있는 곳도 많이 있었습니다 : ) 헤헤

p.s 처음에는 jQuery를 많이 이용했는데, 요즘은 AngularJS에 있는 기능들을 활용해서 사용하고 있습니다. 초반에 잘 설계해두니, 꼭 jQuery까지 사용안해도 편리하기는하네요. 다만 외부 라이브러리를 사용할 경우 외부라이브러리들이 jQuery를 의존하는 경우가 조금 있어서 jQuery를 아예 안쓸 수는 없었습니다.

# ReactJS

ReactJS (리액트JS라고 부르면 됩니다.)

• 역시 오픈소스 JavaScript Framework입니다.
• 2013년에 처음 출시되었고, 오래되지는 않았습니다.
• UI컴포넌트를 강화하여 Top-Down방식의 개발방식입니다. (이부분은 AngularJS가 더 좋은 듯 합니다.)
• JSX스타일을 사용할 수 있어서 뭔가 이상하지만 편합니다.

Facebook에서 혜성처럼 등장한 프레임워크로 이 것이 세상에 나왔을 때는 모두가 놀랬습니다. Facebook에서 내부적으로 사용하고 있다가 너무나 좋았는지, 그냥 다같이 쓰자 라는 마인드로 나온 것 같습니다.
보통 처음 프레임워크가 나오면 이걸 사용해도 되나?라는 의문점을 가지게 되는데, 이미 페이스북 웹페이지에 모두 적용된 프레임워크라는 이름을 달고 나와서 의문점을 가질 필요가 없는 일이 벌어졌습니다.

페이스북에서 공개한 뒤로 인스타그램, Airbnb 등 유명한 스타트업들이 하나둘씩 적용하였고, 지금은 한국에서도 ReactJS를 이용하여 여러 프로젝트들과 예제들이 등장하기 시작했습니다. (저희 회사도 복잡한UI는 ReactJS적용하여 깔끔하게 개발을 진행했었습니다)

ReactJS도 외부 라이브러리와 같이 사용할 수 있으며, DOM컴포넌트들을 각각 분리하여 적용하기 때문에 확장성 및 재활용성이 뛰어나기도 합니다.

# 어떤 것을 선택해야하나?

두개의 Framework가 너무 유명해서 어떤 것으로 개발을 시작해야하고 학습해야하는지 고민을 하게 될 것 같습니다. 저 역시도 같은 고민을 했고, 결국은 두 개의 Framework를 사용해보았습니다.
개인적인 프로젝트에 사용을 하면 아무래도 한계도 있고, 감이 안오기 때문에 회사에서 진행중인 프로젝트의 서브프로젝트나 번외 프로젝트에서 진행을 해보았습니다.
원래는 둘 중 어떤 것을 배워서 무기로 사용해볼까였는데, 둘 다 진행하면서 생각이 바뀌었습니다. AngularJS, ReactJS. 각각의 장점들이 있기에 내가 어떤 프로젝트를 진행하느냐에 따라 선택해야한다는 것을 알게 되었습니다.
AngularJS의 경우는 프로토타입을 개발할때 엄청난 퍼포먼스를 보여줍니다. 양방향통신이기도 하기에 정말 대충 막짜도 돌아갑니다. 또한 내가 원하는 것을 만들거나 기획자의 의도를 빠른속도로 반영하기에도 효과적이였습니다.
그렇다고 ReactJS가 퍼포먼스가 떨어지는 것은 아닙니다. 이 것도 직접 웹개발을 하는 것보다는 엄청난 개발퍼포먼스를 보여주지만 AngularJS보다는 사~알짝 떨어지는 감이 있기는 했습니다. 하지만 UI가 현란할 정도로 막 바뀌는 SPA(Single Page Application)을 개발한다고 가정한다면 AngularJS보다는 ReactJS를 선택해야 할 것입니다. 단방향과 VirtualDOM을 이용해서 정말빠르고 적은비용으로 DOM들을 갱신해줍니다. 대표적으로 페이스북이 실시간으로 UI들이 변하기때문에 ReactJS가 얼마나 효과적인지를 알 수 있습니다.

# 어디서 배워야할까?

예전에는 컴퓨터언어나 새로운 것을 배우기 위해 서점을 찾곤했지만, 위 2개의 Framework는 책이 나오기도전에 업데이트가 빨리 진행됩니다. 그렇기때문에 책을 꼭 보고 싶으신 분들은 JavaScript, ECMAScript 6 관련 책들을 구입하여 선행학습을 하신 후에 위 Framework를 만든 홈페이지에서 Tutorial이나 Documentation을 보면서 공부하는 것이 더 좋은 것 같습니다.
(다만 각 문서들이 영어라서 영어울렁증이 있으신분들은 힘드실 수도 있지만, 이 참에 영어와 친해져보시는 것도 괜찮은 것 같네요^^;;)

# 결론

하루하루 잠자고 일어날때마다 새로운 라이브러리, 프레임워크들, 기술들이 생겨나고 있습니다. (잠자기가 무서울 정도..)
그 중에서 요즘 가장 핫한 것들 중 하나가 JavaScript언어인것 같습니다. 이 언어하나면 서버, 웹프론트엔드, 모바일(아이폰/안드로이드), IoT(사물통신), 게임개발, PC(윈도우/맥/리눅스)프로그램 안되는 것이 없네요.
뭐든 다 할줄 알면 좋겠지만 현실적으로는 그렇지 못하고.. 하지만 웹쪽관련은 뭔가 하나는 하셔야할테니 위 두개 중에 하나정도 사용하실 줄 안다면 지금 현재 하고계신 일을 진행할 때, 어느정도 도움은 되실 것이라 확신합니다 : )

감사합니다.