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. Grid layout은 부트스트랩의 기본적인 레이아웃 설계 도구이다. 0-1 grid layout은 무조건 .container안에 배치되어야 한다. 0-2 한 줄을 12로 나누어 필요한 만큼 배치를 한다. 0-3 값을 생략하면 나머지 공간을 공유하게 된다. 1. 기본적인 공간 설정 1-0 row, col class를 가지고 있다. 1-1 row는 하나의 행을 말하고 하나의 행안에 여러 개의 열이 배치된다. 1-2 열의 크기는 0번 항목의 12등분한 공간을 지정하여 설정한다. col-8 이면 8/12공간을 차지한다. 1-3 가장 기본적인 레이아웃의 예시는 아래와 같다. One of three columns One of three columns One of three columns 1-5 column의..
1. Responsive breakpoint는 부트스트랩에서 반응형 웹을 구현하기 위한 기본적인 도구이다. 1-1 5가지의 단계로 나누어져 있으며 xs, sm, md, lg, xl로 표현된다. 1-1-1 xs는 기본값이고 xs라고 쓰지 않는다. - 즉 0px이고 모든 경우에 다 적용된다. 1-1-2 sm은 576px 이상 1-1-3 md은 768px 이상 1-1-4 lg는 992px 이상 1-1-5 xl은 1200px 이상 1-2 위의 값은 언제 각 단계가 적용될지에 대한 min-width값이다. 즉 최소의 값들이다. 1-2-1 아래 값들은 모두 오버라이딩이되어 적용된다. 즉 현재 화면크기와 가장 가까운 미디어쿼리가 적용된다. body { background: red; } @media (min-width..
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 테그를 사용해야 한..
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는 한 페이지에 상품이 ..
- Total
- Today
- Yesterday
- 도커 개발환경 참고
- AWS ARN 구조
- Immuability에 관한 설명
- 자바스크립트 멀티 비동기 함수 호출 참고
- WSDL 참고
- SOAP 컨슈머 참고
- MySql dump 사용법
- AWS Lambda with Addon
- NFC 드라이버 linux 설치
- electron IPC
- mifare classic 강의
- go module 관련 상세한 정보
- C 메모리 찍어보기
- C++ Addon 마이그레이션
- JAX WS Header 관련 stackoverflow
- SOAP Custom Header 설정 참고
- SOAP Custom Header
- SOAP BindingProvider
- dispatcher 사용하여 설정
- vagrant kvm으로 사용하기
- git fork, pull request to the …
- vagrant libvirt bridge network
- python, js의 async, await의 차이
- go JSON struct 생성
- Netflix Kinesis 활용 분석
- docker credential problem
- private subnet에서 outbound IP 확…
- 안드로이드 coroutine
- kotlin with, apply, also 등
- 안드로이드 초기로딩이 안되는 경우
- navigation 데이터 보내기
- 레이스 컨디션 navController
- raylib