Practical Accumulation

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

0. 이 포스트에는 주문 페이지를 작성한다. 1. 주문 페이지를 위한 컴포넌트를 생성하고 라우팅테이블을 업데이트 한다. $ ng generate component components/checkout const routes: Routes = [ { path: 'checkout', component: CheckoutComponent }, { path: 'cart-details', component: CartDetailsComponent }, { path: 'search/:keyword', component: ProductListComponent }, { path: 'category/:id/:name', component: ProductListComponent }, { path: 'category', comp..

0. 이 포스트는 카드 상세 페이지에서 수량을 조절하거나 담겨진 상품을 삭제하는 기능을 작성한다. 1. 우선 UI를 약간 변경하여 수량을 조절하는 버튼 2개와 삭제 버튼을 추가한다. 아래 소스의 중앙 부분에 있다. 1-1 버튼을 수량 좌우에 배치하고 클릭 이벤트가 발생하면 증감을 처리하는 메소드를 지정한다. 1-2 제거 버튼도 마찬가지로 클릭 시 이벤트를 처리하는 메소드를 지정한다. 1-3 각 이름이 incrementQuantity, decrementQuantity, removeItem이고 모두 현재 cartItem을 인자로 넘겨준다. There is no item in your cart Product Image Product Detail {{item.name}} {{item.unitPrice}} Qua..

0. 이 포스트는 v3에서 만들다만 카트에 대한 상세 페이지 작성 및 주문페이지 작성에 관한 시리즈이다. 0-1 상품 리스트에 카트 담기 버튼 추가하기 0-2 카트 상세 페이지 작성하기 --> 이 포스트에서는 여기까지 작성한다. 0-3 카트 상품의 수량 증가, 감소 및 삭제 구현 0-4 주문 페이지 작성하기 1. 상품 리스트에 카드 담기 버튼 추가 1-1 현재 상품 상세 페이지에만 카드 담기 버튼이 있어 테스트하기 귀찮다. 그리고 리스트에 담기가 있으면 편리하다. 1-2 상품 리스트에서 표출되는 수량정보는 불필요해 보이기 때문에 대신 자리에 추가하기 버튼을 대신 붙인다. 1-3 product-list.component.html에서 아래처럼 가격의 위치를 한 칸 당기고 Add to Cart버튼을 추가한다...

0. 이 포스트는 사용자가 세부 페이지에서 담기를 눌렀을 경우에 0-1 카트에 물건이 담기고 현재 카트에 있는 상품의 가격과 수량이 표시 좌측 상단에 표기되도록 하는 내용이다. 1. 동작 방식 1-0 카트 정보는 공유를 위한 CartService에서 관리한다. 1-1 카트에 물건을 담았을 때 카트에 물건이 담기고 그 물건이 포함된 총 가격과 수량이 CartInfo 컴포넌트에 표기된다. 1-2 담는 이벤트가 발생했을 때, CartService의 총가격과 총수량이라는 두 개의 subject는 그 정보를 emit 하게 되고 1-3 이 두 개의 subject를 subscribe 하는 객체는 해당 데이터를 Observable을 통해서 수신하게 된다. 2. CartService 서비스, CartItem 클래스, C..

0. 이 포스트는 지난 포스트에 이언 검색 결과에 대한 Pagenation을 작성한다. 1. ProductService를 페이지 정보를 사용할 수 있도록 변경한다. 1-1 지난 포스트와 마찬가지 방식으로 getProductsByName 메소드를 수정한다. 1-2 이 메소드가 사용하는 getProductList를 수정하여 getProductsByCategoryId에서도 사용할 수 있게 한다. import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Product } from '../common/product'; import { Observable } from 'rxjs'; imp..