NGMsoftware

NGMsoftware
로그인 회원가입
  • 매뉴얼
  • 학습
  • 매뉴얼

    학습


    Web Angular NG-ZORRO 빠르고 쉽게!!! 로그인 폼 달아보기.

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. 이전 시간에 이어서 NG-ZORRO 로그인 콤포넌트를 달아보도록 하겠습니다. 개발에 대해 전혀 모르는 분들이 이 글을 보시면, 대부분 이해가 안갈거구요. 이 내용만으로 어떤 시스템이 구축되는건 아닙니다. 당연하게도~ Back-end와 Database도 필요하고, 이런 서버를 구성할 수 있는 기술도 필요합니다. 요즘은 웹마스터라는 직군이 사라져서 프론엔드 개발만 하면 되니 크게 문제가 되지는 않아요^^; 하지만, 아직도 개발자가 만능이라고 생각하는 사람들이 많은건 사실입니다. 개발자는 만능이 아닌데말이죠~ VSC를 실행하면 아래와 같은 환경이 되어 있겠죠?

    MkrfT9B.gif

     

     

    사실 커뮤니티나 연애, 스포츠, 정치등등... 신문 기사나 잡지와 같은 형태의 정보를 제공하는 경우 이렇게 웹페이지를 구축하는건 낭비입니다. 단순히 예를 들어서, 쇼핑몰의 상품 페이지는 클래식한 방식대로 하는게 좋습니다. 하지만, 페이지 하나에서 많은 정보를 제공하거나 이벤트에 따라 변화되어야 한다면 SPA를 도입하는게 좋죠. 앞서 쇼핑몰을 말했는데요. 상품 관리자 페이지의 경우 전체 페이지가 변경되는것 보다는 제고나 판매 수량, QA, 배송 정보, 트렌드와 같은 정보만 주고 받는게 비용 측면에서 이익입니다. 당연히 UX적으로도 좋습니다. 마치 CS 프로그램처럼 사용할 수 있으니까요^^;

    Rkzt01g.png

     

     

    그리고, 오늘 적용해볼 내용은 아래 그림과 같은 로그인 폼입니다. 웹에서 사용하는 대부분의 콤포넌트가 이미 템플릿화되어 제공되기 때문에 편리하죠. 개발자가 디자인을 잘하는건 못봤는데요. 저도 마찬가지예요 ㅋㅋ; 이 홈페이지도 디자인은 돈주고 산거구요. 아무튼~ 적용시키는 방법은 생각보다 간단합니다. 아래에 큐브 아이콘을 클릭하세요.

    QQkEURg.png

     

     

    아래 그림과 같이 소스가 제공됩니다. 구조도 동일해서 적용 시키는데 크게 어려움은 없을거에요. 앵귤러 관련 몇가지 기술들이 필요하지만, 이건 차차 알아보도록 하구요^^;

    9aujjAI.png

     

     

    먼저 NG-ZORRO 모듈을 설치해야 합니다. 아래와 같이 "src/app/ng-zorro-antd.module.ts" 타입 스크립트를 추가하고, 코드를 복사해줍니다.

    B3yIcHL.png

     

     

    원칙대로라면 콤포넌트를 제작해야 하지만~ 귀찮으니 기본 페이지인 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도 관련 문서를 보면 충분히 혼자 가능합니다. 깊이 들어가면 당연히 어렵겠지만요^^;

    ej98Rdl.png

     

     

    프론엔드 개발이 정말 빠르고 쉬워진거 같아요. 처음 웹을 할때만해도~ 신경쓸것들이 정말 많았거든요. 특히나 비동기 콜백의 지옥에서 벗어나게 해준것만 해도 엄청난 발전이라고 생각합니다. 아~ 한가지 더 있군요. 크로스 브라우저간 호환 문제죠. 이런것들은 이제 대부분 해소가 되었네요. 아직 익스플로러 사용하시는분은 안계시죠? 아마 안계실거라 생각합니다^^; 에이작스를 할때만해도 지옥의 노가다가 웹쪽이었는데... 이제는 CS쪽보다 편해진거 같기도 합니다. 항상 남이 하는 일은 쉬워보이죠;;

     

    개발자에게 후원하기

    MGtdv7r.png

     

    추천, 구독, 홍보 꼭~ 부탁드립니다.

    여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

    감사합니다~

    • 네이버 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기
    추천0 비추천0

    댓글목록

    등록된 댓글이 없습니다.