1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-0 이 포스트는 동기, 비동기 검증로직을 모두 생성한다. 1-0-1 비동기 검증로직은 여기서 처음 작성하는 내용이므로 Angular 섹션에 없다. 1-1 여기서는 두 개의 비밀번호가 일치하는지를 확인하는 검증 로직과 1-2 사용을 원하는 Username이 이미 사용중인지를 확인하는 검증 로직을 작성한다. 1-3 검증로직은 범용이 가능하도록 분리하여 작성한다. 범용 검증로직에 대한 내용은 아래 링크를 참조한다. Angular : Password Validator 구현 사용자 정의 Validator 2 1. 이번 포스트는 지난 포스트의 사용자 정의 검증로직을 좀 더 범용적으로 사용할 수 있도록 변경한다. 1-1 지난 포스트의 연속이므로..
1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-1 이번 포스트는 가입과 로그인 화면을 생성하고 그에 맞는 Form Control을 작성한다. 1-2 그런 후 검증 로직을 다음 포스트에서 추가한다. 2. Sign Up과 Sign In 화면은 상당히 유사하다. 그래서 재사용했다. 2-0 ReactiveForm 을 사용하려면 module에 import해야 한다. Auth 모듈에 다음과 같이 추가한다. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SignInComponent } from './sign-in/sign-in.component'; import ..
1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 2. email 모듈은 로그인 한 경우에만 볼 수 있어야 하고 열려져 있다가도 sign out되면 진입이 불가해야 한다. 2-1 lazy 로딩이 대한 가드는 canLoad guard로 작성해야 한다. 2-2 경로에 대한 접근 가드의 작성은 canActivate guard를 작성해야 한다. 3. Inbox라는 Guard를 생성하고 canLoad, canActivate를 함께 작성한다. 3-1 아래의 명령어로 생성한다. 생성시에 나오는 option에서 CanActivate, CanLoad 둘 다 *를 체크한다. 3-2 이제 Guard를 작성한다. 3-2-0 가드는 단순한 함수인데, 보통 Observable을 반환한다. 3-2-0-1 즉 해..
1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 2. 이제 전반적인 라우팅을 정리해야 한다. 2-1 기본적으로 inbox와 auth 두 부분으로 나누어져 있다. 2-2 /inbox는 이메일 모듈이 로딩되도록, /auth에는 인증모듈이 실행되도록 한다. 2-3 '' 루트의 경우 Home 컴포넌트가 보여질도록 한다. 3. 루트 경로에서 보여질 페이지가 필요하다. 3-1 첫 페이지에서 보여질 Home 컴포넌트를 하나 생성한다. 3-2 일치하지 않는 경로를 입력했을 때를 위해서 NotFound 컴포넌트도 하나 생성한다. 3-3 그냥 지금 app template에 있는 콘텐츠 부분의 값을 cut해서 복사했다. These steps were used to create this responsiv..
1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다. 2. 이 포스트는 angular-email.com이라는 REST email 서비스를 사용한다. 2-1 기능이 제대로 구현이 안된 서비이지만 angular 클라이언트 작성용으로는 충분하고 넘친다. 2-2 https://api.angular-email.com/auth/signedin 주소를 사용하여 현재 로그인 상태를 확인할 수 있다. 2-3 세션을 쿠키로 관리하며 쿠키의 정보를 통해 서버의 세션을 확인할 수 있다. 3. 로그인 확인을 위한 주소가 있으니 이제 로그인 확인을 구현해야 한다. 3-0 인증을 구현하려면 HttpClient가 필요하다. 따라서 HttpClientModule을 추가해야 한다. 3-0-1 한 가지 혼동되는 부분이 ..
1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다. 2. 이 포스트에서는 메뉴 template을 작성한다. 2-1 언제나 보여지는 메뉴바를 생성한다. 2-2 메뉴바는 bootstrap을 사용하는데, ng-bootstrap에서 사용방법에 대한 가이드가 있다. 2-2-0 이 가이드 대로 하면 width가 작을 때 햄버거 메뉴가 자동으로 구현된다. 2-2-1 이 페이지에 가면 어떻게 사용할 수 있는지가 나온다. Angular powered Bootstrap Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, tabset,..
1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다. 2. 작성순서 2-1 프로젝트 생성 2-1-1 환경설정하기 -> 여기서 다룬다. 2-1-2 메뉴 template 작성하기 2-2 보안 모듈 작성 2-3 이메일 모듈 작성 3. 환경설정 순서 3-1 ng new emailclient --routing 3-2 ng add @ng-bootstrap/ng-bootstrap 3-3 fontawesome 링크를 index.html에 붙인다. 3-4 필요한 모듈, 컴포넌트, 서비스를 생성한다. 기본적인 것들만 생성하고 필요할 때 추가로 생성한다. 3-4-1 인증, 이메일, 공유 모듈을 생성했다. 3-4-2 실수 한 게 있는데, --routing을 안붙여서 모듈마다 파일을 생성해야 한다. ㅠ.ㅠ -..
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..
- 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