기본 콘텐츠로 건너뛰기

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

댓글

이 블로그의 인기 게시물

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다.

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다. - 좋아요 아래와 같은 업무를 훌륭히 감당하실 분을 모십니다.서비스 관련 DB 모델링, DB 최적화 작업서버 & DB 관리Frontend & Backend 인터페이스의 최적화 작업 화합과 성장을 같이! - Angular JS의 경험 - Node.js - javascript 능숙자 - DRMS 사용 능숙자 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/742 by ccl(A) rewrite - 2020-03-22 12:20:20

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...