Practical Accumulation

0. 나이가 들어가니 기억력이 떨어져서 이젠 뭐든지 적어놔야 한다. 1. Alert은 화면에 안내를 띄울 때 사용하면 편리하다. 2. x버튼을 우측 상단에 버치하여 수동으로 제거할 수도 있다. 2-1 alert-dismissible은 텍스트가 쓰여질 수 있는 범위를 우측에서 5rem정도 줄인다. 그곳에 close 버튼이 배치된다. 2-2 이거 쓰지 않아도 보기엔 별차이가 없는데, 이것 없이 킨 안내구문이 들어갈 경우 x를 덮어 써버린다. 2-3 fade, show는 쌍으로 다니고 사라지고 나타날 때 애니메이션 효과를 더해 준다. 2-4 data-dismiss 부분이 javascript를 작동하는 부분이라서 꼭 삽입해야 한다. 2-5 닫기 아이콘을 위한 버튼은 호환성을 위해 button 테그를 사용해야 한..

Hello, world! 0 부트스트랩은 2개의 js 라이브러리를 의존하고 있다. jQuery와 Popper.js이다. 0-1 순서가 중요하다. jQuery, Popper.js, Bootstrap 순서이다. 0-2 Popper.js는 툴팁 같은 것을 사용할 때 부트스트랩이 사용한다.

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는 한 페이지에 상품이 ..

0. 이 포스트는 v2 버전에 클라이언트 기능을 추가한 내용이다. 0-1 v3에서는 세부페이지를 생성하고, -> 이 포스트에서 작성할 내용이다. 0-2 페이지 네비게이션을 추가하고, 카테고리별 페이지 검색 및 검색 결과 내에 페이지 탐색을 구현한다. 0-3 카트에 아이템을 추가하고 합산 값을 실시간으로 표시한다. 1. 서버 쪽에는 별다르게 손댈 부분이 없다. 2. 상세페이지를 생성한다. 2-0 상세 페이지는 별도의 ProductList 위치에 위치할 세로운 페이지 컴포넌트으므로 새로 생성한다. $ ng generate component components/product-details 2-1 화면의 제품 리스트의 사진이나 이름을 눌렀을 때 세부페이지로 이동하게 한다. 2-1-1 product-list.co..

0. 이 포스트는 아래의 v2의 클라이언트 구현의 상품 검색기능에 대한 내용이다. 1. 서버에서 이미 상품검색 기능을 추가되어 있다. 이 기능을 활용하는 서비스 메소드를 작성한다. 1-1 기존에 있는 getProducts메소드는 더 이상 사용되지 않기 때문에 이것을 검색용으로 변경한다. 1-2 product-service.ts에서 아래처럼 수정한다. getProuductsByName(keyword: string): Observable { const targetUrl = `${this.baseUrl}/products/search/findByNameContaining?keyword=${ keyword }` return this.getProductList(targetUrl) } 2. 이제 product-sea..

0. 이 포스트는 아래의 v2의 클라이언트 구현의 카테고리별 상품 검색기능에 대한 내용이다. Spring Boot + Angular : Rest Repository with JPA - Shopping Site 만들기 v2 - 2 - 클라이언트 업데이트 1. 이 포스트는 아래 링크의 업데이트 된 서비스를 Angular로 구현하는 내용이다. Spring Boot + Angular : Rest Repository with JPA - Shopping Site 만들기 v2 - 1 - 서비스 업데이트 1. 이 포스트는 아래 포.. kogle.tistory.com 1. 검색 기능을 구현하려면 어떻게 방식이라도 검색에 맞는 라우팅기능이 필요하다. 1-1 우선 라우팅 기능을 넣어줘야 한다. 1-1-1 app.module..