Angular 개발자가 배워야 할 19가지-JS 튜토리얼-php.cn

이 글에서는 훌륭한 Angular 개발자가 되기 위해 배워야 할 19가지 사항을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular 개발자가 배워야 할 19가지

To-Do 앱은 기본적으로 프런트 엔드 개발의 "Hello World"와 동일합니다. 애플리케이션 생성의 CRUD 측면을 다루지만 일반적으로 프레임워크나 라이브러리가 수행할 수 있는 작업의 표면적인 부분만 설명합니다.

Angular는 항상 변화하고 업데이트되는 것처럼 보일 수 있지만 실제로는 여전히 동일하게 유지되는 것들이 있습니다. 다음은 JavaScript 프레임워크를 올바르게 활용하기 위해 Angular에 대해 배워야 할 핵심 개념에 대한 개요입니다. [관련 튜토리얼 추천 : "angular 튜토리얼"]

Angular라고 하면 배워야 할 게 너무 많아요. 단순히 어디서 검색해야 할지, 어떤 키워드를 입력해야 할지 몰라서 초보자의 고리에 갇혀 있는 경우가 많습니다. 검색하세요. 아래에서 이야기할 이 가이드(그리고 Angular 자체에 대한 간략한 요약)는 실제로 Angular 2+를 처음 사용하기 시작했을 때 갖고 싶었던 것입니다.

1. Modular Angular Architecture

이론적으로 모든 Angular 코드를 한 페이지에 담아 하나의 큰 함수에 넣을 수 있지만 권장되지 않으며 코드를 구성하는 효율적인 방법이 아니며 목적을 무너뜨립니다. Angular의 존재.

Angular는 프레임워크 아키텍처의 중요한 부분으로 모듈 개념을 사용합니다. 이는 존재 이유가 단 하나인 코드 모음을 의미합니다. Angular 앱은 기본적으로 모듈로 구성됩니다. 일부는 독립형이고 일부는 공유됩니다.

애플리케이션에서 모듈을 구성하는 방법은 다양하며, 다양한 아키텍처를 더 깊이 이해하면 애플리케이션이 성장함에 따라 확장하는 방법을 결정하는 데도 도움이 될 수 있습니다.

검색 키워드:

Angular 아키텍처 패턴
확장 가능한 Angular 애플리케이션 아키텍처

2. 단방향 데이터 흐름 및 불변성

1, 양방향 바인딩이 캡처되었습니다. 많은 프론트엔드 개발자들의 마음입니다. 이는 실제로 Angular의 원래 판매 포인트 중 하나였습니다. 그러나 시간이 지남에 따라 애플리케이션이 더욱 복잡해지기 시작하면 성능 측면에서 문제가 발생하기 시작합니다.

양방향 바인딩이 모든 곳에서 필요한 것은 아닌 것으로 나타났습니다.

Angular 2+에서는 여전히 양방향 바인딩이 가능하지만 개발자가 명시적으로 요청한 경우에만 가능합니다. 이렇게 하면 코드 뒤에 있는 사람이 데이터 방향과 데이터 흐름에 대해 생각하게 되고 애플리케이션이 데이터 흐름 방식을 결정할 수도 있습니다. 보다 유연하게 처리할 수 있습니다.

검색 키워드:

Angular 데이터 흐름 모범 사례
Angular의 단방향 흐름
단방향 바인딩의 장점

3.

지시문은 사용자 정의 요소를 통한 HTML의 확장입니다. 속성 지시문을 사용하면 요소의 속성을 변경할 수 있으며, 구조적 지시문은 DOM에서 요소를 추가하거나 제거하여 레이아웃을 변경합니다.

예를 들어 ngSwitch 및 ngIf는 매개변수를 평가하고 DOM의 특정 부분이 존재해야 하는지 여부를 결정하므로 구조적 지시문입니다.

속성 지시문은 요소, 구성 요소 또는 기타 지시문에 첨부된 사용자 정의 동작입니다.

