프론트엔드/앵귤러 (41) 썸네일형 리스트형 공용 컴포넌트 - 리액티브 폼 인풋 컴포넌트의 재 상용성은 앵귤러나 리액트 등 프레임워크가 제공하는 장점 중 하나로 같은 코드를 중복작성할 필요성을 줄여줍니다. 오늘은 앵귤러에서 공용 인풋 컴포넌트를 만들어 보겠습니다. 구현하기 모듈추가 리액티브 폼즈 모듈을 모듈클래스에 추가합니다 컴포넌트 생성 공용으로 상용할 컴포넌트를 생성합니다 ng g c components/shared/input 생성한 컴포넌트 클래스 파일에 폼 컨트롤과 돔요소를 연결하는 인터페이스를 구현합니다 import { ControlValueAccessor } from '@angular/forms'; 구현된 메서드는 사용하지 않음으로 아래와 같이 정리 후 필요한 코드를 추가합니다. 인풋의 타입과 레이블은 인풋마다 다르므로 @Input을 통해 필드로 설정하여 변경 가능하도록 .. 레이지 로딩 레이지 로딩은 사이트가 로딩될 때 전체페이지를 한 번에 로딩하지 않고 필요한 페이지만 로딩하고 일부페이지는 해당 페이지에 요청이 있을 때 로딩하는 방식을 말합니다. 레이지 로딩은 필요한 파일만 다운로드하기 때문에 웹사이트의 속도 등 성능향상의 장점이 있습니다. 구현하기 프로젝트 생성 (생성 시 앵귤러라이터 사용 체크) 앵귤러 - 씨엘아이 앵귤러 씨엘아이는 (커맨드라인 인터페이스)는 앵귤러 어플리케이션을 만들고 관리하는데 권장되는 도구입니다. CLI 설치 npm install -g @angular/cli 버전 및 버전 이력 확인 (https://github.com/angular/angula jin-co.tistory.com 컴포넌트 추가 구현을 위해 필요한 컴포넌트를 아래와 같이 추가합니다. ng g c .. 앵귤러 - 로컬에서 인증 URL (HTTPS) 사용하기 개발환경에서 앵귤러 애플리케이션을 구동하면 기본적으로 http 프로토콜을 사용합니다. mkcert라는 라이브러리를 활용하여 인증서를 설치하고 로컬환경에서 https를 사용하는 방법을 보겠습니다. mkcert 설치 관리자권한으로 커맨드라인을 열고 OS환경에 따라 mkcert를 설치하기 위한 커맨드를 실행합니다. ▶ 윈도우 choco install mkcert 인증서 설치 앵귤러 프로젝트에서 인증서를 저장할 폴더를 만들고 cd client mkdir ssl 해당 폴더로 이동한 뒤 cd ssl 아래 명령어를 실행하여 CA(Certificate Authority)를 설치합니다. mkcert -install 인증서를 사용할 서버를 지정합니다. mkcert localhost 완료되면 아래처럼 인증서의 위치, 키, .. 앵귤러 폼 - 리액티브 폼 앵귤러 리액티브 폼은 옵저버블을 활용하여 폼에 입력되는 값을 스트림의 형태로 관리하며, 새로운 값이 입력될 때마다 이를 감지하고 반영합니다. 템플릿 드리븐 폼과 차이점은 리액티브 폼은 저장된 데이터를 동기식으로 처리하고 원본데이터에 대한 변형이 불가하며 옵저버블의 오퍼레이터를 통해서만 가능합니다. 앵귤러 리액티브 폼을 사용하는 방법을 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 앵귤러 매터리얼 앵귤러에서 제공하는 UI 컴포넌트인 앵귤러 매터리얼을 추가해 보겠습니다.라이브러리 설치프로젝트를 열고 아래 명령어를 실행합니다. npm으로도 설치 가능하지만 ng add를 통해서 설치하게 되면 모듈에 등록하는 것 빼고 컴포넌트 사용을 위한 모든 구성이 완료되므로 편리합니다.ng add @angular/material실행을 하면 실행 여부를 다시 묻는 데 'yes'를 선택하고 테마선택, 글로벌 폰트 스타일, 애니메이션 등의 사용여부를 결정합니다.모듈에 추가추가된 라이브러리는 모듈에 추가해야 사용이 가능합니다. 정리를 위해 'app.module.ts' 파일에 바로 추가하지 않고 따로 모듈을 생성하여 추가하겠습니다. 아래 커맨드를 실행하여 모듈을 만듭니다.ng g m modules/angular-materia.. 앵귤러 directive - RouterLinkActive (활성화된 링크 표시하기) 앵귤러 라우터는 활성화된 링크를 표시해 주는 기능을 제공하는데요. 구현하기 1. 앵귤러라우터 추가하기 앵귤러 라이브러리 - Angular Router 앵귤러는 싱글페이지 애플리케이션으로 URL경로가 바뀌지 않는데요. 하지만 앱의 구조상 페이지 분리가 필요할 때도 있습니다. 앵귤러 라우팅은 이러한 기능을 담당하는 모듈로 사용법을 알아 jin-co.tistory.com ★ 모듈이 분리된 경우 라우터를 사용하는 모든 모듈에 라이터모듈을 추가해야 합니다. 2. 활성화된 메뉴표시하기 앵귤러라우터의 RouterLinkActive는 해당링크가 활성화되었을 때 부여된 값을 해당 요소에 클래스로 추가합니다. 해당 클래스에 스타일 추가하면 간단하게 활성화된 메뉴를 시각적으로 표시가 가능하겠죠. routerLinkActiv.. 앵귤러 서비스 (Service) 앵귤러의 서비스는 템플릿과 클래스 파일이 공유하는 클래스 파일로 중복코드를 줄이고 모든 컴포넌트가 상속관계에 상관없이 정보를 공유할 수 있게 해 줍니다. 생성하기 서비스 생성은 /app 하위에 폴더를 만들고 클래스 파일생성 또는 아래와 같이 앵귤러 CLI를 통해 생성가능합니다 (CLI 사용을 권장). ng genarate service service 애플리케이션 규모가 커지면 서비스도 여러 개를 가지기 때문에 서비스 폴더를 따로 생성하는 것을 권장합니다 (아래와 같이 services/ 라고 경로를 정하고 그 아래 파일을 생성하면 자동으로 폴더 생성됨). 아래 코드는 위 커맨드의 alias버전으로 services라는 폴더 하위에 서비스를 생성합니다. ng g s services/service 마지막으로 끝.. 앵귤러 directives - ngIf 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. If Name: {{i.name}} Pet Owner: {{i.petOwner}} Name: {{i.petName}} // ng-if1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-if1', templateUrl: './ng-if1.component.html', styleUrls: ['./ng-if1.component.css'], }) export class NgIf1Component implements OnInit { users: { .. 이전 1 2 3 4 ··· 6 다음
