본문 바로가기 메뉴 바로가기

Practical Accumulation

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

Practical Accumulation

검색하기 폼
  • 분류 전체보기 (423)
    • 광고 (0)
    • 업무 폴더 (0)
    • Demos (40)
      • 민원신청 SPA (0)
      • Email Client (14)
      • Shopping mall (9)
      • Football Club (12)
    • Languages (25)
    • Spring (185)
      • Hibernate (27)
      • Spring Basic (45)
      • Spring Security (15)
      • Spring AOP (12)
      • Spring REST (23)
      • Spring Advanced (18)
      • Spring Boot (26)
      • Spring Test (16)
      • Microservice (3)
    • Client Technologies (61)
      • Angular (30)
      • React (19)
      • Bootstrap (9)
      • Thymeleaf (3)
    • Side Technologies (46)
    • Basic (13)
      • Algorithms (10)
      • Data Structure (2)
    • Embedded Systems (2)
    • IT 관련 유용한 것들 (4)
    • 기록 (43)
  • 방명록

Client Technologies/Angular (30)
Angular : Form Validation 상태 구독하기 3 - 검증 상태 구독하는 directive 작성

1. 이 포스트는 검증 상태 구독하기 시리즈의 연속이다. 1-1 여기서는 마지막으로 입력값에 따른 input 테그 배경색상을 변경하는 directive를 생성한다. 2. MultiPlyHint Directive를 생성한다. 3. Directive를 작성한다. 3-0 우선 이 directive를 사용하는 app컴포넌트 template에 이 directive속성을 지정한다. 3-0-1 단순히 input 테그에 appMultiplyuHint 속성이 지정되어 있다. {{ op1 }} * {{ op2 }} = {{ avgTime | number: '1.0-2' }} Muliplication Valid : {{ multiplicationGroup.valid }} Muliplication errors : {{ mul..

Client Technologies/Angular 2020. 6. 22. 11:51
Angular : Form Validation 상태 구독하기 2 - 검증 상태 구독하기 기능 추가

1. 이 포스트는 검증 상태 구독하기 시리즈의 연속이다. 2. 여기서는 지난 포스트에서 작성한 코드로 검증상태를 구독하는 로직을 작성한다. 3. 검증결과를 구독하는 부분 작성한다. 3-1 FormGroup, FormControl에는 statusChanges라는 속성이 존재한다. 3-2 이것은 둘다 AbstractControl 추상클래스를 상속하고 있기 때문이다. 3-2-1 이 부모클래스에서 검증구독과 검증의 상태값을 모두 관리하고 있다. 3-3 FormGroup, FormControl의 코드를 보면 Form 구조에 대한 관리 기능과 접근 메소드가 대부분을 차지한다. 3-4 코드에서 중요한 부분은 statusChange를 구독하는 ngOnInit이다. 3-4-0 검증결과값은 검증에 따라서 'VALID', ..

Client Technologies/Angular 2020. 6. 22. 10:32
Angular : Form Validation 상태 구독하기 1 - 기본 검증로직 작성

1. 이 포스트는 Angular의 검증 절보를 구독하는 방법에 대해서 설명한다. 너무 길어지니 시리즈로 작성한다. 1-1 여기에서는 지난 포스트와 동일한 방식으로 재사용 가능한 클래스를 작성하는 것 까지 한다. 1-2 다음 포스트에서 실제로 검증상태를 구독하고 구독에 따른 적절한 처리를 하는 방법을 다룬다. 2. Angular는 Observable이라는 강력한 RxJS라이브러리르 사용한다. 2-1 그래서 상당히 편리하게 실시간으로 변경된 정보를 수신하여 처리할 수 있다. 2-2 예를 들면, url의 변화에 따른 로직을 처리하거나 한 곳에 데이터를 여러곳에서 수신하는 기능을 구현할 수 있다. 3. 검증에도 마찬가지로 각 FormControl이나 FormGroup의 상태를 구독할 수 있는 기능을 가지고 있다..

Client Technologies/Angular 2020. 6. 22. 02:04
Angular : Password Validator 구현 사용자 정의 Validator 2

1. 이번 포스트는 지난 포스트의 사용자 정의 검증로직을 좀 더 범용적으로 사용할 수 있도록 변경한다. 1-1 지난 포스트의 연속이므로 이전 포스트를 읽는 게 좋다. 2. 범용로직을 작성한다. 2-0 검증로직의 분리를 위해 class를 하나 생성하였다. 2-1 이 class에 여러개의 검증로직을 정의하여 특정한 form에 종속되지 않도록 작성하다. 2-1-1 독립성을 유지하기 위해서는 클래스는 독립성이 보장되어야 하므로 static 메소드를 사용해야 한다. 2-1-1-1 검증로직을 그대로 복사하여 붙여 넣었다. import { AbstractControl } from '@angular/forms'; export class PasswordValidators { static isMatch(form: Abst..

Client Technologies/Angular 2020. 6. 21. 11:51
Angular : Password Validator 구현 사용자 정의 Validator 1

1. 하나의 form control을 검증하는 게 아닌 form 전체에 대한 검증에 대한 포스트이다. 1-1 Java의 경우에도 Annoation을 생성하여 Form Control 상호 검증이 가능한데 유사한 개념이다. 1-2 javascript(typescript)의 경우는 functional programming 태생이라 간단히 함수만 추가로 구현하면 된다. 1-3 typescript는 interface를 사용하면 간결하기 때문에 많이 사용하는데, 웃긴건 너무 많이 너무 타입이 많다. 1-3-1 그래서 타입 정의 찾아다닌다고 짜증나는 경우가 생긴다. 2. 프로젝트를 하나 생성하고 검증을 구현할 컴포넌트 하나를 생성한다. 2-1 이제 template을 작성한다. 2-1-1 passwordconfirm...

Client Technologies/Angular 2020. 6. 21. 11:05
Angular : 재활용 가능한 Reactive Forms, ngx-mask 5. 테두리 테마 적용과 제출 버튼 비활성화

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 1. 포스트로 완결성을 위해 별로 중요하지 않은 몇 가지를 작성한다. 2. form 전체에 error가 없을 때 submit버튼이 활성화 되도록 하기 2-1 카드 컴포넌트의 submit 버튼을 disabled 속성에 form group의 valid속성을 사용했다. ... Submit Reset 3. Reset 버튼을 누르면 모든 값을 초기화하는 방법은 2가지가 있는데, 3-1 현재의 reest 버튼 처럼 type을 reset으로 두는 것이다. 버튼을 누르면 모두 초기화된다. 3-2 혹시 브라우저의 호환성이 문제가 되면 아래처럼 click이벤트를 달아 주고 3-2-1 카드 컴포넌트 클래스에 onReset() 메소드 내에..

Client Technologies/Angular 2020. 6. 17. 11:36
Angular : 재활용 가능한 Reactive Forms, ngx-mask 4. form 에러처리하기

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 1. 이제 모두 설정했으니 에러 결과를 가지고 적절하게 화면에 안내구문을 표출하는 것만 남았다. 1-1 근데 이 부분이 제일 지랄맞는 부분이다. 지저분하기 때문에 메시지를 위한 공용 모듈을 생성을 것을 추천한다. 1-2 추가로 각 form-control의 에러표출하는 부분은 control 개수만큼 필요하기 때문에 validator 컴포넌트도 필요하다. 2. 작성순서 2-1 메시지를 생성하기 위한 validator 서비스를 생성한다. 2-1-1 static으로 생성해도 좋고 DI를 해도 좋다. 어차피 하나의 객체를 공유하기 때문에 상관없다. 2-2 각 control의 에러 표출을 위한 validaotr 컴포넌트도 생성한..

Client Technologies/Angular 2020. 6. 17. 09:49
Angular : 재활용 가능한 Reactive Forms, ngx-mask 3. form 생성 및 화면 매핑하기

0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 0-1 여기서는 화면의 사용자 입력과 매핑되는 form control을 생성한다. 1. 작성 순서는 1-1 신용카드 class에서 form group, form control 생성 1-2 생성한 form 속성을 신용카드 template에 매핑한다. 2. 화면을 만들었으니 이제 입력을 관리할 수 있는 form-control이 필요하다. 2-1 이것을 만드는 이유는 입력에 대해서 세부적으로 조작을 하기 위한 것이다. 2-2 서버로 보내기 전에 미리 입력값을 검증하고 어떤 문제가 있는지를 표출하는 부분은 중요하다. 2-3 form group과 form control은 form builder로 만든다. 2-4 우선 app.m..

Client Technologies/Angular 2020. 6. 17. 09:25
이전 1 2 3 4 다음
이전 다음
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
  • 도커 개발환경 참고
  • AWS ARN 구조
  • Immuability에 관한 설명
  • 자바스크립트 멀티 비동기 함수 호출 참고
  • WSDL 참고
  • SOAP 컨슈머 참고
  • MySql dump 사용법
  • AWS Lambda with Addon
  • NFC 드라이버 linux 설치
  • electron IPC
  • mifare classic 강의
  • go module 관련 상세한 정보
  • C 메모리 찍어보기
  • C++ Addon 마이그레이션
  • JAX WS Header 관련 stackoverflow
  • SOAP Custom Header 설정 참고
  • SOAP Custom Header
  • SOAP BindingProvider
  • dispatcher 사용하여 설정
  • vagrant kvm으로 사용하기
  • git fork, pull request to the …
  • vagrant libvirt bridge network
  • python, js의 async, await의 차이
  • go JSON struct 생성
  • Netflix Kinesis 활용 분석
  • docker credential problem
  • private subnet에서 outbound IP 확…
  • 안드로이드 coroutine
  • kotlin with, apply, also 등
  • 안드로이드 초기로딩이 안되는 경우
  • navigation 데이터 보내기
  • 레이스 컨디션 navController
  • raylib
TAG
  • form
  • Spring Security
  • 하이버네이트
  • spring boot
  • one-to-many
  • 스프링부트
  • XML
  • Spring
  • jsp
  • Angular
  • hibernate
  • Rest
  • 로그인
  • 자바
  • 외부파일
  • 상속
  • WebMvc
  • 설정
  • Many-To-Many
  • Validation
  • mapping
  • MYSQL
  • RestTemplate
  • 설정하기
  • Security
  • 스프링
  • one-to-one
  • crud
  • 매핑
  • login
more
250x250

Blog is powered by Tistory / Designed by Tistory

티스토리툴바