이 두 지시문을 사용하는 방법을 배우면 애플리케이션의 기능을 확장하고 프로젝트에서 중복 코드의 양을 줄일 수 있습니다. 특성 지시문은 애플리케이션의 다른 부분에서 사용하기 위해 특정 동작에 집중하는 데 도움이 될 수도 있습니다.

검색 키워드:

Angular 속성 지시어
Angular 구조적 지시어
Angular 구조적 지시어 패턴

4.

모든 소프트웨어에는 고유한 생명이 있습니다. 특정 콘텐츠가 생성, 렌더링 및 삭제되는 방식을 결정하는 주기입니다. Angular의 구성 요소 수명 주기는 다음과 같습니다.

create → render → render children → check when data-bound properties change → destroy → remove from DOM
이 주기에서 중요한 순간을 포착하고 특정 순간이나 이벤트에 고정할 수 있습니다. 이를 통해 우리는 구성 요소 존재의 다양한 단계에 따라 적절한 응답을 만들고 동작을 구성할 수 있습니다.

예를 들어 페이지를 렌더링하기 전에 일부 데이터를 로드해야 할 수도 있고, ngOnInit()를 통해 이를 달성할 수 있으며, 데이터베이스 연결을 끊어야 할 수도 있으며 이는 ngOnDestroy()를 통해 달성할 수 있습니다.

검색 키워드:

5.Http 및 관찰 가능한 개체 서비스

이것은 Angular에만 국한된 기능은 아니지만 ES7에서 제공됩니다. Angular는 이를 프레임워크 지원 기능의 일부로 구현하고 이를 이해하며 React, Vue 및 모든 JavaScript 관련 라이브러리 또는 프레임워크에도 잘 변환됩니다.

관찰 가능한 개체 서비스는 데이터를 효율적으로 사용할 수 있는 패턴으로, 이벤트 기반 시스템에서 데이터를 구문 분석, 수정 및 유지 관리할 수 있습니다. 모든 것이 데이터이기 때문에 HTTP와 Observable을 완전히 벗어날 수는 없습니다.

검색 키워드:

JavaScript 관찰 가능 개체 패턴
Angular HTTP 및 관찰 가능 개체
ES7 관찰 가능 기능

6.

Angular를 작성할 때 애플리케이션을 개발할 때 우리는 모든 것을 컴포넌트에 넣는 경향이 있습니다. 그러나 이는 모범 사례가 아닙니다. Angular의 Smart/Dumb 구성 요소 개념은 특히 초보자 그룹에서 더 많은 논의가 필요합니다.

구성 요소가 스마트/멍청한지 여부에 따라 애플리케이션의 전체 계획에서 해당 구성 요소가 수행하는 역할이 결정됩니다. 멍청한 구성 요소는 일반적으로 상태가 없으며 해당 동작을 예측하고 이해하기 쉽습니다. 그러므로 구성 요소를 가능한 한 멍청하게 만드십시오. 스마트 구성요소는 입력과 출력을 포함하기 때문에 마스터하기가 더 어렵습니다. Angular의 강력한 기능을 제대로 활용하려면 코드와 코드의 상호 관계를 처리하는 방법에 대한 패턴과 사고 방식을 제공하는 Smart/Dumb 구성 요소 아키텍처를 연구하세요.

검색 키워드:

Smart/Dumb Angular 구성 요소
Stateless Dumb 구성 요소
데모 구성 요소
Angular의 스마트 구성 요소

7. 애플리케이션 구조 및 모범 사례

CLI는 구조와 모범 사례에 관해서만 지금까지 안내할 수 있습니다. Angular 애플리케이션(또는 일반적인 애플리케이션)을 구축하는 것은 집을 짓는 것과 같습니다. 커뮤니티는 가장 효율적이고 효과적인 애플리케이션을 달성하기 위해 수년 동안 설정 프로세스를 최적화해 왔습니다.

Angular도 예외는 아닙니다.

