Web Angular NG-ZORRO 빠르고 쉽게!!! 로그인 폼 달아보기.
페이지 정보
본문
안녕하세요. 엔지엠소프트웨어입니다. 이전 시간에 이어서 NG-ZORRO 로그인 콤포넌트를 달아보도록 하겠습니다. 개발에 대해 전혀 모르는 분들이 이 글을 보시면, 대부분 이해가 안갈거구요. 이 내용만으로 어떤 시스템이 구축되는건 아닙니다. 당연하게도~ Back-end와 Database도 필요하고, 이런 서버를 구성할 수 있는 기술도 필요합니다. 요즘은 웹마스터라는 직군이 사라져서 프론엔드 개발만 하면 되니 크게 문제가 되지는 않아요^^; 하지만, 아직도 개발자가 만능이라고 생각하는 사람들이 많은건 사실입니다. 개발자는 만능이 아닌데말이죠~ VSC를 실행하면 아래와 같은 환경이 되어 있겠죠?
사실 커뮤니티나 연애, 스포츠, 정치등등... 신문 기사나 잡지와 같은 형태의 정보를 제공하는 경우 이렇게 웹페이지를 구축하는건 낭비입니다. 단순히 예를 들어서, 쇼핑몰의 상품 페이지는 클래식한 방식대로 하는게 좋습니다. 하지만, 페이지 하나에서 많은 정보를 제공하거나 이벤트에 따라 변화되어야 한다면 SPA를 도입하는게 좋죠. 앞서 쇼핑몰을 말했는데요. 상품 관리자 페이지의 경우 전체 페이지가 변경되는것 보다는 제고나 판매 수량, QA, 배송 정보, 트렌드와 같은 정보만 주고 받는게 비용 측면에서 이익입니다. 당연히 UX적으로도 좋습니다. 마치 CS 프로그램처럼 사용할 수 있으니까요^^;
그리고, 오늘 적용해볼 내용은 아래 그림과 같은 로그인 폼입니다. 웹에서 사용하는 대부분의 콤포넌트가 이미 템플릿화되어 제공되기 때문에 편리하죠. 개발자가 디자인을 잘하는건 못봤는데요. 저도 마찬가지예요 ㅋㅋ; 이 홈페이지도 디자인은 돈주고 산거구요. 아무튼~ 적용시키는 방법은 생각보다 간단합니다. 아래에 큐브 아이콘을 클릭하세요.
아래 그림과 같이 소스가 제공됩니다. 구조도 동일해서 적용 시키는데 크게 어려움은 없을거에요. 앵귤러 관련 몇가지 기술들이 필요하지만, 이건 차차 알아보도록 하구요^^;
먼저 NG-ZORRO 모듈을 설치해야 합니다. 아래와 같이 "src/app/ng-zorro-antd.module.ts" 타입 스크립트를 추가하고, 코드를 복사해줍니다.
원칙대로라면 콤포넌트를 제작해야 하지만~ 귀찮으니 기본 페이지인 welcome.component를 사용할께요.
welcome.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'nz-demo-form-normal-login',
template: `
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item>
<nz-form-control nzErrorTip="Please input your username!">
<nz-input-group nzPrefixIcon="user">
<input type="text" nz-input formControlName="userName" placeholder="Username" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="Please input your Password!">
<nz-input-group nzPrefixIcon="lock">
<input type="password" nz-input formControlName="password" placeholder="Password" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
<div nz-row class="login-form-margin">
<div nz-col [nzSpan]="12">
<label nz-checkbox formControlName="remember">
<span>Remember me</span>
</label>
</div>
<div nz-col [nzSpan]="12">
<a class="login-form-forgot">Forgot password</a>
</div>
</div>
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Log in</button>
Or <a> register now! </a>
</form>
`,
styles: [
`
.login-form {
max-width: 300px;
}
.login-form-margin {
margin-bottom: 16px;
}
.login-form-forgot {
float: right;
}
.login-form-button {
width: 100%;
}
`
]
})
export class WelcomeComponent implements OnInit {
validateForm!: FormGroup;
submitForm(): void {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
remember: [true]
});
}
}
모듈은 필요한 것들만 추가하면 됩니다.
welcome.module.ts
import { NgModule } from '@angular/core';
import { WelcomeRoutingModule } from './welcome-routing.module';
import { WelcomeComponent } from './welcome.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DemoNgZorroAntdModule } from '../../ng-zorro-antd.module';
@NgModule({
imports: [
FormsModule,ReactiveFormsModule,DemoNgZorroAntdModule,
WelcomeRoutingModule]
,
declarations: [WelcomeComponent],
exports: [WelcomeComponent]
})
export class WelcomeModule { }
마지막으로 페이지에 아래와 같이 한줄 추가하면 되지요~
welcome.component.html
<nz-demo-form-normal-login>loading</nz-demo-form-normal-login>
실행해볼까요~?
PS D:\MyAngularWorkspace\Angular-Project> ng serve
잘 동작하는군요. 반응형이라서 상당히 괜찮은 퍼포먼스를 보여줍니다. 처음 SPA 웹 프로젝트를 진행한다면 React, Vue, Angular중에서 하나를 선택하면 될거 같아요. 요즘 트렌드를 보면 리엑트(React)쪽으로 기울고 있는거 같긴합니다. 저도 아직 사용해보진 않았는데요. 자바스크립트를 잘 다룬다면 jQuery도... 금방하실테고, React나 Angular도 관련 문서를 보면 충분히 혼자 가능합니다. 깊이 들어가면 당연히 어렵겠지만요^^;
프론엔드 개발이 정말 빠르고 쉬워진거 같아요. 처음 웹을 할때만해도~ 신경쓸것들이 정말 많았거든요. 특히나 비동기 콜백의 지옥에서 벗어나게 해준것만 해도 엄청난 발전이라고 생각합니다. 아~ 한가지 더 있군요. 크로스 브라우저간 호환 문제죠. 이런것들은 이제 대부분 해소가 되었네요. 아직 익스플로러 사용하시는분은 안계시죠? 아마 안계실거라 생각합니다^^; 에이작스를 할때만해도 지옥의 노가다가 웹쪽이었는데... 이제는 CS쪽보다 편해진거 같기도 합니다. 항상 남이 하는 일은 쉬워보이죠;;
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
- 이전글Angular & TypeScript 리소스와 프로퍼티 바인딩 사용 해보기. (How to use resource and property binding in Angular.) 21.01.13
- 다음글빠르게 웹페이지를 만들어 보자! (Node.js & TypeScript & Angular & NG-ZORRO) 21.01.12
댓글목록
등록된 댓글이 없습니다.