- 일정: 2024년 2월 23일 - 2023년 4월 17일 (6주)
"SSG 클론 코딩과 실시간 데이터 관리 플랫폼"
SSG 쇼핑몰 사이트의 주요 기능과 인터페이스를 재현한 클론 코딩 작업과 함께, 상품 데이터, 총 매출액, 판매 수량 등 중요 비즈니스 지표를 실시간으로 모니터링하고 관리할 수 있는 관리자(ADMIN) 사이트 개발을 목표로 합니다.
특히, 저희 팀은 사용자 경험을 최적화하기 위해 프론트엔드와 백엔드 모두 개발 과정에서 성능 최적화에 많은 노력을 기울였습니다. 로딩 시간 단축, 서버 응답 속도 향상, 그리고 효율적인 데이터 처리 방식의 적용을 통해, 사용자는 더욱 빠르고 부드러운 상호작용을 경험할 수 있습니다.
쇼핑몰 바로가기
사용자는 클론 코딩된 쇼핑몰을 통해 실제 쇼핑몰과 유사한 쇼핑 경험을 할 수 있고, 개발된 관리자 사이트를 통해 고객 관리, 매출 관리, 재고 관리 등의 다양한 관리 작업을 수행할 수 있습니다.
1. 회원관리 기능(회원가입/로그인)
| 간편 로그인 과정 | 통합 로그인 과정 |
2. 키워드로 상품 검색
| 상품 검색 및 조회 | 구매 직전 페이지 |
3. 상품 조회
| 무한스크롤 통한 조회 | 카테고리별 조회 |
4. 상품 좋아요, 장바구니 담기
| 상품별 좋아요 | 옵션선택 후 장바구니 담기 |
5. 관리자 상품 판매량/사용자 관리
| 전체 매출 관리/응답속도 탭 | 상품 데이터 관리 탭 |
- Backend
- Frontend
- DB
- Infra
- Docs
🖋️아키텍처 구조도
🖋️ERD
🖋️폴더구조(Back)
📦src
┣ 📂main
┃ ┣ 📂java
┃ ┃ ┗ 📂spharos
┃ ┃ ┃ ┗ 📂msg
┃ ┃ ┃ ┃ ┣ 📂domain
┃ ┃ ┃ ┃ ┃ ┣ 📂admin
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂controller
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂converter
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂dto
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂entity
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂repository
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂Impl
┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂service
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂Impl
┃ ┃ ┃ ┃ ┃ ┣ 📂brand
┃ ┃ ┃ ┃ ┃ ┣ 📂bundle
┃ ┃ ┃ ┃ ┃ ┣ 📂cart
┃ ┃ ┃ ┃ ┃ ┣ 📂category
┃ ┃ ┃ ┃ ┃ ┣ 📂coupon
┃ ┃ ┃ ┃ ┃ ┣ 📂likes
┃ ┃ ┃ ┃ ┃ ┣ 📂options
┃ ┃ ┃ ┃ ┃ ┣ 📂orders
┃ ┃ ┃ ┃ ┃ ┣ 📂product
┃ ┃ ┃ ┃ ┃ ┣ 📂review
┃ ┃ ┃ ┃ ┃ ┣ 📂search
┃ ┃ ┃ ┃ ┃ ┗ 📂users
┃ ┃ ┃ ┃ ┣ 📂global
┃ ┃ ┃ ┃ ┃ ┣ 📂api
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂code
┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂status
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂dto
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂example
┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂exception
┃ ┃ ┃ ┃ ┃ ┣ 📂config
┃ ┃ ┃ ┃ ┃ ┣ 📂converter
┃ ┃ ┃ ┃ ┃ ┣ 📂database
┃ ┃ ┃ ┃ ┃ ┣ 📂entity
┃ ┃ ┃ ┃ ┃ ┣ 📂redis
┃ ┃ ┃ ┃ ┃ ┗ 📂security
┃ ┃ ┃ ┃ ┗ 📜MsgApplication.java
┃ ┗ 📂resources
┗ 📂test
🖋️폴더구조(Front)
📦components
┣ 📂banner
┣ 📂form
┣ 📂layout
┣ 📂MainCategory
┣ 📂pages
┃ ┣ 📂auth
┃ ┃ ┣ 📂signup
┃ ┃ ┗ 📂users
┃ ┣ 📂cart
┃ ┣ 📂category
┃ ┣ 📂catogory-list
┃ ┣ 📂join
┃ ┣ 📂like
┃ ┣ 📂login
┃ ┣ 📂main
┃ ┣ 📂nonuser
┃ ┣ 📂order
┃ ┃ ┣ 📂order-complete
┃ ┃ ┗ 📂product-order
┃ ┣ 📂product-detail
┃ ┣ 📂product-list
┃ ┃ ┣ 📂ranking
┃ ┃ ┣ 📂special-price
┃ ┣ 📂product-review
┃ ┣ 📂search
┃ ┗ 📂users
┃ ┃ ┗ 📂my-order
┗ 📂ui
🖋️깃허브 위키 Github Wiki 바로가기
🖋️협업 관리
| 그라운드룰 | 노션 기반 문서공유 |
|---|---|
| 데일리 스크럼 및 회고 | Gitflow 전략 및 통일된 커밋 메시지 |
|---|---|
| 코드리뷰 | 트러블 슈팅 |
|---|---|
| 강성욱 | 서이현 | 조준호 |
| BackEnd | BackEnd | BackEnd |
| ksu9801@gmail.com | tjwn1408@naver.com | chojunho9803@gmail.com |
| @KangBaekGwa | @I-HYEON | @khanturtle |
| 처음 시작을 하였을 때, 이렇게 큰 규모의 프로젝트를 해본 경험이 없어 두려움 반, 설레임 반이었던 것 같습니다. 설계 단계 부터, 개발, 개발마루리 단계를 거치며, 매주, 매일 바뀌는 제 모습과 달라지는 결과물을 보는 것이 정말 큰 즐거움 이었습니다. 처음 사용해 보는 기술들이 많아 무작정 따라하기 방식으로 진행했었는데, 이후 왜 그렇게 사용하는지 에 대해서 중점적으로 학습하고 적용하며 많은 스킬업이 되었던 프로젝트가 된 것 같습니다. 아직 많은 부분들에 대해서 딥 다이브 해야 하는 부분들이 많지만, 어느 기술이던지 할 수 있다는 자신감이 생긴 프로젝트 이기도 합니다. 끝까지 같이 힘내주고 달려준 팀원들에게 정말 감사하고 많은 것들을 배울 수 있어 영광이었습니다. | 백엔드 개발에 대해서는 많이 알지 못하는 상황에서 이정도 규모의 프로젝트를 시작하게 되서 걱정이 많았는데, 좋은 결과물을 낼 수 있어서 좋았습니다! 기본적인 문제부터 성능 개선까지 정말 많은 문제에 부딪혔지만 그만큼 크게 성장할 수 있는 기회였던 것 같습니다. 특히 다른 팀원분들이랑 코드리뷰를 하면서 코드를 읽고 질문하고 피드백 받는 과정에서 정말 많이 배웠습니다. 앞으로 좀 더 최적화된 DB조회나 infra를 좀 더 공부해보고 싶다는 욕심이 생겼던 프로젝트였습니다. 잘 이끌어주신 팀원분들 정말 감사합니다! | 클론 코딩 프로젝트를 시작했을 때는 그리 어렵지 않을 것으로 생각했지만, DB 구조부터 API 명세서 작성까지 진행하며 예상보다 복잡한 작업들이 많았습니다. 이러한 과정을 통해 E-Commerce 사이트의 구조를 깊이 이해할 수 있었고, 효율적인 설계에 대한 고민을 할 수 있었습니다. 팀 내 협업 측면에서는 대다수의 팀원이 팀프로젝트 경험이 있어서 각자의 경험을 바탕으로 다양한 방법을 시도할 수 있었습니다. 특히 이슈와 PR 템플릿을 활용하면서 개발 진행 상황을 쉽게 파악할 수 있었고, 적극적인 코드 리뷰를 통해 코드의 통일성을 유지할 수 있었습니다. 무엇보다 뛰어난 팀원들 덕분에 다양한 영역에서 많이 배울 수 있었던 것이 가장 큰 보람이었습니다. 감사합니다! |
| 조윤찬 | 최형문 | 홍준표 |
| FontEnd | FrontEnd | BackEnd/CI/CD |
| whdbscks77@gmail.com | munii1023@gmail.com | tjdvy17539@gmail.com |
| @YOON-CC | @yunii23 | @howudong |
| 매번, Next를 공부하면서 많은 자료가 없었기 때문에 실패와 고민을 반복하는 과정이 많았습니다. 2달이라는 프로젝트 일정에서도, 설계를 다시하며 처음에는 많이 돌아갔습니다. 하지만, 이것이 실패라고 생각하지는 않습니다. 완성된 결과물을 보고 난 뒤, 이 과정의 결국 하나의 완성으로 가는 근거로 자리매김 할 수 있었다 생각합니다. 사용자의 경험을 고려하며, 데이터의 시각화를 표현한 어드민 페이지를 만들며, 사고의 다양성을 키울 수 있었으며 강사님과의 코드리뷰를 통해 다양한 협업방식을 도입해보며 저희 프로젝트에 맞는 개발방식을 도입하는 유연한 대처능력을 키울 수 있었습니다. 또한, 프로젝트를 하며 성장과 일에 욕심이 생겨 쇼핑몰을 넘어, 관리자를 사용자 입장으로 생각하며 만드는 과정에서도 팀원들과 서로 의지하며 피드백을 주고 받는 과정에서 성장할 수 있었다 생각합니다. 다들 고생하셨습니다. | 이번 프로젝트가 저한테는 지난한 여정이었다고 생각됩니다. 여러 프로젝트를 진행해 본 편은 아니지만, 이커머스 사이트 개발한 경험이 있고 클론 코딩이다 보니 2차 프로젝트보다는 가볍지 않을까 하는 짐작을 했었는데, 안일한 판단이었습니다. 이번 프로젝트를 통해 기본 설계부터 개발 과정까지 다양한 것을 배울 수 있었습니다. 그중 크게 두 가지를 꼽아보면 컴포넌트 재사용과 상태 관리가 가장 도움이 되었습니다. 아직 리액트나 nextjs가 익숙하지 않아서 컴포넌트 재사용할 수 있는 부분을 놓치고 코딩을 진행했었는데, 중간에 강사님께 코드 리뷰를 받으면서 컴포넌트 재사용의 필요성과 이로 인한 효과를 학습할 수 있었습니다. 또한, 어떠한 기능을 구현할 때 상태 관리 라이브러리의 도움을 받아 구현했을 때 더 나은 결과물을 도출하고 이를 유지할 수 있음을 배웠습니다. 아직 공부해야 할 부분이 많고, 수정해야 할 부분이 많이 남았지만 더 발전할 수 있는 기회가 남았다고 생각하고 더 열심히 공부하고자 합니다. 부족함이 많았던 저를 기다려주고 응원해 줬던 팀원들에게 이 자리를 빌려 감사의 말을 말씀을 드립니다. :) | 이번 프로젝트는 이론으로 배운 내용을 실제로 적용해 볼 수 있는 좋은 기회였습니다. 이론으로만 알고 있었던 부분을 실제로 적용함으로써 데이터베이스 실행 계획의 중요성과 데이터베이스 관련 테스트 코드 작성 시 고려해야 할 사항들을 인식할 수 있었습니다. 또한, 제 능력에서 부족한 부분을 면밀히 이해할 수 있었습니다. 일반적인 데이터베이스 이론에 대해 더 공부할 필요가 있으며, 테스트 코드 작성도 부족함을 느꼈습니다. 그리고 객체 지향에 대한 고민이 부족했다는 점을 인지하고 추가 학습이 필요함을 깨달았습니다. 이번 프로젝트를 통해, 검색과 주문과 같은 복잡한 비즈니스 로직을 적용할 수 있었고, 최적화를 실제로 적용하고 Jmeter를 통해 테스트하는 과정에서 가장 많이 배웠습니다. 마지막으로, 팀원들의 적극적인 코드 리뷰를 통해 협업 환경을 진정으로 경험한 것이 가장 좋았습니다. 감사합니다. |