Angular를 배우려는 사람들이 Angular에 대해 제기하는 대부분의 불만은 구문이 접근하기 쉽고 명확하지 않기 때문입니다. 그러나 응용 프로그램의 구조적 지식을 얻으려면 컨텍스트, 요구 사항 및 개념적 수준과 실제 수준 모두에서 이들이 어떻게 조화를 이루는지에 대한 이해가 필요합니다. Angular의 다양한 잠재적 애플리케이션 구조와 모범 사례를 이해하면 애플리케이션 구축 방법에 대한 새로운 관점을 얻을 수 있습니다.

검색 키워드:

단일 저장소 Angular 앱
Angular 라이브러리, Angular 패키지
Angular
Angular 마이크로 애플리케이션
모놀리식 저장소

8. 바인딩 구문

바인딩은 JavaScript 프레임워크의 결정체이며, 이는 애초에 JavaScript 프레임워크가 존재하는 이유 중 하나입니다. 템플릿 바인딩은 정적 HTML과 JavaScript 사이의 격차를 해소하며, Angular의 템플릿 바인딩 구문은 두 기술 사이의 촉진자 역할을 합니다.

사용 방법과 시기를 익히면 한때 정적인 페이지를 대화형 페이지로 변환하는 것이 훨씬 쉽고 덜 짜증납니다. 속성 바인딩, 이벤트, 보간, 양방향 바인딩 등 다양한 바인딩 시나리오를 연구합니다.

검색 키워드:

Angular 속성 바인딩
Angular 이벤트 바인딩
Angular 양방향 바인딩, 각도 보간
Angular 전달 상수

9.기능 모듈 및 라우팅

Angular에서는 기능 모듈의 성능이 과소평가됩니다. 이는 실제로 비즈니스 요구 사항을 구성하고 대응하는 훌륭한 방법입니다. 장기적으로 책임을 제한하고 코드 오염을 방지하는 데 도움이 됩니다.

5가지 유형의 기능 모듈(도메인 기능 모듈, 라우팅 기능 모듈, 라우팅 모듈, 서비스 기능 모듈 및 식별 가능한 구성 요소 기능 모듈)이 있으며, 각 모듈은 특정 유형의 기능을 처리합니다. 라우팅과 함께 기능 모듈을 사용하는 방법을 배우면 개별 기능 세트를 생성하고 애플리케이션에 문제를 명확하고 명확하게 분리하는 데 도움이 될 수 있습니다.

검색 키워드:

Angular 기능 모듈
Angular의 공유 기능 구조
기능 모듈 공급자
라우팅 및 기능 모듈의 지연 로딩

10. 유효성 검사(반응형 양식 및 유효성 검사기)

양식은 모든 프런트 엔드 개발에서 피할 수 없는 부분입니다.

인증도 양식과 함께 나타납니다.

Angular에서 스마트한 데이터 기반 양식을 구성하는 방법에는 여러 가지가 있습니다. 가장 널리 사용되는 형식 반복은 반응형 형식입니다. 그러나 템플릿 기반 양식 및 사용자 정의 유효성 검사기와 같은 다른 옵션도 있습니다.

Validator가 CSS와 어떻게 작동하는지 이해하면 작업 흐름 속도를 높이고 애플리케이션을 유효성 검사 오류 준비 공간으로 변환하는 데 도움이 됩니다.

검색 키워드:

Angular 형식 검증
템플릿 기반 검증
반응형 양식 검증
Angular의 동기 및 비동기 유효성 검사기
내장 유효성 검사기
Angular 사용자 정의 유효성 검사기
교차 필드 교차 유효성 검사

11. 콘텐츠 프로젝션

Angular에는 다음과 같은 것이 있습니다. 상위 구성 요소에서 하위 구성 요소로 데이터를 효과적으로 전달하는 콘텐츠 프로젝션. 복잡하게 들릴 수도 있지만 실제로는 마스터 뷰를 생성하기 위해 뷰 내에 뷰를 배치하는 작업입니다.

