[번역] Angular ng-conf 2016 의 소식들

다음 글의 번역입니다. [The Best News from Angular’s ng-conf 2016 - Chris Sevilleja]

If writer does not want this article, please contact me.(han41858@gmail.com)

---

 Salt Lake City 에서 열린 ng-cnof 2016 에서 아주 놀라운 발표들이 많이 있었다. 대략 1,500 명 정도의 Angular 개발자들이 참여했고, 세계 각지의 더 많은 사람들이 이 놀라운 대화에 주목했다.

 작년과 같이, 올해 있었던 ng-conf 를 돌아보자.

 Brad Green 과 Jules Kremer 가 훌륭한 키노트로 시작했다.

 여기에는 ng-conf 2016 의 YouTube 동영상 리스트가 있고, 이 글을 따라가면서 ng-conf 2016 의 요점을 골라 볼 수도 있다.

Angular 2 RC 발표

 5월 3일 Angular 2 릴리즈 후보판이 공개되었다! 이 발표는 엄밀히 ng-conf 뉴스는 아니지만 컨퍼런스가 시작하기도 전부터 이미 두 말 할 것도 없이 중요한 소식이다.

 당신의 Angular 2 어플리케이션에서 알아야 할 중요한 변화가 있다. 가장 큰 변화는 import 명의 변화다.

angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/browser -> @angular/platform-browser + @angular/platform-browser-dynamic
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing + @angular/compiler/testing + @angular/platform-browser/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router-deprecated
new package: @angular/router

 당신의 앱에서 관련된 내용들을 확인할 필요가 있다. 이제 제대로 살펴보자!

간략한 통계 몇 개

• 130만 개발자가 Angular 1 을 사용한다
• 36만명은 Angular 2를 사용한다. 지금 RC 를 발표한 플랫폼으로써는 나쁘지 않다.

 Angular 1 은 하나의 플랫폼으로써 자리잡았다. Angular 2 도 플랫폼이 될 것이다.

 Angular 1 은 43개의 디렉티브가 있었다. Angular 2는 [] 와 () 가 있다.

 CapitalOne, LucisCharts, Kiva, Weather Channel 그밖에도 많은 업체들이 이미 Angular 2 를 사용하고 있다.

Angular 2 는 민첩하고 빠르다.

 Angular 1 는 56KB 다. Angular 2 는 지난 주에는 170KB 였다. Angular 팀은 수많은 코드들을 최적화했고, 이제 Angular 2 는 미치도록 가벼운 45KB 다.

 민첩함에 대해 이야기해보자.

Lazy Loading 이 내장됨

 Angular 팀의 큰 목표 중의 하나는 자동화된 지연 로딩이다. 어플리케이션의 현재 페이지에서 딱 필요한 파일만을 로드하는 것을 보장한다. 지연 로드는 어플리케이션의 라우팅에도 사용된다.

렌더링이 아주 빠르다

 Angular 1 어플리케이션과 비교하여, Angular 2 어플리케이션의 첫 로딩은 2.5배 빠르다. 변화가 있을때 리렌더링은 4.2배 빠르다.

- 다행히도, Angular 팀은 그들이 항상 더 나아질 것이라고 믿고 있다. 현재 초기 렌더링과 리렌더링은 언제나 5배 이상 빠르다.

 LuchdCharts 도 Angular 2 로 전환하고 난 후 성능 향상을 보았다.

Angular 2 의 공식 스타일 가이드

angular.io/styleguide

 John Papa 에 의한 비공식/공식 스타일 가이드는 Angular 1 이 있고부터 한동안 나오지 않았었다. 그래서 수많은 다른 스타일과 튜토리얼, 관련 글들이 넘쳐나게 되었다.

 Angular 2에는 공식 스타일 가이드가 바로 지금 존재한다.

Angular 2 의 화면 구성을 쉽게 돕는 Angular Material

material.angular.io

 Angular 2 를 위한 Angular Material 은 정말 보기 좋다. Angular Material 을 사용하면 material 스타일의 어플리케이션을 아주 쉽게 만들 수 있다.

 얼마나 어플리케이션을 빠르게 만드는지 보도록 하자. (Kara Erickson 이 타이핑을 번개같이 하긴 한다.)

Angular 2 는 모바일에 준비되어 있다.

