• myGarden
  • 개요
  • 아키텍처
    • 해당 기술 스택 선택 이유
  • API Docs (Spring Rest Docs)
  • ERD
  • TestCoverage
  • 트러블 슈팅
    • Front (Vue.js)
    • Back (Spring Boot)
  • 주요 기능
    • 하루 일과
    • 게시판 (공지사항 게시판, TIL 게시판)
    • CI / CD
    • Prometheus / Grafana

myGarden

개요

생각하는 대로 살지 않으면 사는 대로 생각하게 된다

Il faut vivre comme on pense, sinon tôt ou tard on finit par penser comme on a vécu.

myGarden 프로젝트는 내 삶에 있어서 조금 더 주도성을 가지기 위해, 내 행동들을 기록하고 관리하기 위해 제작된 개인 사이드 프로젝트입니다.

(프로젝트 기간 : 2023년 12월 12일 ~ 2024년 3월 26일)

아키텍처

분야	기술 스택
Front	Vue.js
Back	Spring Boot
DevOps	AWS EC2 / AWS RDS / AWS Parameter Store / Docker
DB	MySQL (AWS RDS)
CI/CD	Github Actions
Monitoring	Prometheus / Grafana

해당 기술 스택 선택 이유

접기/펼치기

• Vue.js
  • Vue.js는 React에 비해 러닝커브가 낮고 공식 문서가 잘 되어 있어, 간단한 프로젝트를 만들기에 효율적인 프레임워크이기 때문에 선택했습니다.
• JWT
  • JWT는 토큰 기반 인증을 통해 REST API에 대한 인증 및 권한 부여를 쉽게 구현할 수 있고, Session에 비해서 서버의 부담이 더 적기 때문에 선택했습니다. (AWS 프리티어를 사용하고 있어서 서버의 리소스를 주로 고려했습니다.)
• MySQL
  • MySQL은 오랜 기간 동안 유지되어 온 오픈소스 프로젝트이며, 방대한 참고 자료와 함께 수많은 기업에서 사용할만큼 그 안정성이 검증되었기 때문하여 선택했습니다.
• QueryDSL
  • QueryDSL은 JPA의 JPQL을 타입 세이프하게 사용할 수 있게 해주고, 동적 쿼리를 작성할 때 가독성이 좋아서 선택했습니다.
• Spring Rest Docs
  • Spring Rest Docs는 Swagger에 비해 비지니스 코드에 비침투적이며, 반드시 테스트 코드를 작성해야 하기 때문에 테스트 코드에 좀 더 친숙해지기 위해 선택했습니다. 그리고 문서화 과정이 코드와 밀접하게 연결되어 있어, 실제 코드와 문서 간의 일관성을 유지하기 쉽습니다.
• Github Actions
  • Github Actions는 간편하게 설정이 가능해서 소규모 개인 프로젝트를 할 때 더 적합하다고 판단했으며, 추가적인 인프라 설정 없이 GitHub의 클라우드 인프라에서 실행이 가능하기 때문에 선택했습니다.
• Docker
  • Docker는 다양한 환경에서의 호환성 문제를 최소화할 수 있어서, 일관성을 보장하고 이식성이 좋기 때문에 선택했습니다.
• Prometheus, Grafana
  • Prometheus, Grafana는 두 기술 스택 모두 오픈소스라서 비용 문제 없이 접근할 수 있으며, 두 기술 모두 커뮤니티가 잘 되어 있기 때문에 관련 자료의 접근성이 좋아서 선택했습니다.

API Docs (Spring Rest Docs)

ERD

TestCoverage

• 현재 백엔드 단의 TestCoverage입니다.

트러블 슈팅

Front (Vue.js)

1. vue 3버전 CORS 에러 해결하기
2. vue 사용 중 Component의 속성 값이 변경되지 않는 이슈

Back (Spring Boot)

1. [SpringDataJPA] JPA 사용 중 enum 관련하여 Table에 Insert 할 때 Check constraint violation: "CONSTRAINT_D: "; 가 발생하는 이슈
2. spring boot 3.2에서 aws parameter store 적용하기
3. [AWS EC2 - Amazon Linux 2023 OS] 포트 리다이렉트(port redirect )하며 발생한 이슈 정리
4. spring MVC에서 Vue history mode 설정하기 (spring security 사용 중)
5. AWS를 이용해서 HTTPS 적용 후 HTTPS가 반영이 안될 때 확인 방법
6. [Vue + Spring] Github Actions를 이용한 CI/CD 구축하기 (+ Jacoco PR Comment 기능)
7. [Prometheus + Grafana] Monitoring 도입하기 ( + Node Exporter)
8. GitHub Actions 기반의 CI 속도 개선 [Vue.js Build]
9. GitHub Actions 기반의 CD 속도 개선
10. Spring Boot에서 @RestControllerAdvice 우선순위 문제 해결하기 (aka @Order)
11. 공부 시간 잔디 화면을 이미지로 저장하기 [With AWS (CDK + API Gateway + Lambda + S3)] (aka. Html to Image)

주요 기능

하루 일과

• 오늘 있었던 일들을 시간대별로 등록 및 확인할 수 있다.
• 오늘 등록한 내용들을 타입별로 정리하여 확인할 수 있다.
• 하루 일과 통계에서 지금까지 등록한 내용들을 타입별로 통계를 내어 확인할 수 있다.
• 지금까지 등록한 공부 타입의 일과들을 Calendar Heatmap의 형태로 모아서 볼 수 있다.
  (※ AWS Lambda를 이용해 공부 시간 잔디를 캡쳐하여 S3에 저장하고, GitHub ReadMe에서 읽어온다.)

• 일과 확인

  

• 일과 범위 통계

  

• 공부 시간 잔디

  

게시판 (공지사항 게시판, TIL 게시판)

• 게시판 기능을 제공
  • 게시글 확인 및 작성 (게시글 작성시 Markdown Editor 사용 가능)
  • 게시글에 대해서 검색 및 정렬이 가능하고 페이지네이션 적용
  • TIL 게시판 : 댓글 작성 가능
• 게시판별로 접근 권한을 분리
  • 공지사항은 관리자만 작성 가능

CI / CD

• Github Actions를 이용하여 CI/CD를 적용

  • PR이 작성되면, 자동으로 테스트 및 빌드가 진행
  • PR이 Merge되면, 자동으로 Docker 이미지를 빌드하여 배포 진행

• PR에 대해서 테스트 및 빌드 진행

  

• CD 진행

  

Prometheus / Grafana

• Prometheus와 Grafana를 이용하여 Monitoring을 적용

• Spring App Server

• AWS EC2 Server - Node Exporter