jQuery 개발자가 Angular js를 적용하면서... 1화

시작

개인적으로 두명이 팀을 이뤄 하나의 서비스를 만들고 있다.

Front-end 부분은 Angular를 기반으로 Angular-Material 라이브러리로 UI를 구성하고, Back-end는 Vert.x+MongoDB로 구성한 기본 구조를 가지고 진행하였다. 필자는 jQuery로 요즘 밥을 빌어먹고 살고 있기 때문에 Front-end를 맡게 되었고, 이 프로젝트를 진행 하면서 Angular에 대해 공부와 적용 하게 되었다.

솔직히, Front-end에서 새로운 기술을 배우는 것은 꾸준한 일이었지만, 큰 프레임워크 수준은 차일피일 미루다가 이제서야 공부를 진행하게 된것이다. 사실, 마음속으로는 React를 하고 싶었지만, 같이 개발하는 친구가 가이드라인을 Angular로 잡아 줘서 따라가게 되었다. (지옥의 시작...)

Angular의 무지막지한 러닝 커브

Angular를 시작하기 전, 간단히 검색해보면 많은 검색 결과가 나오는데 그 중 처음에 가장 눈에 띈 것은 지옥같은 러닝커브라는 단어 였다. 개발이 천직이라 생각한 나는 그 글을 봐도 그리 걱정하지 않았고, 프로젝트랑 같이 진행하면 문제 없이 술술 풀리면서 진행하겠다 생각했다.

그건 내 오판이였다.

처음에 들어가자 마자 느낀 것은 개발 초창기에 C언어를 하다가 자바를 보는 듯한 느낌이었다. 절차지향으로 열심히 코딩하는 나에게 자바는 조선 말기에 갑작스레 찾아온 이양선과 같았다. 그때의 배척감을 이루말할 수 없었고, `C언어가 짱이다.`, `객체지향 꺼져라!` 라는 저항 정신이 자리잡고 있었다. 하지만, 시류와 생산성 등의 민감한 문제가 나에게 다가오기 시작했고 가장 큰것은 많은 사람들이 C언어보다는 자바를 한다는 것이었으며, 우리나라 시장 또한 자바 개발자들을 더 많이 뽑는다는 것이었다. 그래서 시작한 자바 공부는 고집스러운 성격탓에 쉽지 않았고, 결국 안드로이드가 나올랑 말랑 한 시점에 제대로 행보를 걷기 시작했다.

물론 처음의 Angular는 내가 자바를 처음 봤을 때의 느낌이었지만, 막상 사용해 보니, 술술 공부되던 자바와는 달리 답답함을 극으로 만들어 주는 내용들이었다. 특히 그놈의 디버깅은.... 어디서 에러가 도출되었는지, 크롬의 익스텐션 중 관련 디버깅 툴이 있어서 몇몇 찾아주지만, 못 찾아 주는 것도 태반이었다. 그것을 찾는 것이 헬이였고, 자연스레 될 줄 알았던 기능들이 어떤 곳에서는 되고 어떤 곳에서는 안되는 경우도 있었으며, 특히, 개발하면서 유용하게 사용하였던 jQuery Lib들을 적용하기 어마어마하게 어려운게 가장 큰 문제였다. 물론 대중적인 라이브러리는 `Angular-` 라는 Prefix가 붙은 상태에서 검색하면 나오긴 하지만, 모두다 지원되는 것이 아니기에 원하는 기능을 이루기 위하여 많은 고통을 동반하게 되었다.

최악의 Angular-Material

처음에 같이하는 친구가 가이드 라인으로 제시한 Material 디자인은 재미있는 녀석이었다. 자주 사용하는 부트스트랩보다 확실히 역동적인 기능을 가졌고, 특히, `vertical-align` 속성으로 항상 고통받은 나에게 간단한 지시어로 정렬되는 것은 환상이었다. 그때, 그 환상에 사로잡히지 않았어야 했다...

일단 Angular-Material은 완벽하지 않았다. 제일 큰 문제는 자체적인 flex로 UI 구성할 때의 문제인데, 바로 모던 브라우져 내에서도 다 틀어지게 나오는것. 이것 때문에 많은 사람들이 Angular-Material의 github 이슈란에 많이들 올리는 것이다. 크롬에 최적화 되어있는지, 크롬에서 잘나오는게 파이어폭스, 사파리, 익스 다 틀어져서 나오는 것이 많았다. Angular-Material 기능 내에서 이를 잡으려고 하는 것이 굉장한 고통이었다.

또 큰 문제는 느리다는 것이었다. 이상한 모임에서 Angular 관련하여 자주 물어 보곤 하는데, ng 요정으로 소문난 니폴님의 말을 흘려듣지 말았어야 했다. 그때 Angular-Material를 적용한다 말하니, `그거 느릴텐데요...`라는 말을 절대로 흘러 듣지 말았어야 했다. Angular-Material는 정말 느리다. 크롬에서는 최적화 되어 그나마 돌아가는데, 다른 브라우져에서는 정말 느리다. 서버에 API를 조회하는 것보다 훨씬 느리기에 골치가 아팠다. 혹시나 UI가 모두 렌더링 되는 시점을 찾아 보려 했으니, Angular-Material가 적용된 부분은 그것도 쉽지 않는 것으로 기억한다.

하지만 계속 개발하고 있다. 이녀석들을 가지고...

어차피 이미 먼길을 와버렸다. 서비스 오픈일도 얼마 남지 않는 상태고... 이제 이 서비스를 개발하면서 나온 노하우와 경험들을 하나 하나 에피소드 형태로 작성하려고 한다. 많은 호응 바란다.