Practical Accumulation

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-1 1부는 인증에 관련된 부분을 다루었다. 1-2 2부는 REST서비스를 제공하는 서버를 이용하여 email을 보내고 받는 방법에 대해서 작성한다. 2. 우선 생각나는 대로 컴포넌트를 생성했다. 2-1 왼쪽에 30% 공간에 메일 작성버튼 EmailCompose과 메일 목록이 표시될 EmailList컴포넌트를 생성한다. 2-2 오른쪽에 70% 공간을 차지할 Email 내용 표시 공간 EmailView 컴포넌트를 생성한다. 2-3 오른쪽에 위치할 특정메일 선택시 보여줄 EmailContent 컴포넌트를 생성한다. 2-4 이메일 데이터에 대한 요청을 수행할 Email 서비스는 가장 처음 포스트에서 이미 생성하였다. 2-5 아래의 명령어를..

0. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 0-1 여기에서는 로그아웃기능을 추가한다. 1. SignOut은 서버에서 post로 수신하며 url은 https://api.angular-email.com/auth/signout 이다. 1-1 성공하면 200번 빈 {} 데이터가 반환된다. 2. 가장 쉬운 방법은 컴포넌트를 생성하여 그곳으로 이동한 후 signOut처리를 한 것이다. 2-1 SignOut 컴포넌트를 하나 생성한다. 2-2 인증 모듈 라우팅 테이블을 업데이트 한다. 2-2-1 메뉴바에서 Sign Out이 클릭되면 auth/signOut이 이동하고 SignOut 컴포넌트가 로딩된다. import { NgModule } from '@angular/core'; import { ..

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-1 지금까지의 만든 프로그램은 로그인과 가입하기가 가능하다. 1-2 하지만 로그인 후에 리프레쉬를 하면 다시 로그아웃이 된다. 1-3 이것은 세션관리가 안되어서 그런 건데 로그인 성공 후에 헤더를 보면 Response에 쿠키에 값이 있다 1-3-1 두개의 쿠키에 세션값이 들어있는 것을 확인 할 수 있다. 1-3-2 이 쿠키를 서버 요청에 붙여 주어야 서버는 로그인 한 사용자를 식별할 수 있다. 1-3-3 사용자가 요청을 보낼 때마다 쿠키를 보내야 세션을 유지할 수 있다 1-4 이 쿠키는 브라우저에서 자동으로 헤더에 붙여서 전송하게 된다. 1.5 하지만 Angular는 이 쿠키를 자동으로 붙여주지 않고 option으로 2. 이 문제를..

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-1 지금까지 부가적인 기능들을 추가했는데 이번에는 가입하기와 로그인 기능을 구현한다. 2. 가입하기 구현하기 2-1 가입하기는 post로 전달하며 url은 https://api.angular-email.com/auth/signup 이다. 2-2 중복된 username인 경우 { username: string } 형식의 데이터와 422 코드를 돌려준다. 값은 'usename in use' 2-3 정상인 경우에도 { username; string } 형식을 반납하는데 200 코드이다. 여기서는 가입한 username이 들어간다. 3. 이제 필요한 것은 다 알았으니 가입하기를 구현한다. 3-1 sign up template에서 form에..

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-1 여기에서는 공용 검증 에러메시지 처리를 위한 서비스와 컴포넌트를 생성한다. 1-2 이것과 관련된 자세한 포스트는 아래 링크를 참조한다. Angular : 재활용 가능한 Reactive Forms, ngx-mask 4. form 에러처리하기 0. 이 포스트는 가장 많이 사용되는 Reactive Form에 대한 정리 시리즈이다. 1. 이제 모두 설정했으니 에러 결과를 가지고 적절하게 화면에 안내구문을 표출하는 것만 남았다. 1-1 근데 이 부분이 제일 kogle.tistory.com 2. 검증메시지를 위한 서비스와 컴포넌트를 생성한다. 2-1 shared 모듈에 생성했으니 exports 해야 다른 모듈에서 사용가능하다. 2-1-1 ..

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 즉 해..