on
필수 각도 치트 시트
필수 각도 치트 시트
무수한 프로그래밍 언어와 개발 프레임워크가 사용 가능하게 되면서, 개발자들은 둘 이상의 언어를 사용하는 방법을 알게 될 것으로 기대된다. 여러분은 실제로 다양한 프레임워크와 언어를 잘 할 수 있습니다. 하지만 여러분이 천재가 아니라면, 각각의 도구들에 대한 모든 지침, 조각들, 그리고 방법들을 유지하는 것은 매우 어렵습니다.
그래서 저는 치트 시트를 좋아하고, 이번에는 앵글을 위한 제 네 번째 치트 시트를 여러분에게 드리는 이유입니다.
Angular는 React와 Vue.js와 함께 최고의 웹 프런트 엔드 프레임워크 중 하나이며 가장 자신 있는 프레임워크이다. 더 효율적으로 작업할 수 있도록 오늘 여러분과 함께 자랑스럽게 공유하는 치트 시트를 정교하게 작성했습니다.
프로젝트 생성 및 실행
먼저 작업 환경에 Node.js 및 Angular CLI를 설치한 후 CLI에서 프로젝트를 생성해 보겠습니다.
생성된 후에는 다음 명령 중 하나를 사용하여 애플리케이션을 빌드하고 배포할 수 있습니다.
라이브러리 설치
대부분의 경우 Angular 애플리케이션 개발을 지원하기 위해 외부 라이브러리를 설치해야 합니다. 라이브러리를 설치할 뿐만 아니라 모든 구성도 수행할 수 있으므로 첫 번째 방법을 사용하는 것이 좋습니다. 불행히도, 모든 라이브러리가 이것과 호환되는 것은 아니므로 두 가지 방법을 아는 것이 좋습니다.
구성 요소 생성 및 인스턴스화
구성요소는 Angular 아키텍처의 핵심입니다. TypeScript 정의 로직, HTML 정의 레이아웃 및 일부 CSS 정의 미관을 갖춘 재사용 가능한 엔티티입니다. 기본적으로 모든 Angular 앱은 src/app 폴더에 있는 app 이라는 주 구성 요소와 함께 제공됩니다. 앱이 실행될 때 렌더링됩니다.
아래 명령은 myComponent 라는 새 구성 요소와 해당 TypeScript, HTML 및 CSS 파일을 /src/app/my-component/f 폴더에 생성합니다. 이 구성 요소를 다른 구성 요소의 HTML 레이아웃으로 인스턴스화하는 것은 매우 간단합니다.
라우팅
라우팅은 Angular 또는 React와 같은 단일 페이지 애플리케이션(SPA) 개발 프레임워크의 가장 필수적인 측면 중 하나이다. 라우팅을 사용하면 앱에서 화면 간 탐색(실제로 Angular Component 간)을 도입할 수 있습니다.
먼저 프로젝트를 초기화할 때 Angular에서 생성한 app-routing.module.ts 파일에 경로를 정의해야 합니다.
그런 다음 주 구성 요소 HTML 파일( app.component.html )에서 다음과 같이 라우터를 인스턴스화합니다.
정의된 경로 중 하나로 사용자를 리디렉션하려면 다음 예와 같이 routerLink 지시문을 사용해야 합니다.
데이터 바인딩
각 구성 요소는 3개의 파일로 정의된다: 레이아웃(보기), 논리(컨트롤러)를 위한 TypeScript 파일, 그리고 스타일을 위한 CSS 파일.
단방향 데이터 바인딩은 컨트롤러에 정의된 뷰 객체(속성 바인딩)에서 렌더링하고 뷰가 컨트롤러에서 메소드(이벤트 바인딩)를 호출할 수 있도록 하는 메커니즘입니다. 아래 구성 요소에서 이러한 개념을 실제로 살펴보겠습니다.
구성 요소 컨트롤러(TypeScript 클래스)에서 유형 User 의 currentUser 라는 변수(다른 TypeScript 클래스에 정의됨)가 선언됩니다. 구성 요소 보기(HTML 파일)에서 {object} 표기법을 사용하여 속성 name 과 age 가 레이아웃에 렌더링됩니다. 이를 속성 바인딩이라고 합니다.
로직에서 loadNextUser()라는 메서드가 어떻게 정의되었는지 확인하십시오. 이벤트 바인딩을 통해 (event)= call 표기법을 사용하여 보기에 정의된 버튼을 클릭할 때마다 LoadNextUser()` 메서드가 트리거됩니다.
또한 양방향 데이터 바인딩이라고 하는 것이 있는데, 여기서 `[(객체)]라는 표기를 사용하면 뷰와 컨트롤러 사이의 양방향 관계가 설정되므로 컨트롤러의 바인딩된 객체에 대한 변경 사항이 뷰에서 재현되고 그 반대도 마찬가지입니다. 이 문서 뒷부분의 템플릿 기반 양식 섹션에서 이 개념을 실제로 확인할 수 있습니다.
구조 지침
구조적 지시사항을 통해 개발자는 HTML 요소를 렌더링해야 하는 시기와 횟수를 결정하기 위해 HTML 템플릿 내부에 몇 개의 코드 로직을 빠르고 쉽게 포함할 수 있다.
위의 토막글에서 사용되는 세 가지 기본 구조 지시어는 ngIf, ngFor, ngSwitch이다.
템플릿-참조 변수
구성 요소의 템플릿 내에서 HTML 요소에 참조를 할당하여 DOM 내의 다른 요소에서 해당 컨텐츠에 액세스할 수 있습니다. 이 말이 터무니없는 말처럼 들리더라도 걱정하지 마십시오. 다음과 같은 예를 통해 이해하실 수 있습니다.
이 내용은 템플릿 기반 양식을 이해하는 데 중요하며, 이 문서의 뒷부분에서 다루게 됩니다.
Flex 레이아웃을 사용한 응답형 레이아웃
요즘에는 모든 웹사이트에서 대응력이 필수적입니다. 사용자는 웹 사이트가 스마트폰, 태블릿 및 컴퓨터에서 올바르게 렌더링될 것으로 예상하므로 응답성이 높은 레이아웃을 만들기 위한 라이브러리가 필요합니다. Flex Layout은 Angular(각도)에서 선호하는 솔루션입니다.
npm과 함께 설치한 후에는 반드시 imports 어레이 내의 src/app/app.module.ts 파일로 가져와야 합니다. 이제 HTML 템플릿의 fxLayout 및 fxFlex 태그를 사용하여 응답성 있는 구성 요소를 생성할 수 있습니다.
이 예에서 반응형 레이아웃은 fxLayout 태그를 사용하여 정의되며, 여기서 요소를 행 또는 열에 배치해야 하는지 여부를 지정합니다. 여기에서는 요소 정렬이나 요소 간 간격과 같은 추가 특성도 알아냅니다. 레이아웃 내 요소의 경우 fxFlex 태그가 사용됩니다. 점을 사용하여 특정 창 크기에 대한 속성을 정의하는 방법에 주목하십시오(작은 창, 작은 창보다 큰 창...).
각도 재료
소재는 구글이 만든 디자인 프레임워크로 안드로이드 생태계에 널리 퍼져 있습니다. Angular도 구글에 의해 만들어졌기 때문에, Material은 개발자들에게 다양하고 아름답고 구현하기 쉬운 요소, 스타일, 아이콘, 레이아웃을 제공하는 사실상의 디자인 라이브러리이다.
위의 명령(프로젝트 초기화 길잡이에서 Angular Material을 설치하도록 요청할 때 "아니오"라고 말한 경우에만 해당 명령을 사용하면 앱에 적합한 색 구성표를 설정할 수 있으며 단추, 도구 모음, 목록 등과 같은 즉시 사용할 수 있는 구성 요소 집합을 제공합니다.
단추
먼저 매트 버튼 모듈 을 src/app 의 app.module.ts 파일로 가져와 가져오기 배열에 추가합니다.
이제 앱 구성 요소의 HTML 레이아웃에 재료 버튼을 추가할 수 있습니다.
매트 버튼에 대한 자세한 내용은 공식 설명서를 참조하십시오.
카드
app.module.ts 파일의 MatCard Module 을 가져온 후 재료 카드를 만드는 방법을 살펴보겠습니다.
코드가 좀 까다로워 보일 수도 있지만, 사실 아주 쉬워요. 헤더(제목, 자막 및 아바타 이미지), 본문 및 버튼 집합이 있는 카드를 만듭니다.
목록
위의 예와 같이 MatList Module 을 가져온 후 Material 목록을 생성할 수 있습니다.
이 예에서 ngFor 구조 지시문이 어떻게 사용되는지 살펴 보십시오. 구성요소에 정의된 어레이 사용자 의 각 객체에 대해 단방향 데이터 바인딩을 사용하는 사용자의 이미지, 이름 및 나이를 표시하는 매트 리스트 항목 이 생성된다.
도구 모음
MatToolbar Module 을 가져온 후 구성 요소 내에서 재료 도구 모음을 인스턴스화할 수 있습니다.
두 번째 span 요소를 살펴보십시오. 플렉스 스페이서 클래스가 보이나요? 플렉시블 스페이서 메뉴 버튼과 내 앱 스팬이 툴바 왼쪽에 정렬되고 즐겨찾기 및 공유 버튼이 오른쪽에 정렬됩니다. 구성 요소 또는 글로벌 CSS에서 정의해 보겠습니다.
여기서는 mat-icon 이라는 다른 재료 리소스를 사용합니다. 이것은 큰 아이콘 라이브러리이므로, 관심 있는 경우 전체 목록이 여기에 있습니다.
양식
양식은 웹의 모든 곳에 있습니다. 로그인 또는 등록 화면에서 연락처 페이지에 이르기까지 양식은 사용자로부터 데이터를 가져오는 가장 편리한 방법입니다.
Angular(각도)에는 템플릿 중심 형식과 반응 형식의 두 가지 형식이 있습니다. 첫 번째는 사용하기 쉽지만, 후자는 더 강력한 입력 검증을 제공하는 대형 양식에 더 권장된다. 두 가지 방법을 모두 통해 사용자 이름, 전자 메일 및 암호를 제출하기 위한 매우 간단한 등록 양식을 만드는 방법에 대해 알아보겠습니다.
템플릿 기반 양식
먼저 양식 모듈 을 app.module.ts 파일로 가져옵니다. 다음 단계는 사용자가 제출한 데이터를 저장할 사전과 일단 제출된 데이터를 처리하는 방법을 정의하는 것입니다. 이 작업은 모두 구성 요소 컨트롤러에서 수행됩니다.
그런 다음 재료 입력 요소를 사용하여 양식에 대한 템플릿을 정의합니다.
두 번째 줄에서 양식을 정의할 때 사용자가 제출 버튼을 클릭할 때 어떤 구성 요소 메서드를 호출해야 하는지 Angular에게 알리는 이벤트 바인딩을 사용하는 방법을 살펴봅니다. 동일한 행에서 템플릿 참조 변수는 나중에 양식 유효성 검사 상태에 따라 제출 단추를 사용하거나 사용하지 않도록 설정하는 데 사용됩니다.
각 양식 필드(사용자 이름, 이메일, 암호)에 대해 재료 입력(입력 mat 입력)을 그룹화한 재료 양식 필드(mat-form-field)를 정의해야 하며, 입력 내용이 올바르지 않은 경우 재료 오류(mat-error)를 입력, 선택 또는 응답합니다.
입력은 컨트롤러에 정의된 사용자 사전의 해당 키에 양방향으로 바인딩됩니다. 또한 입력이 유효한 경우에만 mat-error 를 표시하려면 템플릿 참조 변수를 정의해야 합니다.
마지막으로, 양식을 올바르게 채우지 않은 경우 비활성화되는 제출 단추가 정의되며, 양식 정의의 시작 부분에 설정된 제출() 시 메서드를 호출합니다.
반응형식
먼저 양식을 작성하기 전에 TypeScript 클래스로 양식 모델을 정의해야 합니다.
그런 다음 reactive Forms Module 을 app.module.ts 파일의 imports 배열로 가져온 후 양식을 넣을 구성 요소를 생성해야 합니다. 템플릿 중심 형식과 대조적으로, 이 접근법에서는 모든 양식 논리가 제어기에 구현된다. 또한 이 기술을 사용할 때 입력 유효성 검사가 얼마나 더 정확한지 알 수 있습니다.
간단히 말하면, 양식을 양식 그룹 개체로 선언하고 이전에 만든 모델 클래스의 개체를 인스턴스화해야 합니다. 그런 다음 자동으로 주입되는 FormBuilder 를 사용하여 양식을 생성하고 각 필드에 필요한 유효성 검사를 설정하고 양식의 데이터가 변경될 때마다 호출해야 하는 기능을 지정해야 합니다.
이 경우 이 함수는 모든 필드를 반복하여 데이터가 유효한지 확인하고 데이터가 유효하지 않은 경우 해당 오류 메시지를 표시합니다.
템플릿 기반 양식을 사용한 것처럼, 우리는 다시 재료 라이브러리를 사용하여 양식을 배치하지만 이번에는 컨트롤러에서 유효성 검사 작업을 수행한다.
외부 API와의 통신
양식을 작성하는 방법을 방금 확인했습니다. 하지만 이제 어떻게 해야 할까요? 양식의 가장 일반적인 사용 사례는 사용자에게 일부 데이터를 요청한 후 HTTP를 사용하여 일부 서버로 보내는 것입니다. HTTP로 외부 API와 통신하는 것은 모든 웹 개발자에게 필수적이다.
그러나, 그 문제에 착수하기 전에, 우리는 HTTP 요청이 Angular에서 작동하는 방식을 더 잘 이해하기 위해 서비스, 약속 및 관찰 가능성과 같은 다른 개념을 검토해야 한다.
서비스
UI 없이 서비스를 구성 요소로 생각할 수 있으므로 단일 TypeScript 파일로만 구성됩니다.
일반적으로 백엔드로부터 데이터를 가져오거나 사용자 입력을 처리하는 등의 작업을 수행합니다. 이러한 작업은 구성요소 내부에서 수행할 수 있지만, 복잡한 모든 작업에 대한 서비스를 활용하여 구성요소를 최대한 단순화하는 것이 더 나은 접근 방식입니다. 서비스는 한 줄의 코드로 구성 요소에 자동으로 주입될 수 있으므로 코드를 재활용하는 매우 좋은 방법이기도 합니다.
이제 Angular에게 이 서비스를 요청하는 모든 앱 구성 요소에 이 서비스를 주입하라고 말해야 하므로, app.module.ts 파일의 providers 섹션에 추가해 보겠습니다.
앱의 모든 구성 요소에 사용하려면 생성자에서 다음을 요청하면 됩니다.
약속들
약속은 보류 중인 값이 반환되는 비동기 프로그래밍을 위한 JavaScript 메커니즘으로, 곧 사용할 수 있거나( resolve ) 거부하지 않을 수 있습니다.
가장 일반적인 예는 외부 서버에 대한 요청이며, 응답을 받기 전에 요청이 서버에 도착할 때까지 기다렸다가 처리되어야 하므로 즉각적인 응답을 받지 못하는 경우입니다.
그러나 서버나 네트워크에 장애가 발생하여 응답을 받지 못하는 경우도 발생할 수 있습니다. 이 대기 시간 동안 앱을 차단하지 않기 위해, 약속은 요청에 대한 대답이 도착할 때 또는 문제가 발생할 때 수행할 작업을 지정할 수 있으며 프로그램 실행을 계속할 수 있습니다.
이 서비스에는 약속을 반환하는 방법이 있습니다.
구성 요소에 의해 소비됩니다.
RxJS Observiewables
RxJS는 자바스크립트의 사후 처리 프로그래밍을 위한 라이브러리이며, 비동기 프로그래밍 패러다임인 Observable<이라는 엔티티가 존재한다.T> 시간 경과에 따라 변하는 T형 값으로 구성된다.
우리의 애플리케이션 구성 요소는 값이 변경될 때마다 트리거되는 콜백을 구현하여 관찰자가 되어 이 관찰 가능에 가입할 수 있다. 이전에 반응형태를 이야기할 때 관찰 가능한 예를 보여드렸는데, 이때 우리는 양식 필드의 변화에 반응하기 위해 onValueChanged() 라는 함수를 만들었습니다.
관찰 가능한 객체의 주요 방법은 데이터가 변경될 때마다 Angular(데이터 = > {})에게 알림을 요청하도록 하는 discal(데이터 = {}) 이다. 지도, 파이프, 필터, 지연 등 함께 묶을 수 있는 다른 흥미로운 기능들이 많지만 여기서는 다루지 않을 것이다. 관심 있는 경우 RxJS 설명서를 참조하십시오.
HTTP 요청
이러한 개념을 검토한 후 Angular에서 HTTP 요청을 쉽게 이해할 수 없었습니다. Angular는 @angular/common/http 라이브러리를 통해 HTTP 요청을 기본적으로 지원합니다. HttpClient 클래스는 JavaScript XMLHttpRequest 개체의 밑바탕에 있으며 지정된 클래스의 개체로 인코딩된 서버 응답 본문을 사용하여 관찰 가능한 것을 반환합니다.
로컬 배포 API에서 "http://localhost:1234/items"에 GET 요청을 하면 스토어에서 판매 중인 항목 목록이 반환됩니다.
첫 번째 단계는 다음과 같은 저장 항목을 모델링할 클래스를 만드는 것입니다.
그런 다음 app.module.ts imports array 에서 HttpClientModule 을 가져온 후 이 API에 대한 연결을 처리하는 서비스를 생성합니다.
보시는 바와 같이, 우리는 생성자로부터 HttpClient를 직접 주입받은 다음, (getItems)(: GET request) 항목을 검색하는 방법과 새 항목( addItem)(: POST request)` 항목을 업로드하는 방법을 정의합니다. 두 경우 모두 GET 응답의 JSON 본체나 POST 요청을 처리하는 대신 Angular는 이 문제를 해결하고 우리가 만든 수업과 직접 작업할 수 있도록 합니다.
이제 앱의 모든 구성 요소에서 이 서비스를 주입하고 해당 방법에 의해 반환되는 관찰 자료를 사용할 수 있습니다.
결론
나는 네가 이 치트 시트를 즐겼기를 바란다. 애니메이션, 모듈 또는 속성 지침과 같은 일부 Angular 주제에 대해서는 다루지 않았지만, 이 기사가 너무 길어지는 것을 원치 않았습니다. 질문 및 제안사항은 모두 환영하며, 작별 인사를 하기 전에 미디엄에 게재한 다른 치트 시트와 함께 남겨드리겠습니다.
from http://devcloset.tistory.com/100 by ccl(A) rewrite - 2021-03-11 23:26:28