프로젝트 기간: 2023 - 10 - 16 ~ 2023 - 11 - 11
레퍼런스 : 다나와 https://www.danawa.com/
스마트한 쇼핑검색, 다나와! : 가격비교 사이트
가격비교 사이트 - 온라인 쇼핑몰, 소셜커머스 전 상품 정보 가격비교 사이트, 비교하면 다나와
www.danawa.com
인원 : 8명
GitHub 주소 https://github.com/choliea/danaga
GitHub - choliea/danaga: final project Danaga shopping mall By team.Avengers 2023-10-16
final project Danaga shopping mall By team.Avengers 2023-10-16 - GitHub - choliea/danaga: final project Danaga shopping mall By team.Avengers 2023-10-16
github.com
파트 : 프로덕트
사용 언어 : 자바, 자바스크립트
사용 기술 스택 :
스프링 부트를 활용한 쇼핑몰 웹 사이트 제작 프로젝트
ERD
Product part Table
https://youarethebestcoding.tistory.com/128
다나가 쇼핑몰 프로젝트 ER diagram과 Entity
Tool : ERDCloud https://www.erdcloud.com/ ERDCloud Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool. www.erdcloud.com 프로젝트 전체 테이블 프로덕트 관련 테이블 Product 테이블 :
youarethebestcoding.tistory.com
구현한 기능 및 서비스
카테고리 선택시 해당 카테고리의 제품들이 가지고 있는 스펙들을 불러와 조건 검색을 할 수 있다.
카테고리 선택, 옵션 선택, 정렬 기준 선택, 검색 버튼 클릭시마다 검색하여 제품들을 보여준다.
옵션 선택하여 조건 검색
같은 종류의 조건에 대하여는 합연산, 다른 종류의 조건에 대하여는 곱연산 적용
예를들어, 운영체제의 윈도우11과 윈동우10을 동시에 선택하면
윈도우11 또는 윈도우10인 제품을 검색하고
운영체제의 윈도우11, 화면비율 16:9 를 선택하면
윈도우11이면서 화면비율 16:9인 제품을 검색한다.
제품명 검색은 대소문자 구분하지 않고 검색한다.
https://youarethebestcoding.tistory.com/130
스프링부트 프로젝트 JPA 활용
JPA에 대해서 다룬 포스트가 있다. https://youarethebestcoding.tistory.com/115 Spring Data JPA begins http://projects.spring.io/spring-data/ Spring Data Spring Data’s mission is to provide a familiar and consistent, Spring-based programming mod
youarethebestcoding.tistory.com
페이징은 무한스크롤API를 이용하였다.
https://youarethebestcoding.tistory.com/133
Intersection Observer 무한스크롤 구현하기
#무한스크롤 기존 페이징 방식에서 벗어나 최근 떠오르는 페이징 방식이다. 특정 개수만큼만 로딩하고 특정 뷰포트를 넘어가면 다음 아이템을 로딩하는 방식으로 비동기 방식으로 html을 누적
youarethebestcoding.tistory.com
제품 상세페이지
제품 상세페이지에서는 해당 제품과 동일한 모델의 다른 옵션으로 구성된 제품을 선택할 수 있고
선택시 해당 제품의 상세 페이지로 전환된다.
DESCRIPTION 탭에서는 제품의 설명 이미지 파일을 로딩하고
SPECIFICAION 탭에서는 제품의 상세 스펙을 표로 보여준다.
로그인 상태에서 제품의 하트를 클릭하면 Toast 메세지와 함께 관심상품에 등록된다.
제품 상세 페이지에 들어가본 제품은 최근 본 상품에 등록되고
로그인 하지 않은 상태에서 본 제품도 로그인 후 최근 본 상품에 등록되게 된다.
최근 본 상품은 등록된지 30일이 지나는 시점에 자동으로 삭제된다.
배포
AWS CLI를 이용해 elasticbeanstalk 환경을 구축하고 github action을 이용해
무중단 자동 배포 환경 구축
배포된 사이트 index 페이지
https://youarethebestcoding.tistory.com/134
스프링부트 프로젝트 CI/CD 환경 구축 (with.AWS + GIthub Actions)
이번 프로젝트에서는 AWS의 ElasticBeanstalk 을 이용해 application을 배포하고 github actions를 이용해 aws에 무중단 배포할 수 있는 환경을 구축하였다. AWS의 서비스에 관해서는 이미 다룬 적이 있으니 생
youarethebestcoding.tistory.com
프로젝트 관련 포스트
https://youarethebestcoding.tistory.com/129
스프링부트 프로젝트 계층에 따른 데이터 전송 형태
클라이언트는 브라우저에서 요청을 하고 응답을 받는다. 이때 요청은 서버에서 필요한 데이터를 담아야하고 서버측에서 응답할땐 클라이언트에게 공개할 데이터만 담아서 보내면 된다. 일반
youarethebestcoding.tistory.com
https://youarethebestcoding.tistory.com/131
스프링부트 프로젝트 서비스와 예외처리
이번 프로젝트를 하면서 예외 처리에 대해서 고민 많았고 실제로 작업하면서 몇번씩 수정을 거치게 되었다. 일단 예외가 발생했을 때 발생원인이 명확한 경우 구체적인 예외 사유를 알 수 있게
youarethebestcoding.tistory.com
https://youarethebestcoding.tistory.com/132
Thymeleaf Layout
#타임리프 레이아웃 코드의 재사용이 가능한 부분을 템플릿화할 수 있게 도와주는 타임리프 라이브러리 #레이아웃을 사용하는 이유 타임리프의 insert나 replace 기능은 많이 사용하지만 이 기능에
youarethebestcoding.tistory.com
'Java > Project' 카테고리의 다른 글
| 스프링부트 프로젝트 CI/CD 환경 구축 (with.AWS + GIthub Actions) (0) | 2023.11.24 |
|---|---|
| 스프링부트 프로젝트 서비스와 예외처리 (1) | 2023.11.22 |
| 스프링부트 프로젝트 JPA 활용 (0) | 2023.11.21 |
| 스프링부트 프로젝트 계층에 따른 데이터 전송 형태 (0) | 2023.11.21 |
| 다나가 쇼핑몰 프로젝트 ER diagram과 Entity (0) | 2023.11.20 |