Practical Accumulation

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

0. 이 포스트는 카테고리 선택 시 검색된 상품들을 조회할 수 있는 페이지 네비게이션을 구현한다. 1. 순서는 1-1 ProductService 수정 1-2 GetResponseProduct interface 수정 1-3 ProductList Component에 페이지 관련 속성들 추가하기 1-4 ProductList view에 ngb-pagenation을 이용한 네비게이션 연결 2. 스프링 Rest repository를 사용하면 페이지에 대한 정보를 아무 설정없이 사용할 수 있다. 2-1 아래에 캡처처럼 url에 size, page parameter를 추가하여 검색이 가능하다. 2-1-1 page는 읽기를 원하는 쪽수이고 0부터 시작한다. 0이 첫 페이지이다. 2-1-2 size는 한 페이지에 상품이 ..

1. 이 포스트는 아래 포스트의 v1에 아래의 기능을 추가한 내용이다. 1-1 레이아웃 만들기 1-2 제품 표시하기 1-3 routing 추가하기 1-3 카테고리로 표출하기 1-4 검색기능 추가하기 Spring Boot : Rest Repository with JPA - Shopping Site 만들기 V1 - 1 0. 이 포스트 점층적인 방식으로 작성할 Shopping website 시리즈의 버전 1이다. 0-1 코드 중 설명하지 않고 넘어가는 부분은 이미 이전 포스트에 설명이 있다. 0-2 말그대로 accumulation이다. 1. 순서를 적� kogle.tistory.com 2. 이 포스트에서는 서버쪽 기능를 구현한다. 2-1 카테고리로 상품을 검색하는 기능 추가 2-2 키워드로 상품을 검색하는 기..

0. 이 포스트 점층적인 방식으로 작성할 Shopping website 시리즈의 버전 1이다. 0-1 코드 중 설명하지 않고 넘어가는 부분은 이미 이전 포스트에 설명이 있다. 0-2 말그대로 accumulation이다. 1. 순서를 적어보면 1-0 데이터베이스 작성 1-1 서비스 프로젝트 생성 1-2 Entity 설정 1-3 Respository 설정 1-4 클라이언트 프로젝트 생성 --> 여기서부터 한다. 1-5 Entity 생성하기 1-6 서비스 작성하기 1-7 컴포넌트 작성하기 1-8 view 작성하기 2. 클라이언트는 Angular 9버전을 사용한다. 2-0 Angular를 잘 알고 있다고 가정하고 작성한다. 2-1 아래의 명령어들로 생성한다. 이름을 잘못만든 것 같기도 하다. web은 서버, m..