안녕하세요. 엔지엠소프트웨어입니다. 요즘 웹(Angular & TypeScript) 관련된 내용만 정리하게 되네요. 이제 엔지엠을 비롯한 대부분의 개발 관련 이슈들이 처리되어서, 소재가 고갈된 탓도 있는듯 합니다. 대부분은 앵귤러니 타입스크립트, 노드등등... 관심이 없을거예요. 생계를 목적으로 개발에 종사하는 분들은 홈페이지에 없을테고... 그쵸^^? 아무튼~ 오늘은 이전 내용에 이어서 앵귤러 & 타입스크립트 환경에서 리소스를 어떻게 처리하고, 프로퍼티에 바인딩하는지 알아보겠습니다. 여기서 몇가지 중요한 앵귤러 설정도 포함되어 있으니 처음 접하시는 분들에게는 도움이 될거예요^^;

 

 

이전 글까지 학습하셨으면~ 아래와 같은 구조로 되어 있을거예요. 콤포넌트를 새로 만든건 아니라서 그렇습니다. 아무튼, 에셋(assets, 자산) 폴더에 images 폴더를 만들고 banner.png 파일을 추가 했습니다. 주로 CS프로그래밍에서는 resources 폴더를 사용해서 처리하는데요. (개발자 또는 회사 룰에 따라 다름.) 아시다시피 웹은 리소스에 대한 접근이 제한되어 있습니다. Angular에서는 에셋 폴더에서 리소스를 관리합니다.

 

 

아래 전체 코드에서 "Add to code"를 참고하세요. 프로퍼티 바인딩은 브라켓([])을 이용할 수 있습니다. "itemImageUrl" 속성은 이미지의 진짜 주소죠~

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>
    // Add to code.
    <br />
    <img [src]="itemImageUrl" />
  `,
  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;
  // Add to code.
  itemImageUrl = "../../../assets/images/banner.png";

  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]
    });
  }
}

 

Ctrl+S를 누르면 자동으로 컴파일되고, 화면도 갱신되는걸 알 수 있습니다. 로그인폼 아래에 이미지가 잘 표시되고 있죠?

 

 

배포를 위한 모듈이다보니 ts에 템플릿으로 UI 코드가 포함되어 있습니다. 대부분의 개발은 콤포넌트 개발 및 배포가 아닙니다. 업무를 자동화하거나 시각화하는거죠^^; 그렇다보니 개발 방향은 OOP적이면서 MVC 또는 MVP로 가게 마련입니다. 일단 앵귤러는 콤포넌트 디자인 패턴이 관점 지향 프로그래밍이고, OOP등등... 그렇다고 합니다. 서비스를 쉽게 개발할 수 있기 때문인듯하네요. 아무튼, MVC는 모델(데이타), 뷰(화면), 콘트롤러(제어 및 가공)로 역할을 나눠서 개발하는 방법입니다. 단순히 뷰에서 뭔가 요청하면 서버로부터 모델을 가져오고, 콘트롤러가 비즈니스 로직에 맞게 가공해서 뷰로 내려주는 방식이에요. 여기서 좀 더 발전해서 MVP를 쓰기도 하는데... 글쌔요^^;

 

이거 설명하는데만해도... 어마어마한 분량이 될거 같아서요. 가능하면 자료는 직접 찾아보시는게 좋겠네요. 아무튼, UI적인 요소들을 ts에서 제거하는게 좋습니다. 아래처럼요.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'nz-demo-form-normal-login',
  templateUrl: './welcome.component.html',
  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;
  itemImageUrl = "../../../assets/images/banner.png";

  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.component.html도 변경해야합니다.

<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>
<br />
<img [src]="itemImageUrl" />

 

Ctrl+S(저장)를 누르면 타입스크립트가 자동 빌드되고, 화면이 갱신됩니다. 어떤가요? html과 ts를 분리만해도 코드가 더 깔끔하고 유지보수하기가 좋아진게 느껴지죠^^; 로그인폼에 수정이 없는 경우라면 굳이 다시 컴파일하지 않아도 됩니다. 디자인적인 요소들은 html에서 처리하거나 css로 핸들링하는게 좋은 방법입니다.

 

개발자에게 후원하기

 

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

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

감사합니다~

추천0 비추천0