By Kesus Kim

문득 Angular 2 로 개발을 하다보니… 정말로 잘 만든 프레임워크라는 생각이 들었다. 정말로. 특히나 TypeScript가 사용하면 사용할 수록 뛰어난 것 같았다…?

사실 갑자기 이 생각이 들어서 이번 글을 적어 보는 것인데…

원래 Angular 2 를 처음 보고 애정을 느끼게 된 것도 이 TypeScript의 깔끔함이었다. JavaScript에 Decorator라니!! ES 7 스펙에는 있다고 하지만 어쨌든 그로 인해 코드가 깔끔해져서 굉장히 가독성이 좋아졌고, Decorator와 Component 덕분에 모듈화를 시키기가 굉장히 수월해져서 나 같은 뉴비 개발자도 극심한 고민 없이 적당한 고민만으로 프로그램을 분산 시킬 수 있었다.

… 근데, 문득 React.js 생각이 났다. 난 Angular 2를 알파, 베타 버전부터 얼마 전의 RC 까지, 대략 6개월 가량의 시간 동안 조금씩이나마 꾸준히 관심을 가져왔기에, 6개월 전에 비교해서 나의 시야는 더욱 넓어졌다. 약 6개월 전 당시에도 분명히 React.js를 보기는 했었는데 뭔가 너무 인기가 많아서~~(나는 뭔가 선택을 할 때에, 초기에 인기가 비교적 적은걸 선호하는 것 같다. Perl을 좋아하는 것도 그렇고..)~~ 상대적으로 미성숙해서 인기가 비교적 덜 했던 Angular 2가 더욱 끌렸었다.

더욱 성장한 실력으로 인한 넓어진 시야로, React.js를 바라보았다.

생각보다… 멋진 녀석이잖아?

사실 예전에는 JSX 때문에 거부감이 들 정도였는데, TypeScript를 쓰고 나니 딱히 그런 것도 아닌 것 같고… 특히나 나의 경우는 Chromebook을 주로 사용하기에 ‘가벼움’ 이 굉장히 중요한 요소인데, TypeScript는 그렇게 가볍지만은 않다. Angular 2는… 솔직히 조금 무겁다.

Angular 2의 팀에 계신 MINKO GECHEV라는, 뛰어나신 개발자 분의 블로그 에 보면 ES 6의 특성 상 번들 과정에서 필요 없는 부분을 제거하는 Tree Shaking 과정이나(Rollup.js), Angular 2의 RC 5에 새로 도입 된, 그때 그때 컴파일 하는 방식인 Just in Time 컴파일 방식이 아니라 미리 컴파일 하는 방식인 Ahead of Time 컴파일 등, 몇 몇 방식을 이용하여서 Angular 2 의 아주 간단한 기본 앱, Hello World 를 1.6MB에서 50K 이하로 줄이는 방법을 소개한다. 즉 개발 모드에서는 Angular 2가 아무 동작도 안해도 1.6MB을 기본적으로 차지한다는 것!

내가 기억하기로 더 웃긴 건, 예전에는(아마 RC 3 이전이었던 걸로 기억한다) umd 의 모듈 방식과 Angular 2 프레임웤 자체의 개발 모드의 모듈, 두 가지의 방식을 제공했는데, 후자를 사용하면 Hello World 앱도 약 800개의 HTTP Request 를 필요로 했고 그 만큼 네트워크 대역도 많이 사용했던 기억이 난다(전자의 경우 약 80~200개로 줄었었다). 지금은 umd 를 권고 및 필수 사용으로 하고 있지만, 아직도 무겁다. 물론 그 만큼 프레임워크에서 제공하는게 많기는 하지만, 난 아직 그 많은 기능들을 다채롭게 사용할 만큼의 뛰어난 해커가 아니기에.

