기본 콘텐츠로 건너뛰기

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

댓글

이 블로그의 인기 게시물

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃...

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자...

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자... Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 팀 내 뛰어난 풀스택 개발자분들이 Angular.js, Python, MySQL 모두 작업 가능하시니 오셔서 함께 배우며 즐겁게 작업하시면 됩니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. 개발 업무: 레터플라이의 핵심 기능인 편지, 사진을 제작하는 레터에디터, 포토에디터 개발. 이 기능들은 "모바일 웹을 통한 출력제품 생산 자동화 기술"(특허 출원 준비중)로서 레터플라이에서 자체개발했습니다. 근무 지역: 광화문역 5번출구 바로 앞 근무 환경: 책임과 존중을 중요시하는 수평적인 분위기, 도전적이며 서로에게 배우는 문화 근무 시간: 10-19시, 출근시간 자유 지정. 급여: 연봉/스톡옵션 협의 지원 방법: 팀 지원하기 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/721 by ccl(A) rewrite - 2020-03-20 09:20:18

jqxGrid 정렬, 필터 메뉴 숨기기

jqxGrid 정렬, 필터 메뉴 숨기기 How I can remove filter to particular grid column - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets Hi, I tried that it's working. I set properties to those columns as sortable: false, filterable: false. but when I clicked on the column one drop down is appearing with options "sort ascending", "sort descending", "remove sort" and those are all in disable www.jqwidgets.com from http://devesim.tistory.com/90 by ccl(A) rewrite - 2020-03-11 04:20:29