Practical Accumulation

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

1. 이 포스트는 아래 링크의 업데이트 된 서비스를 Angular로 구현하는 내용이다. Spring Boot + Angular : Rest Repository with JPA - Shopping Site 만들기 v2 - 1 - 서비스 업데이트 1. 이 포스트는 아래 포스트의 v1에 아래의 기능을 추가한 내용이다. 1-1 레이아웃 만들기 1-2 제품 표시하기 1-3 routing 추가하기 1-3 카테고리로 표출하기 1-4 검색기능 추가하기 Spring Boot : Rest Reposito kogle.tistory.com 2. 데이터베이스 데이터는 인터넷의 자료를 끌어 사용했고, 사진 역시 마찬가지이다. 3. 이 포스트는 사용자 화면을 그럴듯하게 변경하고 페이지의 각 부분에 맞게 컴포넌트들을 생성한다. 3-..

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

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. 데이터베이스를 작성한다. 2-1 우선 간단히 제품과 제품 카테고리 테이블 두개를 가지고 시작한다. 2-2 유저를 생성하고 데이터베이스를 생성한다. 3. 프로젝트를 생성한다. 3-1 Visual Studio Code의 S..