SpringBoot NextJS 활용한 쇼핑몰 프로젝트 - 기획
기획 배경
이전에서는 웹사이트 링크를 효율적으로 관리하는 웹 서비스 프로젝트에서 퍼블리싱과 프론트 부분만을 담당하였다. 처음으로 경험한 협업 프로젝트인지라 웹 서비스 로직에 대한 전반적인 이해도의 부족으로 인한 어려움이 많았다. 특히, 가장 많은 시간을 소요했던 어려움들은 다음과 같다.
- 배포
- 성능 최적화
- 확장에 용이한 설계
1. 배포
배포 방식에 대해서 사전에 공부가 부족했고, 팀원들과의 충분한 논의가 이루어지지 않은 상태에서 진행했기 때문에 아직까지도 배포가 제대로 이루어지지 않은 상태이다.
2. 성능 최적화
프론트 단의 경우, 기존의 설계대로 구현은 완료했으나, 코드 리팩토링 정도만 진행했을 뿐 최적화 작업에 신경을 쓰지 못하였다. 단순 CRUD에만 집중하여 실제로 서비스 환경에서 트래픽이 몰릴 경우에 어떻게 대처할 것인지 마땅한 해결책을 제시하지 못했다.
3. 확장에 용이한 설계
주문 사항이 여러 번 뒤바뀌면서 기존 설계와 많이 다른 방향으로 개발이 진행되면서 다소 난잡한 구성으로 코드를 작성하는 일이 잦았다. 이 때문에 유지 보수에 어려움이 많아 프로젝트가 진행될수록 기능 확장에 부담이 생기게 되었다.
이번 프로젝트에서는 위와 같은 문제점을 해결하기 위한 다양한 방법을 활용해보고, 웹 서비스의 전반적인 이해력을 스스로 점검하기 위해 웹 서비스의 모든 로직을 혼자서 설계하고 구현하고자 한다.
목표
1. 도메인 주도 설계 방식을 적용하여 데이터 중심의 접근법을 탈피해 도메인과 그 로직에 집중하여 코드를 단순화하도록 한다.
2. 프로젝트 구현에 사용되는 모든 기술에 대한 정확한 개념과 동작 원리를 익히고, 개발 과정에서 맞이하게 될 문제들을 기록하면서 웹 서비스 전반적인 흐름을 숙지한다.
3. 주기적으로 테스트 코드를 작성하여 유닛테스트를 하고 잘못된 코드 배포가 이루어지는 것을 방지하고 확장에 용이한 코드를 작성하고자 한다.
4. 개발이 어느 정도 이루어지면 프론트 단의 최적화, 백엔드 단의 캐싱 서버 도입등을 진행하고 최종적으로 대규모 트래픽 부하 테스트를 통과할 수 있는 것을 목표로 한다.
개선 방안
최종적으로 대규모 트래픽 부하 테스트를 통과하는 것을 목표로 한다.
이를 위한 서비스 개선 방안을 정리하면 다음과 같다.
- 로드밸런싱 적용: 트래픽을 여러 대의 서버로 분산
- Next.js에 react query 도입: 캐싱, 데이터 자동 동기화로 트래픽 최적화
- 캐싱 서버 도입: 서버에 도달하는 요청 수를 줄이고 대역폭 사용을 최적화
- API 분리: 관리자 계정 API를 기존 멤버 계정 API와 분리하여 부하를 여러 엔드포인트에 분산시킨다.
계획
1. 공부
Spring, Springboot, JPA, SpringSecurity, Next.js 등 필요한 공부를 진행한다.
2. 기획
대략적인 기획은 다음과 같다.
회원
- 회원가입 / 로그인 및 로그아웃
상품
- 상품 등록(관리자) / 상품 관리(관리자) / 상품 수정(관리자) / 할인 적용(관리자) / 상품 조회 (메인화면) / 상품 상세 페이지 / 연관 상품 조회 / 카테고리별 조회(상의, 아우터, 바지, 신발, 모자) / 좋아요 누른 상품 보기/ 최근 본 상품 보기/ 상품 정렬(조회순, 좋아요순, 낮은 가격순, 높은 가격순, 할인율 순)
주문
- 상품 주문 / 주문 내역 조회 / 주문 취소
장바구니
- 장바구니 담기 / 장바구니 조회 / 장바구니 삭제 / 장바구니에 담긴 상품들 주문하기
추후에 상황에 따라 세부적인 기획을 진행할 예정이다.
3. 디자인
피그마를 활용하여 프론트 단의 환경을 퍼블리싱 한다.
4. 설계
공부한 내용을 바탕으로 서버 부하 방지를 고려한 쇼핑몰 서비스에 대한 설계도를 작성한다. ERD, 아키텍처 구조, 각 기능에 대한 정책, 각 도메인에 대한 역할 설정 등 모든 절차에 대한 세부적인 기능을 설계한다. draw.io로 시각화를 한다.
위는 초기 설계도이며 추후에 세부적인 설계를 진행할 예정이다.
5. DB 셋업하기(인프라 먼저 구현)
Replication으로 Read-only DB를 따로 구현할 것인지 고려
6. 프론트 Mock 페이지 개발
피그마로 Mock up
MSW 라이브러리 이용하여 백엔드 개발 전에 api 응답을 moking함
7. Ci/CD 구축
먼저 서버만 자동화 배포 해놓기
Blue Green과 카나리 배포 방식에 대해 알아보기
도커를 활용
8. 로그인 개발
RBAC(역할 기반 접근 제어) 서비스 설계 : JWT(Header, Payload, Signature)를 활용하여 스프링 서버 내에서 역할에 따른 토큰 부여를 다르게 하는 방식으로 구현할 예정
Keyclock을 활용한 로그인 인증 방식 구현(또는 SpringSecurity와 Oauth 활용)
Redis Cluster 또는 Standalone으로 캐싱 서버 구현 및 API 캐싱
카카오, 구글 등 로그인 api도 고려해 볼 것
9. 백엔드 개발 진행
데이터 Read 위주로 API 개발하고 RBAC를 고려할 것.
서비스 api와 어드민 api를 분리(멀티모듈 활용 여부 고민)
결제 방식은 카카오 페이의 Mock 결제를 연동
NGINX로 웹서버 구현, 로드밸런싱 적용
주기적으로 테스트 코드 작성하기
Swagger로 API 문서 작성
10. 프론트 개발 진행
Typescript + Next.js로 구현
React query로 캐싱하고 했을 때 안 했을 때 요청 날아가는 개수 차이 비교해보기
도커로 배포하기
11. 모니터링 환경 설정 및 성능 테스트
Prometheus, Grafana 오픈소스를 활용하여 모니터링
ELK또는 Loki로 로그 수집 및 검색 구현
Jmeter로 대규모 트래픽 부하 테스트
12. 캐싱 서버
Redis Cluster 또는 StandAlone
캐싱 서버가 있을 때 없을 때 부하 테스트 비교하기