우리는 일반적으로 상위 뷰 내에 하위 뷰를 중첩할 때 콘텐츠 투영을 피상적인 의미로 이해합니다. 그러나 이해를 넓히려면 서로 다른 뷰 간에 데이터가 전달되는 방식도 이해해야 합니다. 콘텐츠 프로젝션을 이해하는 것이 도움이 되는 곳입니다.

콘텐츠 프로젝션을 이해하면 애플리케이션의 데이터 흐름과 가변성이 발생하는 위치를 파악하는 데 도움이 될 수 있습니다.

검색 키워드:

Angular 콘텐츠 투영
Angular 상위-하위 뷰 관계
Angular 뷰 데이터 관계

12.on푸시 변경 감지

기본적으로 Angular 기본 변경 감지 전략을 사용합니다. 이는 구성 요소가 항상 확인된다는 의미입니다. 기본값을 사용하는 데는 아무런 문제가 없지만 변경 사항을 감지하는 데는 비효율적인 방법이 될 수 있습니다.

소규모 애플리케이션의 경우 실행 속도와 성능이 나쁘지 않습니다. 그러나 애플리케이션이 특정 크기에 도달하면 실행하기가 매우 번거로워질 수 있으며, 특히 오래된 브라우저에서는 더욱 그렇습니다.

onPush 변경 감지 전략은 어떤 일이 발생했는지 지속적으로 확인하는 대신 특정 트리거에 의존하기 때문에 애플리케이션 속도를 크게 향상시킵니다.

검색 키워드:

Angular onPush 변경 감지

13. 경로 보호, 사전 로딩, 지연 로딩

어떤 유형의 로그인이 있는 경우 경로 보호가 필요합니다. 승인되지 않은 보기로부터 특정 보기를 보호할 수 있는데, 이는 많은 응용 프로그램의 필수 요구 사항입니다. 경로 보호는 라우터와 요청 경로 간의 인터페이스 역할을 합니다. 경로에 대한 액세스가 허용되는지 여부를 결정하는 것은 의사 결정자입니다. 경로 보호의 세계에는 토큰 만료, 사용자 인증, 경로 보안 등을 기반으로 하는 경로 결정 등 탐구할 내용이 많습니다.

사전 로드 및 지연 로드는 앱 로드 시간을 단축하여 사용자 경험도 향상시킵니다. 사전 로드 및 지연 로드는 특정 이미지 세트를 로드할지 여부를 결정하는 것뿐만 아니라 번들의 아키텍처를 향상하고 다양한 범위 및 도메인에 존재할 수 있는 애플리케이션의 다양한 부분을 로드할 수도 있다는 점은 주목할 가치가 있습니다.

검색 키워드:

Angular 경로 보호
Angular 인증 모드
Angular 사전 로딩 및 지연 로딩 모듈
Angular 안전 경로 모드

14.파이프 정의 이후

Angular Pipes를 사용하면 데이터 형식을 놀라울 정도로 쉽게 만들 수 있습니다. 사전 구성되고 기본 제공되는 많은 파이프라인은 날짜, 통화, 백분율, 대소문자 등 많은 항목을 다루지만 필요한 모든 것을 다루지는 않습니다.

여기서 맞춤형 파이프라인이 유용합니다. 자신만의 필터를 쉽게 만들고 데이터 형식을 원하는 대로 변환할 수 있습니다. 정말 쉬우니 꼭 확인해보세요!

검색 키워드:

Angular 사용자 정의 파이프라인

15. @viewChild 및 @ContentChild 데코레이터

viewChild 및 contentChild는 구성 요소가 서로 통신하는 방법입니다. Angular의 요점은 퍼즐처럼 함께 컴파일되는 여러 구성 요소가 있지만 해당 구성 요소가 서로 격리되어 있으면 퍼즐이 실제로 큰 도움이 되지 않는다는 것입니다.

여기서 viewChild와 contentChild가 들어옵니다. 이 두 데코레이터를 사용하는 방법을 배우면 관련 구성 요소에 액세스할 수 있습니다. 이를 통해 데이터 공유 작업을 더 쉽게 구현할 수 있으며 관련 구성 요소에 의해 트리거되는 데이터 및 이벤트를 전송할 수 있습니다.

