기본 콘텐츠로 건너뛰기

What is Angular?

What is Angular?

앵귤러? What is Angular?

#1 앵귤러 (Angular)

Angular는 SPA ( Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다.

웹 애플리케이션, 모바일 앱, 네이티브 모바일, 데스크톱 애플리케이션까지 Front-end 개발에 필요한 기능을 두루 갖추고 있다.

정적 타입을 제공하는 'TypeScript' 를 주력 언어로 채택하여 대규모 어플리케이션 개발에 보다 적합한 환경을 제공해준다.

#1-1 Angular 와 AngularJS의 다른 점

■ AngularJS의 Controller와 #scope 기반 개발에서 컴포넌트 기반 개발 (CBD, Component Based Developmement)로 전환 ■ AngularJS 의 angular.module 과 jQlite 보다 향상된 모듈 시스템과 DOM 제어 기능을 제공하며 API 또한 간소화 ■ 선택적 데이터 바인딩 (단방향, 양방향)을 지원하고 디렉티브와 서비스, 의존성 주입의 간소화 ■ 주력 개발 언어로 TypeScript 를 도입하여 대규모 개발에 적합한 정적 타입과 인터페이스, 제네릭 등 타입 체크 기능을 제공 ■ ECMAScript 6 에서 새로 도입된 모듈, 클래스 등과 ECMAScript 7 의 데코레 이터 지원 ■ Angular CLI 제공

이렇게 대략 6가지의 차이점이 존재한다.

.

.

.

Angular는 AngularJS의 후속 버전이긴 하나 호환성이 없는 새로운 프레임워크로 이해하는 것이 좋다.

AngularJS보다 배우기 쉬우며 성능이 향상되었고 애플리케이션 구조는 보다 단순해졌다.

#2 Angular의 장점

● 컴포넌트 기반 개발

개발 생산성을 높이며 대규모 애플리케이션에 적합한 구조이다

● TypeScript의 도입

높은 수준의 인델리센스, 코드 어시스트, 타입 체크, 리팩토링 등을 지원 한다.

● 개발 도구의 통합 및 개발 환경 구축 자동화

Angular CLI를 통해 간단한 명령어로 프로젝트 생성, 빌드, 테스트, 구성요소등을 간편하게 추가가 가능하다.

● 다이제스트 루프로 인한 성능 저하 문제 해결

AngularJS와 비교할 때 첫 페이지 로딩 시간은 2.5배, 리렌더링도 4.2배 정도 빨라졌다.

● AoT 컴파일

브라우저가 실행 가능한 코드로 사전에 컴파일 하여 실행 속도를 향상시킨다. 또한 JIT 컴파일러가 필요 없기에 프레임워크 크기를 50% 줄일 수 있다.

● 지연 로딩

애플리케이션에서 사용되는 모든 모듈을 한꺼번에 로딩하지 않고 필요한 시점에 필요한 모듈만을 로딩한다. 이로 인해 페이지 로딩 속도를 높일 수 있다.

● 코드 최적화

코드 자체를 지속적으로 최적화 하고 있어 45KB 정도의 크기로 축소되었다. 더불어 "모바일 퍼스트"를 지향하는 고성능 프레임워크를 표방하고 있는 만큼 코드 최적화는 앞으로도 계속 진행될 것으로 보인다.

#3 브라우저 지원 범위

Chrome Firefox Edge IE Safari IOS Android IE Mobile latest latest 14 11 10 10 Nougat(7.0) ~ Marshmallow(6.0) 11 13 10 9 9 Lollipop(5.0 ~ 5.1) 9 8 8 KitKat(4.4) 7 7 Jelly Bean(4.1 ~ 4.3)

이렇게 Angular를 알아보았으며, 훗날에는 Angular를 이용해 프로젝트를 진행해볼 생각입니다!

부족한 글 읽어주셔서 감사드립니다 😁

from http://tommy1245.tistory.com/2 by ccl(A) rewrite - 2020-03-06 06:20:33

댓글

이 블로그의 인기 게시물

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22

Angular2 시작하기

Angular2 시작하기 Angular2 시작하기 1. NodeJS 설치 - https://nodejs.org/ko/ NodeJS 공식 홈페이지 접속하여 Node를 다운 후 설치. 2. NPM 을 통한 Angular-Cli 설치 Window Command 를 통하여 npm install -g @angular/cli 명령어를 실행한다. 위와 같이 정상적으로 angular-cli 가 설치되었다면 Project 가 위치할 폴더를 생성. 참고 사이트 : https://cli.angular.io/ 3. Angular-cli 를 통한 Angular Project 생성. Window Command 를 통한 ng new [폴더명] 위와 같이 Angular 기본 프로젝트가 생성됨. 해당 프로젝트로 폴더로 이동하여 ng serve 명령어 실행 Node 를 통해 Angular 프로젝트 실행. http://localhost:4200 접속하게되면 위와같이 Angular 프로젝트 실행된다. 앞으로 Angular2 의 개념들을 포스팅하면서 Spring-Boot , Spring Project의 Angular-cli 를 이용하여 ng build 하여 포팅하는 글을 올리겠습니다. from http://overclassbysin.tistory.com/3 by ccl(A) rewrite - 2020-03-07 07:55:13