Angularjs 1.x의 한계와 Angular 2로의 변화 #
* Anuglar js 1.x는 서버 렌더링을 할 수 없다.
* Angular js 1.x는 네이티브 코드를 변환할 수 없다.
* 특정 환경에서는 동작하지 않기도 한다.
- Angular js 1.x는 DOM을 처리하는 과정에서 그 기능을 확장하는 방식이었는데, 기존에 있던 코드를 기반으로 새로운 API를 추가하는 것 만으로는 구조적인 한계를 벗어나기 쉽지 않았고, Angular 2는 이런 한계를 극복하기 위해 만들어졌다. 따라서 Angualr 2를 만들면서 코드의 기본 구조부터 크게 바뀌게 된다.
Angular 2 #
- Angular 2가 만들어진 것은 위에 있던 이유 외에 $scope를 없애려는 것도 있었다. $digest사이클을 통한 값 변경 체크 방식은 항상 성능의 약점으로 꼽혔기 때문에, 값 변경 체크 방식을 $digest 사이클 밖으로 빼내려고 했다. Angular 1.x의 코드 구조는 몇몇 중요한 이슈로 인해 그대로 사용하기 어려웠기에 버전 업그레이드를 위하여 바뀌었다고 한다.
- 이러한 과정때문에 Angular 2가 등장한다. Angular2를 사용하면서 크로스 플랫폼의 렌더링 스케일 확장문제, 속도, 성능 등 모든 것을 자유롭게 사용할 수 있게 되었다.
- 결론은 Angualr js 1.x에서 Angular2로 변하면서 코드를 재작성 했다고 할 정도로 내용이 크게 바뀐다. 새로운 개발 언어를 사용하거나 컴포넌트의 구성 방식이 바뀌고, 아키텍처, 사용하는 툴도 모두 다르다.
SemVer와 큰 변화(Breaking Changes) #
- Angular 1.x는 몇 년 동안 수많은 버전들과 수많은 변동 사항이 있었다.
- 이미 Angular 4,5가 나와 있지만, Angular 2는 이전 버전과 완전히 새로운 패러다임을 도입하기 위해 만들어졌다. 오프라인 컴파일이나 다른 렌더링 방식, 그 이외에 수많은 개선점들을 위해서이다.
- Angular js 1.x는 기존의 DOM을 기반으로 하기 때문에 DOM이 로드 될 때까지 기다리고, 거기에 뭔가를 붙이는 방식으로 동작했다. Angular2는 반대로 프레임워크로서 템플릿에 대한 온전한 조정 권한을 갖고, 심지어 DOM을 만나지 않더라도 변화 자체를 처리한다.
- 간단한 예제로 컴포넌트가 DOM에 붙기 전에도 처리되는 클릭 이벤트가 있으며, 최종적으로 만들어진 DOM에서 (click)="fooFn()"과 같은 코드를 볼수 없는 이유는 Angular2는 자체적으로 이런 이벤트를 연결하고 처리하기 때문이다.
- Angular2코드의 절반 정도는 내부 컴파일러가 차지하고 있다. 초기 로드 시점의 성능향상을 위해 지연 로딩 모듈을 사용하면서 "Ahead-of-Time"이라 불리는 컴파일 방식을 사용하는데, 이때 사용하는 컴파일러다.
- AoT컴파일 방식을 사용하지 않고 "Just-in-Time"컴파일 방식을 사용한다면 브라우저로 넘겨야하고 이러면 전송되는 코드가 많아질 것이다. AoT 접근 방식은 React의 JSX와도 비슷한 점이 있는데, 결국 전처리의 문제다.
- Angular2의 코드 빌딩 방식은 Ahead-of-Time방식으로 미리 전부 패키징하는 방식과 Just-in-Time방식으로 필요할 때 필요한 모듈을 패키징하는 방식이있다. 실제로는 같은 컴파일러를 사용하지만, 타이밍과 활용방식에 따라 구분한다. 클라이언트 입장에서 AoT방식에서는 전체 코드를 다운받아 오프라인에서 미리 렌더링하고 화면에 표시할 수 있고, JiT방식에서는 필요한 라이브러리가 있을때, 해당 모듈을 컴파일해서 사용한다.
실제 버저닝 #
* Angular 1.x
* Angular 1.0
* Angular 1.1 -> 1.2지원을 위한 이전 버전
* Angular 1.2
* Angular 1.3 -> IE8지원 중단
* Angular 1.4
* Angular 1.5
* Angular 2
* Angular 2
* Angular 3
* Angular 4
* Angular 5
* Angular 6
* Angular 7
- 위와 같이 실제 코드나 구조의 변화와 관계없이 Angular js 1.x와는 버저닝 전략 자체가 다르다. 구글 팀에서는 이 방식이 좀더 알아보기 쉽고, 코드 업데이트에 좀더 나은 가이드를 줄 수 있다고 판단했기 때문에 이러한 전략으로 바꿨다고 한다.
- Angular2에서부터 SemVer를 따르면서 버전을 사용하는 철학이 달라지게 되는데, Major, Minor, Patch로 구분하는 SerVer에서 Angular가 2가 됐던 3,4가 되든 Major버전이 바뀔 뿐 이라고 한다.
요약 #
- 버전
- 주요구조
- 컨트롤러, $scope 개념 -> 컴포넌트와 디렉티브로 대체됨. 컴포넌트의 계층 사용
- 표현문법
- 프로퍼티 바인딩에 [ x ], 이벤트 바인딩에 ( ) 표현 사용
- 모듈성
- 브라우저 호환성
- 모던 브라우저만 지원. 브라우저 호환성에 신경을 덜 써도됨
- 타입스크립트
- 타입스크립트 언어 사용을 권장함.(이점 : 클래스기반 OOP, 정적 다이핑, 제네릭)
- ES6
- 타입스크립트는 ES6의 상위집합.(이점 : 람다, 반복자, For/Of 루프, 파이선 제너레이터, 리플렉션)
- 의존성 주입
- 동적로딩 가능
- 비동기 템플릿 컴파일 가능
- 라우팅 단순화
- RxJS 사용시 리액티브 프로그래밍 지원
Suggested Pages #