검색 키워드:

Angular 수정자
Viewchild 및 contentchild in Angular
Angular 구성 요소 데이터 공유

16.

구성품은 Angular의 빌딩 블록. 그러나 모든 구성 요소가 고정된 것은 아니며 일부 구성 요소는 미리 컴파일되지 않고 동적으로 생성되어야 합니다.

동적 구성 요소를 사용하면 애플리케이션이 특정 구성 요소를 동적으로 생성할 수 있습니다. 정적 구성 요소는 상황이 변경되지 않는다고 가정합니다. 예상되는 입력과 출력을 통해 예측할 수 있습니다.

그러나 동적 구성 요소는 요청 시 렌더링됩니다. 외부 소스와 해당 업데이트를 수신할 수 있는 애플리케이션이나 페이지에서 작업이 발생하는 반응을 구축할 때 매우 편리합니다.

검색 키워드:

Angular의 동적 구성 요소
동적 구성 요소 및 ng-템플릿
ㅋㅋㅋ 또한 애플리케이션 내에서 사용하기 위해 내보낼 수 있는 깔끔한 템플릿을 생성할 수도 있습니다.

위 내용이 혼란스럽게 들린다면 먼저 Angular 지시문과 그 존재 목적을 찾아봐야 합니다. @Host, @Hostingbind 및 importAs는 이를 구현하는 데 도움이 되는 지시문의 특성입니다.

검색 키워드:

Angular 지시문 패턴

Angular의 @Host, @Hos tingbinding 및 importAs

18. RxJ를 사용한 상태 관리
최종 결정 상태 사용자에게 표시되는 데이터입니다. 상태가 지저분한 스파게티면이라면 전체 데이터 구조가 어떤 변경에도 취약해질 가능성이 있습니다.

Angular에서 상태가 어떻게 작동하는지 이해하기 시작하면 데이터가 작동하는 방식과 이유를 이해하게 됩니다. Angular에는 자체 상태 관리 시스템이 있지만 RxJ는 상태 및 관련 데이터를 중앙 집중화하는 훌륭한 방법입니다. 상위-하위 관계 체인에서 데이터가 손실될 수 있습니다. RxJ는 중앙 집중식 저장소를 생성하여 사물을 분리합니다.

검색 키워드:

Angular RxJs

Flux/Redux 원칙

Angular 상태 관리 원칙
19. 종속성 주입 및 영역
"종속성 주입"은 일반적으로 거대한 개념이므로 잘 알지 못한다면 꼭 찾아보아야 할 개념입니다. 주로 생성자를 통해 Angular에서 종속성 주입을 효율적으로 생성하는 방법에는 여러 가지가 있습니다. 이는 모든 것을 로드하는 대신 필요한 것만 가져와 애플리케이션을 더욱 효율적으로 만드는 방법입니다.

"의존성 주입"처럼 "영역"도 Angular 고유의 개념입니다. 이는 애플리케이션이 처음부터 끝까지 비동기 작업을 감지하는 방법입니다. 이러한 비동기 작업은 애플리케이션의 내부 상태와 그에 따른 뷰를 변경할 수 있기 때문에 이는 중요합니다. "영역"은 변경 감지 프로세스를 용이하게 합니다.

검색 키워드:

Angular Zone

의존성 주입

Angular DI
최종 단어
Angular는 훌륭한 주제입니다. Angular 애플리케이션을 구축하면 학습 과정에 도움이 될 수 있지만 때로는 자신이 모르는 것이 무엇인지 모를 때도 있습니다. 처음 시작할 때는 모르는 것을 이해하기 어렵습니다. 이 짧은 가이드가 일반적인 Angular 튜토리얼을 넘어 여러분에게 영감을 주고 Angular에 대한 보다 포괄적인 이해를 제공할 수 있기를 바랍니다.