또레카

어떤 상품이 마음에 드는지 헷갈리는 사용자들을 위한

'감정분석 + 상품추천 쇼핑몰 : Eureka' 리펙토링 프로젝트

🛠개발기간 : 2021.04.12~2021.05.21

Eureka

Our Team

Backend

• 팀장 이수민(@sumin416)

• 팀원 심재혁(@JaeHyukSim)

Frontend

• 팀원 강구원(@KangGooWeon)

• 팀원 정준영(@dkwjdi)
  
  

🛠개발기간

2021.04.12~2021.05.21

서비스 구성도

💡유레카 기능

◾메인페이지

◾카테고리 조회

◾상품조회, 감정, 장바구니 등록

◾장바구니 조회 및 결제

◾내가 본 상품 감정 통계

◾마이페이지

◾판매자페이지

◾상품등록

◾판매제품관리

◾주문알림

◾배송관리

기술 스택

WEB

DevOps

	기술 스택
SCM	GitLab,Jira
Cloud Service	AWS EC2

Front-end

	기술 스택
Language	HTML CSS JavaScript
Framework	Vue.js
Library	Vuetify Axios chart.js

Back-end

	기술 스택
Server Architecture	MSA
Language	Java8
Framework	SpringBoot SpringCloud SpringSecurity SpringDataJPA
BuildTool	Gradle,Maven
DBMS	MySQL
Testing	JUnit Locust

Frontend 실행방법 및 파일구조

Frontend

Backend 실행방법 및 파일구조

Backend

Frontend Refactoring

1.서버에 가해지는 디도스 공격 해결 (for문을 통한 Axios호출)

기존의 코드는 for문을 통해 Axios통신을 여러번 한 뒤, response값에 대해 다시 for문을 돌려 Axios를 호출하는 구조 Backend에서의 Database통신은 저렴하지만, 프론트에서 백으로의 통신은 비용이 비쌈 => 백엔드에서 한 번에 필요한 데이터를 받는 구조로 변경

메인 화면에서 오늘의 상품, 요즘 뜨는 상품, 스테디셀러 상푸미 카테고리별 추천상품별로 총 4개의 컴포넌트에서 각각 사진에 대해 Axios통신을 하는 구조 한번의 Axios를 통해 4개의 컴포넌트에 필요한 데이터를 받은 후 Vuex를 통해 상태관리하는 구조로 변경

2.유지보수가 어려운 코드를 해결

기존의 코드는 각각의 컴포넌트에서 Axios를 직접호출 하였기 때문에 하나의 API를 수정하기 위해서는 여러 컴포넌트에서의 코드수정이 필요 이를 위해 API를 모듈화해 유지보수를 쉽게 하였고 중복으로 일어나는 Axios호출 코드를 request객체에 저장해 코드의 중복을 제거

Backend Refactoring

1.서버에 가해지는 디도스 공격 해결 (for문을 통한 Axios호출)

RestTemplete입니다 이 기술을 이용해 프론트에서 삼중 및 사중 axios 문제를 해결할 수 있었습니다. 실제로 기존 코드는 잘못된 백엔드의 API 제공으로 인해 지나치게 많은 API를 호출하는 문제가 있습니다. Rest Templete를 활용해 클라이언트와 서버간 API를 줄이고, 데이터는 서버 내에서 집약하는 과정을 거쳐 문제를 해결할 수 있습니다.

비즈니스 로직별로 API를 재구축했습니다. 메서드와 리소스를 명확히 구분해서 기존의 뒤죽박죽인 API 호출 문제를 해결했습니다.

서버간 통신을 하기 위한 RestTemplate 적용시 모든 HTTPMethod는 exchange 함수로 처리가 가능했습니다. 그래서 get/post 등 httpMethod의 공통로직을 만들어 모듈화했습니다. 또한, 만든 클래스를 다양한 경우에서 사용하기 위해 자바 제네릭을 사용했습니다.

2.JUnit5

JUnit5를 활용하기도 했습니다. 웹 개발하면서 db샘플을 만들어 전 과정을 테스트하는 것이 불편했습니다. 이를 해결하기 위해 Mockito를 활용해, 의존관계가 있는 모듈을 독립적으로 테스트하였습니다.

3. Swagger & Java Doc

Java Docs와 스웨거를 활용해 문서화를 수행했습니다. 유레카를 유지보수하면서 제대로 문서화되어 있지 않아 코드를 해석하는 것이 너무 힘들었습니다. 다른 유지보수를 하는 팀이 같은 과정을 겪지 않도록 하기 위해 메서드 단위로 하나하나 문서화하고 스웨거로 API를 문서화 하였습니다.