Practical Accumulation

1. 이 포스트는 HIbernate에서 List를 사용하는 방법에 대한 내용이다. 1-0 세팅과 기본적인 내용은 이전 포스트를 참조한다. 필요한 부분만 설명한다. 1-1 List는 순서가 중요하고 중복을 허용하는 데이터의 집합이다. 1-2 활용 용도는 1-2-1 예약명부에 예약 순서가 중요한 경우나 1-2-2 이메일 프로그램에서 받은 편지함의 온 순서대로 정렬된 메시지들 1-2-3 야구선수들의 타순정보 2 Annotation 설명 2-1 @OrderColumn는 Collection의 순서를 저장하는 필드를 데이터베이스에 추가 해준다. 2-1-1 이 수식자는 List가 저장하고 있는 순서를 실제로 데이터베이스에 기록해준다. 2-1-2 나중에 이 field를 기준으로 정렬하여 데이터를 받아오면 언제나 순서를..

1. 이 포스트는 HIbernate에서 Set을 사용하는 방법에 대한 내용이다. 1-1 Set은 순서가 없고 중복을 허용하지 않는 데이터의 집합이다. 1-2 용도는 순서가 중요하지 않고 존재여부가 중요한 경우에 사용한다. 1-2-1 예약명부에 이름이 있는지를 결정할 때나 1-2-2 포커게임의 카드들이 Set에 해당한다. 2. Annotation 설명 2-1 @ElementCollection 2-1-0 속성에 지정한다. 2-1-1 지정된 속성이 컬렉션을 저장할 것이라고 설정한다. 2-1-2 컬렉션의 저장될 정보는 별도의 테이블에 존재한다. 2-2 @CollectionTable 2-2-1 데이터를 가지고 있는 테이블의 이름을 지정한다. 2-2-2 메인 테이블을 참조하는 join column을 지정해야 한다...

1. 하이버네이트에는 다양한 Annotation들이 존재한다. 기본적인 것 이외에 유용한 Annotation에 대한 시리즈이다. 1-1 @ElementCollection로 Collection을 다룬다. 1-2 @Embeddable, @Embedded에 대해서 설명한다. 1-3 Enum을 사용하는 방법에 대해 작성한다. 1-4 상속에 대한 다양한 경우에 대해서 설명한다. 2. 코드는 스프링을 사용하지 않고 Hibernate core 모듈만 가지고 작성한다. 2-1 따라서 maven archetype quickstart 1.4를 사용하여 작성한다. 3. 데이터베이스는 MySql을 사용한다. 3-1 데이터베이스 생성은 테스트용으로 제공되는 하이버네이트의 hibernate.hbm2ddl.auto설정을 통해 자동..

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