또한 TypeScript 가 브라우저에서 직접 돌아가지 않는다는게 너무나도 스트레스다. 사용하면 사용할 수록 대단하다고 느끼는 것 또한 사실이지만, 이걸 트랜스파일 해 주는게 너무나도 스트레스다. 특히나 ES 5를 타겟으로 하는 것과 ES 6을 타겟으로 하는 것이 다르다. 물론 다르니까 다르게 존재하는 것이겠지마는, 겉보기에는 동일한 동작을 하는 데 *어떤 자바스크립트 라이브러리 (내가 찾은건 Golden Layout이라는 라이브러리였다)*는 ES 6을 타겟으로 트랜스파일하면 에러를 내뿜으며 동작을 안해버린다. 굉장히 골치아프다. ES 5를 타겟으로 트랜스파일하면 Promise등 Angular 2 에서 사용하는 코어 모듈을 찾을 수 없다며 에러를 내뿜는다(그런데 동작은 한다….;;). 도대체 겉잡을 수가 없다. 너무나도 블랙박스이다.

블랙박스면 동작을 잘 해서 신경을 껐으면 좋겠는데, 아직은 그런 단계는 아닌 듯 하다. 특히나 오늘… 2016년 9월 27일 기준으로 TypeScript 2.0을 사용할 수 있는 상황인데 (불과 2주 전에만 해도 2.0 베타였다), 정식 버전만 그렇지 TypeScript Compiler 를 사용하는 여러 모듈들은 아직도 옛 버전인 1.8 등을 쓰고 있는 경우가 부지기수이다. 그런 것들은 손수 처리해주어야 한다. 하다가 뭔가 버그가 생기면… ^^ 고생길이 열린다.

너무 어려워!!!!!!

아… 이게 아직 너무나도 갈 길이 먼 듯 하다. 그 외에도 모듈 번들링, 패키지 로더 등 굉장히 많은 문제들과, 높은 진입 장벽 등…

이런 문제의 일부분을 해결하기 위해 Angular 팀에서는 Ember-CLI 툴과 같이 Angular-CLI 툴을 개발 중에 있는데, 아직은 베타 버전의 단계에 있다. 한두달 전에 CLI 툴을 이용하여 Angular 2 공부를 하려고 하였으나 포기하였는데, 그 이유는… 초기에 프로젝트를 생성하는데 거의 무한한 시간이 걸리기 때문이다. 그리고 굉장히 많은 용량과 함께…

맥북 프로를 쓰시는 분이면 괜찮을 수도 있을 것 같다. 본인은 크롬북이라 단 50M의 용량에도 민감하기 때문에, 단지 의존, 개발 의존 패키지만 전부 설치하였을 뿐인데 900M에 육박하는 Angular CLI 툴의 설정을 사용할 수가 없었다. 간단하게 사용해 보려고 했는데 무슨 ‘집행검 +12’ 같은게 딸려 나온 느낌이랄까… 저 많은 패키지들을 설치하는데 걸리는 시간도 굉장히 길고… (안 그래도 그 문제 때문에 CLI의 README의 Known Issues에서도, ‘The initial installation as well as ng new take too long because of lots of npm dependencies.’ 라고 서술하고 있다.)

결론: Angular 2 에 대한 글이라 위에서 뜬금 없이 React 언급을 해서 흐름이 끊긴 듯 하지만 요지는..

  1. 아직 Angular 2 는 무겁다 (가볍게 배포하는 것이 지금까지 그리 쉽지는 않았다)
  2. React.js는 라이브러리이기 때문에 꽤나 쓸만한 것 같다 (아직 Flux 등을 살펴보지 못해서 섣부르게 사용하기는 그렇지만 개인 프로젝트에서는 써야지.)
  3. Angular 2와 TypeScript를 제대로 사용하기가 정말 정말 어렵다. 하지만 제대로 사용하면 그 이상의 페이백이 분명히 있다고 느껴진다.

그니까 흑백논리처럼 React.js vs Angular 2 보다는 상황에 맞는걸 사용하자.