소셜 미디어에서 의료, 전자 상거래에서 온라인 뱅킹에 이르기까지 전 세계 수십억 명의 사람들이 거의 모든 것에 웹 및 모바일 애플리케이션을 사용합니다. 이러한 앱은 편리하고 일상 생활에 도움이 되며 원활한 사용자 경험과 인터페이스를 제공합니다. 이러한 신뢰성을 제공하기 위해 이러한 앱은 어떻게 개발됩니까? 크레딧의 일부는 Angular 와 같이 널리 사용되는 프레임워크 에 사용되어 강력한 앱을 쉽게 만들 수 있습니다.
앵귤러 란 무엇입니까?
Angular는 TypeScript 로 작성된 오픈 소스 JavaScript 프레임워크입니다 . Google은 이를 유지 관리하며 주요 목적은 단일 페이지 애플리케이션을 개발하는 것입니다. 프레임워크로서 Angular는 개발자가 작업할 수 있는 표준 구조를 제공하는 동시에 분명한 이점이 있습니다. 이를 통해 사용자는 유지 관리 가능한 방식으로 대규모 응용 프로그램을 만들 수 있습니다.
프레임워크가 필요한 이유는 무엇입니까?
일반적으로 프레임워크는 일관된 구조를 제공하여 웹 개발 효율성과 성능을 향상하므로 개발자가 처음부터 코드를 계속 재구축할 필요가 없습니다. 프레임워크는 개발자에게 추가 노력 없이 소프트웨어에 추가할 수 있는 추가 기능 호스트를 제공하는 시간 절약 기능입니다.
왜 앵귤러인가?
JavaScript 는 가장 일반적으로 사용되는 클라이언트 측 스크립팅 언어입니다. 다양한 방식으로 웹 페이지와 상호 작용할 수 있도록 HTML 문서에 작성됩니다 . 광범위하게 지원되는 비교적 배우기 쉬운 언어로서 최신 응용 프로그램을 개발하는 데 적합합니다.
그러나 JavaScript가 모듈성, 테스트 가능성 및 개발자 생산성이 필요한 단일 페이지 애플리케이션 개발에 이상적입니까? 아마 아닐거야.
오늘날 우리는 대안 솔루션을 제공하도록 설계된 다양한 프레임워크와 라이브러리를 보유하고 있습니다. 프론트 엔드 웹 개발과 관련하여 Angular는 개발자가 JavaScript를 자체적으로 사용할 때 직면하는 많은 문제를 해결합니다.
다른 Angular 버전은 무엇입니까?
"Angular"는 다양한 프레임워크 버전에 대한 포괄적인 용어입니다. Angular는 2009년에 개발되었고 그 결과 많은 반복이 있었습니다.
첫째, Angular 1이라고 하고 결국 AngularJS로 알려진 원래 Angular가 있었습니다. 그런 다음 Angulars 2, 3, 4, 5가 나왔고 마침내 현재 버전인 Angular 11이 2020년 11월 11일에 릴리스되었습니다. 각 후속 Angular 버전은 이전 버전에서 개선되어 버그를 수정하고 문제를 해결하며 현재 플랫폼의 증가하는 복잡성을 수용합니다.
모바일 장치에 더 적합한 앱 및/또는 더 복잡한 앱을 디자인하려면 현재 버전으로 업그레이드하는 것이 가장 좋습니다.
앵귤러의 특징
1. 문서 객체 모델
DOM(Document Object Model)은 XML 또는 HTML 문서를 각 노드가 문서의 일부를 나타내는 트리 구조로 취급합니다.
Angular는 일반 DOM을 사용합니다. 동일한 HTML 페이지에서 10개의 업데이트가 수행되는 것을 고려하십시오. 이미 업데이트된 것을 업데이트하는 대신 Angular는 HTML 태그의 전체 트리 구조를 업데이트합니다.
2. 타입스크립트
TypeScript는 사용자가 이해하기 쉬운 JavaScript 코드를 작성할 수 있도록 JavaScript에 유형 집합을 정의합니다. 모든 TypeScript 코드는 JavaScript로 컴파일되며 모든 플랫폼에서 원활하게 실행할 수 있습니다. TypeScript는 Angular 애플리케이션 개발에 필수가 아닙니다. 그러나 더 나은 구문 구조를 제공하는 동시에 코드베이스를 더 쉽게 이해하고 유지 관리할 수 있으므로 적극 권장합니다.
다음 명령을 사용하여 TypeScript를 NPM 패키지로 설치할 수 있습니다.
npm install -g typescript
3. 데이터 바인딩
데이터 바인딩 은 사용자가 웹 브라우저를 통해 웹 페이지 요소를 조작할 수 있도록 하는 프로세스입니다. 동적 HTML을 사용하며 복잡한 스크립팅이나 프로그래밍 이 필요하지 않습니다 . 데이터 바인딩은 계산기, 자습서, 포럼 및 게임과 같은 대화형 구성 요소를 포함하는 웹 페이지에서 사용됩니다. 또한 페이지에 많은 양의 데이터가 포함되어 있는 경우 웹 페이지의 증분 표시가 향상됩니다.
Angular는 양방향 바인딩을 사용합니다. 모델 상태는 해당 UI 요소의 모든 변경 사항을 반영합니다. 반대로 UI 상태는 모델 상태의 모든 변경 사항을 반영합니다. 이 기능을 사용하면 프레임워크에서 컨트롤러를 통해 DOM을 모델 데이터에 연결할 수 있습니다.
4. 테스트
Angular는 Jasmine 테스트 프레임워크 를 사용합니다 . Jasmine 프레임워크는 다양한 종류의 테스트 케이스를 작성할 수 있는 여러 기능을 제공합니다. Karma는 구성 파일을 사용하여 시작, 보고자 및 테스트 프레임워크를 설정하는 테스트를 위한 작업 실행기입니다.
이제 Angular의 기본 기능에 익숙해졌으므로 매일 Angular를 사용하려면 아키텍처를 이해해야 합니다. Angular 인증 교육 과정 을 수강 하고 TypeScript, Bootstrap Grid System, 종속성 주입, SPA, 양식, 파이프, 약속, 관찰 가능 항목 및 Angular 클래스 테스트와 같은 개념을 학습 하여 Angular 지식을 확장할 수도 있습니다 .
앵귤러 아키텍처
Angular는 본격적인 MVC(Model-View-Controller) 프레임워크입니다. 애플리케이션이 어떻게 구성되어야 하는지에 대한 명확한 지침을 제공하고 실제 DOM을 제공하면서 양방향 데이터 흐름을 제공합니다.
다음은 Angular 애플리케이션의 8가지 빌딩 블록입니다.
1. 모듈
Angular 앱에는 앱을 시작하기 위한 부트스트랩 메커니즘을 제공하는 AppModule이라는 루트 모듈이 있습니다.
2. 구성품
응용 프로그램의 각 구성 요소 는 응용 프로그램 논리와 데이터를 보유하는 클래스를 정의합니다. 구성 요소는 일반적으로 사용자 인터페이스(UI)의 일부를 정의합니다.
3. 템플릿
Angular 템플릿은 Angular 마크업을 HTML과 결합하여 HTML 요소가 표시되기 전에 수정합니다. 데이터 바인딩에는 두 가지 유형이 있습니다.
- 이벤트 바인딩: 애플리케이션 데이터를 업데이트하여 앱이 대상 환경의 사용자 입력에 응답할 수 있도록 합니다.
- 속성 바인딩: 사용자가 애플리케이션 데이터에서 계산된 값을 HTML로 보간할 수 있습니다.
4. 메타데이터
메타데이터는 Angular에 클래스를 처리하는 방법을 알려줍니다. 클래스의 예상 동작을 구성할 수 있도록 클래스를 장식하는 데 사용됩니다.
5. 서비스
보기와 연결되지 않았지만 구성 요소 간에 공유해야 하는 데이터 또는 논리가 있는 경우 서비스 클래스가 생성됩니다. 클래스는 항상 @Injectible 데코레이터와 연결됩니다.
6. 의존성 주입
이 기능 을 사용하면 구성 요소 클래스를 선명하고 효율적으로 유지할 수 있습니다. 서버에서 데이터를 가져오거나 사용자 입력을 확인하거나 콘솔에 직접 기록하지 않습니다. 대신 이러한 작업을 서비스에 위임합니다.
AngularJS 지시문
AngularJS 지시문은 HTML에 새로운 구문을 제공하여 HTML을 확장합니다. 지시어에는 접두사 "ng-"가 있기 때문에 지시문을 쉽게 찾을 수 있습니다. DOM 요소의 마커로 간주하여 AngularJS가 요소에 특정 동작을 첨부하거나 완전히 변경하도록 지시합니다.
다음은 두 가지 샘플 지시문입니다.
- ng-model 지시문
ng-model은 HTML 컨트롤의 값을 지정된 AngularJS 표현식 값과 바인딩합니다.
- ng-bind 지시문
이 지시문은 HTML 컨트롤 값을 지정된 AngularJS 표현식 값으로 바꿉니다.
Angular의 장점
Angular는 처음부터 많은 버전이 출시되었습니다. 이 모든 버전은 프레임워크의 효율적인 작업에 추가되었습니다.
1. 커스텀 컴포넌트
Angular를 사용하면 렌더링 논리와 함께 기능을 재사용 가능한 부분으로 압축할 수 있는 고유한 구성 요소를 구축할 수 있습니다. 웹 구성 요소와도 잘 작동합니다.
2. 데이터 바인딩
Angular를 사용하면 사용자가 JavaScript 코드에서 보기로 데이터를 손쉽게 이동할 수 있으며 코드를 수동으로 작성할 필요 없이 사용자 이벤트에 반응할 수 있습니다.
3. 의존성 주입
Angular를 사용하면 사용자가 모듈식 서비스를 작성하고 필요할 때마다 주입할 수 있습니다. 이것은 동일한 서비스의 테스트 가능성과 재사용성을 향상시킵니다.
4. 테스트
테스트는 일류 도구이며 Angular는 처음부터 테스트 가능성을 염두에 두고 구축되었습니다. 애플리케이션의 모든 부분을 테스트할 수 있는 기능이 제공되며 이는 적극 권장됩니다.
5. 종합
Angular는 본격적인 프레임워크이며 서버 통신, 애플리케이션 내 라우팅 등을 위한 즉시 사용 가능한 솔루션을 제공합니다.
6. 브라우저 호환성
Angular는 크로스 플랫폼이며 여러 브라우저와 호환됩니다. Angular 애플리케이션은 일반적으로 모든 브라우저(예: Chrome, Firefox) 및 Windows, macOS 및 Linux와 같은 OS에서 실행할 수 있습니다.
댓글