Skip to content

Angular 버전별 특징 #
Find similar titles

Angularjs 1.x의 한계와 Angular 2로의 변화 #

Angularjs 1.x의 한계 #

 * 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 js 1.x #

  • Angular 1.x는 몇 년 동안 수많은 버전들과 수많은 변동 사항이 있었다.

Angular 2와 Angular 3 #

  • 이미 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버전이 바뀔 뿐 이라고 한다.

요약 #

  • 버전
    • 버전 1.x -> 버전 2이상
  • 주요구조
    • 컨트롤러, $scope 개념 -> 컴포넌트와 디렉티브로 대체됨. 컴포넌트의 계층 사용
  • 표현문법
    • 프로퍼티 바인딩에 [ x ], 이벤트 바인딩에 ( ) 표현 사용
  • 모듈성
    • 핵심기능이 모듈로 이전됨
  • 브라우저 호환성
    • 모던 브라우저만 지원. 브라우저 호환성에 신경을 덜 써도됨
  • 타입스크립트
    • 타입스크립트 언어 사용을 권장함.(이점 : 클래스기반 OOP, 정적 다이핑, 제네릭)
  • ES6
    • 타입스크립트는 ES6의 상위집합.(이점 : 람다, 반복자, For/Of 루프, 파이선 제너레이터, 리플렉션)
  • 의존성 주입
    • 향상됨. 바인딩으로 기명 의존성 가능
  • 동적로딩 가능
  • 비동기 템플릿 컴파일 가능
  • 라우팅 단순화
  • RxJS 사용시 리액티브 프로그래밍 지원

Suggested Pages #

0.0.1_20140628_0