Practical Accumulation

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-1 여기서는 지금 하드코딩된 메일목록 대신 실제 데이터를 읽어와서 목록을 보여주는 코드를 작성한다. 2. 구현 방법 2-1 우선 url이 /inbox 으로 검색이 되는 경우 현재 email 모듈의 home 컴포넌트가 로딩이된다. 2-2 이 home 컴포넌트가 생성 시 email 서비스로 접근하여 데이터를 가지고 와서 email-list 컴포넌트로 넘겨준다. 3. email 서버는 수신한 이메일에 대한 목록을 보내주는 api가 있다 3-1 get 메소드로 https://api.angular-email.com/emails 로 접근하면 된다. 3-2 회신 시 아래와 같은 구조로 넘어오기 때문에 별도의 클래스를 생성하였다. export c..

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다 1-1 여기서는 잠시 쉬어가는 의미에서 로그인 성공 시 로그인 정보를 저장하고 공유하는 데이터 클래스를 작성한다. 1-2 특별한 내용은 없고 로그인하면 LoginInfo 클래스에 유저 이름만 담을 예정이다. 1-3 프로그램에 따라서 토큰 정보가 들어갈 수도 있고, 비밀번호가 들어갈 수도 있는데 여기서는 유저이름만 저장한다. 2. LoginInfo 클래스를 하나 생성한다. 2-1 필요한 속성들로 채운다 2-1-1 여기에서는 로그인 여부와 유저이름을 저장하고 있다. export class LoginInfo { isLogin: boolean = false username: string = '' } 3. 서비스에서 로그인 때 예전에 usern..

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 지난 포스트의 연속이므로..