mobile.angular.io

 Angular Mobile Toolkit 을 사용하면 어떠한 디바이스에서도 바로 로드할 수 있는 산뜻한 웹 앱을 쉽게 만들 수 있다. 심지어 인터넷 연결이 없어도 가능하다. Progressive 웹앱(역주 : 웹 브라우저에서 앱처럼 동작하는 웹 - 참고)은 많은 웹 개발자들에게 흥미를 끌고 있다. 모바일 어플리케이션을 만들기 위해 당신의 코드의 대부분을 재사용하는 방식은 native 모바일 앱과 비교해볼만 하다. Angular Mobile Toolkit 은 이것을 현실로 만드는 또 한 걸음이다.

 Jeff Cross 와 Alex Rickabaugh 의 이야기가 있다.

 그들은 GitHub 의 이슈를 관리하는 Issue Zero 라는 앱을 만들었다.

Angular Universal

(역주 : Universal 을 번역하기가 좀 애매하네요.. 명사로 쓰고 있는 것 같습니다.)

universal.angular.io

 Angular 1 의 큰 이슈는 브라우저에서만 렌더링된다는 것이었다. 따라서 Angular 1 SEO 는 쉽게 처리 할 수 없는 문제였다. (역주 : SEO 는 Search Engine Optimization 이며 Angular 1 앱에서는 검색 결과로 {{ }} 가 나오는 경우가 있습니다.)

 Angular 팀은 Angular 2 웹 컴포넌트가 렌더링 되는 것에 대한 의존성을 감소시키면서 어디에서도 수행될 수 있도록 했다. 서버에서도.

 세팅은 아주 간단하고 Angular 2 템플릿을 서버측에서 렌더링하는 데에 Node 를 사용했다.

 우리가 만든 Angular 앱은 더욱 빨라지고, 사용자는 브라우저에서 렌더링 하는 시간을 줄일 수 있게 되었다.

 Angular 2 Universal 에 대한 Jeff Whelpley 와 Patrick Stapleton 의 발표를 보자.

Angular 2 CLI 가 삶을 단순하게 한다.

(역주 : CLI 는 Command Line Interface 이며 npm 을 생각하시면 됩니다.)

cli.angular.io

내가 가장 관심있었던 것은 Angular CLI 에 대한 발표였다. Angular 2 앱 세팅은 수 많은 과정이 있고 잘못될 수 있는 여지가 아주 많았다.

• TypeScript 의 설정
• 모든 <script> 태그를 잡아다가 .html 파일에 넣는 것
• 컴포넌트들에 모두 import 해줘야 하는 것
• 앱에 부트스트랩 (역주 : "bootstrap" 은 앱 전반에 Angular 를 적용하는 것을 의미)
• 앱을 로드하기 위해 System.js 이용하기

- Angular CLI 는 세팅 과정을 한 줄로 줄여준다, ng new scotch-app

 Angular CLI 를 시작하기 위해 해야하는 것은 이것이 전부다.

npm install -g angular-cli
ng new scotch-app
cd scotch-app
ng serve

 이것만으로 최신 Angular 앱을 준비할 수 있다. Grunt, Gulp, Browserify, Webpack 아무것도 필요 없다.

 Mike Brocchi 가 Angular CLI 에 대한 많은 내용을 선보인다.

앱 만들어보기

 Angular 2 의 세계에 발을 담궈 보고 싶은가? John Papa 가 Tour of Heroes 앱에 대해 소개한다.

John Papa 는 Tour of Heroes 앱을 훌륭하게 이끌어 왔고 Angular 문서 페이지에서도 찾아볼 수 있다.

TypeScript 는 수많은 장점을 제공한다.

 TypeScript 로 할 수 있는 수많은 멋진 것들이 있다. Dan Wahlin 은 왜 TypeScript 를 사용해야 하는지, TypeScript 가 Angular 2 개발을 어떻게 더 낫게 만들어 주는지 설명한다.

 TypeScript 를 사용하는 데에 내키지 않았다면, 이 영상을 보면 (아마도) 생각을 바꿀 수 있을 것이다.

ng-show : 작년의 ng-wat 을 잇는 코너

 ng-wat 은 작년 어떤 컨퍼런스보다도 재미있었던 행사였다. Shai Reznik 이 돌아와 작년의 대화를 이어갔다.

 Angular 팀 (구체적으로는 Brad Green) 에 따르면, Angular 개발자들이 Angular 2 를 어떤 마음으로 기다리고 있는지와 관련된 많은 이야기를 다룬다.

 ng-show 는 반드시 봐야할 것이다.

Augury, 최고의 Angular 2 디버깅 툴

