Frameworks/Angular2

Angular2 특징 및 소개

양디 2016. 10. 25. 16:13


Angular2 가 나온지 벌써 꽤나 긴 시간이 지났습니다.


최초에 이 프레임워크에 관심이 있어 관련 포스팅을 했었는데, 이미 구 버전이 되어버린지라 새롭게 포스팅을 시작하려고 합니다.


이전 포스팅들은 다음 주소에서 확인할 수 있습니다.


http://dalkomit.com/category/Old/old-Angularjs2


공식 홈페이지의 주소는 다음과 같습니다.


https://angular.io/


Angularjs 2 는 무엇이며, 왜 사람들이 배우려고 하는 것인지에부터 차근차근 알아보려 합니다.

강좌 형식이지만, 정확히는 제 공부 내용을 정리하는 것입니다 ! 부족한 부분은 댓글로 달아주시면 찾아보도록 하겠습니다.




Angular 2 는 무엇인가?


위의 Angular2 메인 사진에 보면 알 수 있듯이, One framework라고 나와 있습니다.


프레임워크란 무엇인가에 대해 알아보자면, 랄프 존슨 교수는 이렇게 말했습니다.


"소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것"

Ralph Johnson


위의 정의에 맞게, Angular2는 웹 프론트엔드 개발을 위하여 제작된 모듈들로 구성되어 있으며, 이를 사용해서 보다 쉽게 재사용이 가능하며, 협업이 가능합니다.


프레임워크의 장점으로, 틀이 정해져 있기 때문에 사람들이 함께 일할 때에 강력한 편의성을 제공합니다.


Angular2는 MVC 패턴을 기반으로 한 프론트엔드 프레임워크입니다.


MVC 패턴은 다음과 같이 이루어져 있습니다.



사진 출처: https://basicsofwebdevelopment.files.wordpress.com/2015/01/mvc_role_diagram.png


위의 사진을 보면, Model, View, Controller 의 세 부분이 존재하고, User가 Controller와 View에 접근하는 것을 볼 수 있습니다.


관련 정보는 추후 포스팅할 계획입니다.


Angular2 에서는, MVC의 모든 부분들을 다루고 있습니다.


사용자가 화면에 보는 웹 브라우저상의 View와, 

내부에 객체들 정보인 Controller와 

이를 통해 서버와 통신하고, 데이터를 관리하는 Model의 기능을 모두 수행합니다.


구글이 만들었고, 굉장히 많은 관심을 받고 있는데, 이 관심은 다음과 같은 특징들에서 비롯합니다.


Angular2 특징

Angular2의 정식 홈페이지에서 제공하는 Angular2의 강점들은 다음과 같습니다.


정식 홈페이지에서 보기 (영어)


Cross Platform에 강합니다.


크로스 플랫폼이란, 다양한 디바이스 및 실행 환경을 제공한다는 것입니다.

    • 첫째로, 웹 앱 환경을 제공합니다. Angular2는 Single Page Application(SPA)을 위한 프레임워크이기 때문에, 그 목적에 맞게 웹앱을 제공합니다. 높은 성능과, 설치가 필요없는 다양한 기능들을 가진 웹앱을 만들 수 있습니다.
    • 둘째로, Native App을 만들기에 편합니다. Ionic2 , React Native 등의 다른 프레임워크와 결합하여 모바일 어플리케이션을 쉽게 제작할 수 있습니다.
    • 셋째로, 모바일 뿐만 아니라 데스크탑 환경에도 강합니다. Angular2는 OS의 API에 접근하는 기능 또한 가지고 있습니다.

Angular2 으로 잘 설계되고 구현한 어플리케이션 하나로, MAC, Windows, Android 등 다양한 플랫폼에서 작동이 가능한 어플리케이션을 제작할 수 있습니다.


Angular2는 데이터를 양방향으로 바인딩합니다.


https://docs.angularjs.org/img/Two_Way_Data_Binding.png

 

어플리케이션에서 사용하는 데이터를 양방향으로 바인딩한다는 것은, 


1방향 : 내부의 데이터가 바뀌는 것을 View에서 바로 확인할 수 있다는 것이며,

2방향: 각종 Form들을 통하여(Controller) 내부의 데이터를 바꿀 수 있다는 것입니다.



위의 움짤을 보시면, input을 통해 집어넣는 정보에 따라 위의 view가 바로 바뀌는 것을 볼 수 있습니다.


input의 변경 -> 내부 데이터 변경 -> view의 변경 으로 데이터가 움직이는 것입니다.


실제로 환경을 세팅하고, 다양한 기능을 직접 사용해보도록 하겠습니다.



댓글