전체 글

[Baeg-won Clothing Gallery] 7. CART 페이지 구현

📝 Outline 마침내 Cart 페이지 구현이 완료되었다. 면접 준비로 인해 좀 늦어진 감이 있긴 하지만... (참 좋은 핑계거리야) 이번에 해당 페이지를 구현하면서 삽질한 것도 좀 있고 그 과정에서 나름 배운 것도 있어서 이를 하나씩 정리해보려고 한다. 구현 스타일은 다음과 같다. 그럼 바로 리뷰로 들어가보자. 📝 Review 💬 연관관계 매핑 이번에 Cart 페이지를 구현하면서 연관관계가 더 복잡해졌다. 우선 한 명의 고객은 하나의 장바구니만 가질 수 있기 때문에 Cart와 Customer의 관계는 1:1로 설정해주었다. 또한 하나의 장바구니에는 여러 개의 상품이 담길 수 있고, 하나의 상품은 여러 장바구니에 담길 수 있으므로, Cart와 Product의 관계는 N:M이 되어야 했다. 따라서 이는 ..

@OneToMany 단방향

최근 진행하던 프로젝트에서 본격적으로 엔티티를 생성하고 매핑하는 과정을 진행하면서, 일대다 단방향 매핑을 고려해야 하는 상황이 왔었다. 별 고민없이 매핑하려 했으나, 찾아보니 해당 매핑 방법에 문제가 있는 것 같았다. 사실 이전에 김영한님의 강의를 통해 얼핏 듣긴 했지만 실제 겪어보지 않은 상황이라 딱히 중요하게 생각하지 않고 지나쳤던것 같다. 따라서 이번에 해당 내용에 대해 제대로 정리해보려고 한다. 💡 One To Many 단방향 매핑의 문제점 결론부터 말하자면, One To Many 단방향 매핑의 문제점은 다음과 같다. 엔티티가 관리하는 외래키가 다른 테이블에 있다. (Many에 외래키가 존재한다.) 따라서 연관관계 관리를 위해 추가로 UPDATE 쿼리가 실행된다. 이는 사실 성능상 큰 차이는 없다..

[Baeg-won Clothing Gallery] 6. DETAIL 페이지 구현

📝 Outline 이번에는 상품 상세 페이지를 구현하였다. Vue를 제대로 학습하고 사용한 것은 아니지만 확실히 익숙해지니까 작업 속도도 빨라지는 듯 하다. 구현 스타일은 다음과 같다. 페이지를 간단히 설명하자면, 기본적으로 상품의 이름과 이미지, 상품 가격, 상품 설명을 확인할 수 있다. 또한 주문을 위한 Select Box 및 Text Field가 존재하며, 아래의 버튼을 통해 해당 상품을 장바구니에 담거나 찜할 수 있도록 구현하였다. (물론 실제 기능은 아직 미구현 상태) 참고로 Select Box의 경우 상품 사이즈 재고에 따라 선택할 수 있는 품목을 제한하도록 하였으며, 그 결과는 아래와 같다. 즉, 현재 DB에 해당 상품의 L 사이즈 재고는 '0'으로 저장되어 있음을 의미한다. 📝 Review..

[Baeg-won Clothing Gallery] 5. SALE, CONTACT 페이지 구현

📝 Outline 드디어 Sale, Contact 페이지 구현까지 끝이났으며, 이렇게 하여 Header에 명시했던 모든 페이지 구현이 완료되었다. 구현 스타일은 다음과 같다. Sale 페이지에서는 현재 할인 중인 상품의 기존 가격과 할인 가격을 나타내주고 있으며, Contact 페이지에서는 쇼핑몰의 이메일과 연락처, 위치 등의 정보를 출력하도록 하였다. 이때, 쇼핑몰의 위치는 Google Maps API를 사용하였으며, 진행 과정은 아래에서 설명하겠다. 📝 Review 이번에도 역시 리뷰하는 시간을 가져보자. 이번에 구현한 페이지는 딱히 어려운 부분이 없어서 글이 길어지진 않을 것 같다. 💬 Sale.vue 우선 Sale 페이지 구현을 위해서는 DB에 저장되어 있는 Product 엔티티에 할인 여부를 확..