🚗 Backend Toy Project

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

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

[Baeg-won Clothing Gallery] 4. CLOTHING, FOOTWEAR, ACCESSORIES 페이지 구현

📝 Outline 지난 시간에 이어서, Clothing, Footwear, Accessories 페이지 구현을 완료하였다. 면접 일정이랑 겹치는 바람에 프로젝트에 신경을 못쓰다가 오랜만에 코드를 작성하려다보니 시간이 조금 걸린것 같다. 각설하고, 각 페이지는 상품 카테고리별로 옷, 신발, 악세서리를 나누어 출력하며, 특별한 기능은 없으므로 기존에 사용했던 컴포넌트들(Image, List, Designer)을 재활용하여 구현하였다. 구현 스타일은 다음과 같다. 위와 동일한 스타일로 Footwear, Accessories 페이지도 구현해주었다. 즉, 기존의 Shop 페이지와 Brands 페이지에서는 카테고리 구분 없이 모든 상품을 출력해주었다면, 위의 세 페이지에서는 카테고리 기능이 추가된 것이다. 이를 위..

[Baeg-won Clothing Gallery] 3. BRANDS 페이지 구현

📝 Outline 지난 시간에 이어 Brands 페이지까지 구현을 완료했다. 참고로 New-Arrivals 페이지는 이전에 구현했던 Shop 페이지와 구현이 거의 동일해서 굳이 따로 포스팅하지는 않을 것이다. 본론으로 돌아가서, 기본적인 페이지 모습은 다음과 같다. 카테고리를 정하여 브랜드별로 혹은 가격별로 원하는 상품을 출력할 수 있도록 구현하였다. 꽤 심플해 보이지만 나름대로 구현하기가 까다로웠던 페이지이다. 📝 Review 해당 페이지를 구현하면서 조금은 신선한 기능도 구현해보았고, 새롭게 알게된 내용도 있어, 이번에도 역시 리뷰하는 시간을 가져볼까 한다. 💬 List.vue 우선 지난 시간에 구현하였던 상품 리스트를 출력하는 코드를 컴포넌트화 하였다. {{clothing[i - 1].name}} ..

[Baeg-won Clothing Gallery] 2. SHOP 페이지 구현

📝 Outline 메인 페이지에 이어서 SHOP 페이지 구현이 끝났다. SHOP 페이지는 비교적 구현이 단순해서 어렵지 않게 구현할 수 있었다. 구조를 살펴보면 상품 리스트들이 쭉 나열되어 있고 상품 이름과 가격이 명시되어 있다. 추가로 Select Box를 통해 정렬 기준을 정하여 상품 리스트를 원하는 옵션대로 정렬하여 볼 수 있도록 구현하였다. 페이지 하단에는 "Load More" 버튼을 두어, 버튼 클릭 시 상품 리스트를 추가로 로드할 수 있도록 구현해주었다. 📝 Review 이번에도 역시 리뷰하는 시간을 가져볼까 한다. SHOP 페이지를 구현하면서 사용한 코드와 그 코드를 사용한 이유, 그리고 새롭게 알게된 내용에 대해 이야기 해보겠다. 💬 태그를 사용하지 않고 를 사용한 이유 위 코드는 Head..