Practical Accumulation

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을 안붙여서 모듈마다 파일을 생성해야 한다. ㅠ.ㅠ -..