angury.angular.io

 Angular 1 과 Batarangle 을 사용해 본 사람이라면, 개발할 때 브라우저에서 변수와 state 를 볼 수 있다는 것이 얼마나 큰 도움인지 알 것이다.

 (이전에 Batarangle 이었던) Augury 는 딱 그 기능을 한다. 당신의 앱 어떤 곳이던지 console.log() 없이도 변수, 계층(hierarchy), 상속 관계를 브라우저에서 볼 수 있다.

- 정말 흥미로운 발표였다. 특히 컴포넌트 관계와 injector 그래프를 브라우저에서 볼 수 있다는 게

Firebase 와 Angular 는 마술이다.

 내 영웅 중의 한명인 David East 는 observables 에 대한 멋진 발표를 했다. observables 에 대한 경험이 많지 않다면 David East 의 탄탄한 설명이 도움이 될 것이다.

 그는 또 실시간 채팅 어플리케이션을 Angular 2, Firebase, AngularFire2 로 10분만에 만들었다. 수많은 함수형 기능들(functionality)이 단시간에 완성되었다.

AngularFire2 는 이번 주에 베타 버전이 나왔고 Firebase 와 Angular 2 와 함께 시도해보기를 강력하게 추천한다.

NativeScript 로 네이티브 앱을 쉽게 만들 수 있다.

nativescript.org

 Telerik 에 의해 만들어지고 있는 NativeScript 는 올해 ng-conf 에 강한 인상을 남겼다.

 Angular Mobile Toolkit 이 프로그레시브 웹 앱을 만드는 것에 집중하고 있는 반면에, NativeScript 는 Angular 2 를 이용해서 네이티브 앱을 만드는 것에 더 흥미를 갖고 있다.

 가장 큰 차이는 무엇일까? 큰 차이 중 하나는 애니메이션이다. 네이티브의 애니메이션이 좀 더 부드럽다.

 NativeScript 가 했던 것중 정말 멋진 것은 설명만 하지 않고 직접 보여줬다는 것이다. Google Play store 나 Apple App Store 에서 그들이 만든 예제를 볼 수 있다.

 Jen Looper 와 TJ VanToll 이 NativeScript 앱을 얼마나 쉽게 만드는지 보여준다.

Zones 을 사용하여 테스팅이 눈에 띄게 쉬워졌다.

 Protractor 의 뛰어난 Julie Ralph 가 zones 와 테스팅에 대해 이야기 한다.

 Zone.js 는 비동기 태스크를 관리하고 컨텍스트 실행을 조작하는 라이브러리다. 많은 이야기를 할 필요도 없이, Angular 2 테스트가 정말 쉬워졌다!

 모든 비동기 태스트가 zone.js 덕분에 추적 가능하다(trackable). Julie Ralph 가 이 글에서 표현할 수 있는 것보다 많은 것을 설명하고 데모를 보여준다.

Angular 1 는 아직 살아있다.

 Angular 1 를 사용하는 130만 개발자들과 함께 ng1 에도 수많은 생명이 있다. ng1 으로 만들어진 앱이 방대하며 유지보수가 필요할 것이다.

 1.5 버전의 추가와 함께 컴포넌트가 중심이 되었다. 좀 더 컴포넌트 기준으로 생각의 패턴을 바꿀 필요가 있다. 결과적으로, Angular 2 로 업그레이드 할 때 쯤엔 이미 컴포넌트 중심의 생각을 하게 될 것이다.

 .component 선언은 Angular 2 컴포넌트를 더 쉽게 만들도록 돕는다.

 Angular 1.x 를 이끌고 있는 Pete Bacon Darwin 이 Angular 1 과 컴포넌트에 대해 설명한다.

Router 는 잘못되었다고 이야기해 왔다.

 Pete Bacon Darwin 은 router 가 실제로는 "rooter" 를 발음한 것이라고 이야기했다. 이런걸 폭로하다니!

webelieveinyou Angular 팀

 ng-conf 에 있었던 해시태그 중 #WeBelieveInYou 가 있었다.

 Angular 팀에 대해 보거나 트위터를 날려볼 수도 있다. 트위터 날리기

결론

 올해 ng-conf 는 놀라운 발표와 훌륭한 라이브 데모로 가득했다. ng-conf Youtube 페이지의 다른 영상들도 확인해 볼 만 하고, Angular 2 앱과 함께 올해를 즐겁게 보내 보시라!

 ng-conf 에서 만났던 모든 사람들과 놀랍도록 즐거운 만남이 있었고 내년엔 더 즐거울 것이라 기대한다! Scotch 팀은 ng-conf 를 훌륭하게 만든 모든 사람들에게 감사를 표하고 싶다.