System Architecture
CI/CD
Frontend
Frontend Tech Stacks : Vite, React, TypeScript, Tailwind, Recoil, Jest, React Testing Library
Vite
Vite는 빠른 빌드 속도를 제공하는 웹 프로젝트 빌드 도구이다. Es build와 브라우저 모듈을 사용하여 개발 모드, 개발 서버, 번들링, HMR 등의 기능을 통합하였다. 이는 간결한 사용법과 안정성을 보장하며, Webpack에 비해 빌드 시간이 대폭 줄어 수정 사항이 빠르게 반영된다. 이러한 특징들로 인해, 이번 프로젝트에서 Vite를 사용하기로 결정하였다.
Tailwind
Tailwind는 스타일 네이밍에 대한 부담을 줄여주고, 반응형 웹 페이지를 간편하게 구축하는 데 도움을 준다. 또한 일관된 디자인 시스템을 쉽게 구현할 수 있고, 복잡한 오버라이드 없이 스타일 변경이 가능하다는 점 때문에 Tailwind CSS를 선택하였다.
AWS S3
AWS S3는 데이터의 안정성과 확장성을 보장하며, 강력한 보안 기능을 제공한다. 또한 사용한 만큼의 비용을 지불하는 방식으로 서비스를 제공하여 비용 효율성이 뛰어나다. 이러한 특징들로 인해 AWS S3를 이미지 호스팅 서비스로서 선택하였다.
Recoil
Recoil은 Facebook이 개발한 상태 관리 라이브러리로, React 애플리케이션에서 컴포넌트 간 공유 상태를 관리하는데 특화되어 있다. 상태 간의 종속성을 명확하게 표현하고, 비동기 작업에 대한 최적화를 가능하게 하기 때문에 상태 관리가 복잡한 애플리케이션에서 높은 효율성을 제공한다. 무엇보다도 API가 간결하고 사용법이 직관적이므로 쉽게 학습하고 적용할 수 있었다. 이러한 이유로 이번 프로젝트에서 Recoil을 상태 관리 도구로 선택하였다.
Frontend Issue
다음은 프로젝트를 진행하면서 겪은 이슈이다.
Backend
Springboot
Springboot는 Spring으로 애플리케이션을 만들 때에 필요한 설정을 간편하게 처리해주는 별도의 프레임워크이다. 자주 사용되는 라이브러리들의 버전을 자동으로 관리하고, 자체적인 내장 웹 서버 제공하기 때문에 빠르고 간편하게 배포할 수 있다. 또한, 독립적으로 실행 가능한 Jar 파일로 프로젝트를 빌드할 수 있어, 가상화 환경에 빠르게 배포할 수 있다.
Nginx
Nginx는 클라이언트로부터 동시 접속 처리에 특화된 웹 서버로 http 요청을 받아 요청 파일을 http 통신을 통해 응답해주는 프로그램이다. 서버 확장에 용이하고, 보안도 더 뛰어나다. 서버가 두대 이상이 될 경우 서버 부하를 줄여 주기 때문에 선택하였다.
SonaQube
코드 품질 분석 및 취약점 파악하고 코드 스멜과 코드 중복 제거하기 위해 SonaQube를 선택했다.
JaCoCo
Java 코드의 커버리지 체크 하기 위해 Jacoco를 선택했다.
Demo
