- 클래식 공연 감상의 길잡이가 되는 서비스를 제공함으로써 클래식 공연 문화를 더 즐겁게 향유할 수 있도록 합니다.
- 사용자의 취향에 맞는 공연을 추천해주고, 티켓을 만들어 추억을 간직하고, 공유합니다.
- 2024.10.05 ~ 2024.11.24
Frontend: 2명Backend: 2명
| Profile | Name | Role |
|---|---|---|
 |
김진희 kimzini FE |
소셜 로그인, 온보딩, 공연 상세, 마이 페이지, 티켓 등록 서비스 GUI 개발 및 API 연동 |
 |
성태현 dvp-tae FE |
서비스 메인, 리뷰, 둘러보기, 클라코북 만들기 서비스 GUI 개발 및 API 연동 |
 |
<개발 리드> 이건 devkeon BE |
아키텍처 설계, ERD 설계, 메인 서버 인프라 및 CI/CD 구축, 인증/인가, 모니터링 시스템 구축, 티켓/리뷰 기능, 클라코북 기능, 회원 관련 기능 |
 |
정희찬 anselmo BE |
ERD 설계, AI 및 배치 서버 인프라 및 CI/CD 구축, 추천 AI 모델 구현, 배치 기능(데이터 로드) 구축, 공연 기능, 공연 및 티켓 추천 기능 |
- 개발 및 유지보수 비용 절감
- 사용자가 홈 화면에 추가하여 앱처럼 활용 가능
- 네이티브 앱과 유사한 사용성과 빠른 로딩 속도 제공
- 플랫폼 제약 없이 다양한 환경에서 동일한 사용자 경험 제공
- 추후 웹 푸시 알림, 백그라운드 동작 등 기능 확장이 용이
- JWT를 활용한 인증/인가
- SSL 보안 계층을 활용한 토큰 암호화 (HTTPS, ALB 설치)
- CSRF / XSS 공격에 대비한 토큰 저장 분리 (Local storage, HTTP-only Cookie)
- Nginx를 활용한 actuator와 같은 민감 정보 deny
- Spring Security를 활용한 철저한 Auth 검사 및 uri 접근 조정
- Kakao OAuth2.0을 활용한 인증/인가 기능 간편화
- docker 네트워크를 활용하여 spring 서버나, prometheus같은 인스턴스 포트 매핑x (Endpoint 단일화)
- Collaborative Filtering & Cosine Similarity 기반 추천시스템
- 각 Concert는 AI가 추출해준 키워드 값에 대해 0 ~ 1 사이의 값을 가짐
- 유저도 마찬가지로 온보딩에서 등록한 취향 정보로 부터 모든 키워드 값에 대해 0 ~ 1사이 값을 가짐
- Concerts, Users CSV파일을 통해서 Cosine Similarity와 Collaborative Filtering을 통한 유사도 계산 후 추천 진행
- 서비스의 주요 로직을 처리하는 서버
- Grafana와 Prometheus에 기반한 모니터링 시스템 구축
- Nginx를 통한 리버스 프록시 설정
- 공연 성격 분석이나, 유저 성격 분석, OCR을 처리하는 서버
- OCR 및 공연 성격 정보 추출은 NCP의 AI 서비스를 활용
- 추천 시스템의 경우 직접 Collaborative Filtering Model 구현
- KOPIS 시스템으로부터 공연 정보를 주기적으로 업데이트하는 서버(한달에 1번)
- KOPIS에서 데이터를 받아올때마다 AI서버에 학습 요청
| 기술 스택 | 설명 |
|---|---|
| React | React는 가장 핵심 요소인 Virtual Dom을 이용하여 불필요한 화면 갱신을 최소화합니다. 이를 통해, 성능 향상을 시킬 수 있으며 빠른 렌더링을 지원합니다. React는 컴포넌트 기반 아키텍처를 채택하고 있으며, UI 요소들을 컴포넌트로 분리하여 개발하고 조합하는 방식으로 구성할 수 있습니다. 따라서, 컴포넌트의 재사용성을 용이하게 하며, 코드 수정 및 유지·보수에 효율적이기에 React를 사용하게 되었습니다. |
| TypeScript | 정적 타입 언어로서 코드의 안정성을 높이고 협업을 용이하게 하며, 생산성 접근 파일 단계에서 오류를 사전에 발견하여 런타임 오류를 방지할 수 있습니다. 또한, 코드 힌트와 자동 완성을 제공해 개발 생산성을 향상시킬 수 있어 TypeScript를 선정했습니다. |
| Zustand | 간결하고 직관적인 상태 관리 방식과 최소한의 보일러플레이트로 유연성을 제공하며, 상태 변경 시에만 컴포넌트를 렌더링하여 불필요한 렌더링을 최소화하고 성능 향상에 도움이 됩니다. |
| Yarn | 빠른 속도와 높은 신뢰성을 바탕으로 안정적인 JavaScript 패키지 관리를 지원하며, 보안성 강화 기능을 제공하여 효율적인 프로젝트 관리가 가능합니다. |
| TailwindCSS | 개발의 편의성 HTML과 CSS 파일을 별도로 개발 및 관리할 필요가 없기 때문에 개발하기에 편리하고, 팀핑하는 각 태그의 클래스명을 고민할 시간을 절약할 수 있어 빠른 개발이 가능합니다. |
| shadcn/ui | TailwindCSS와의 긴밀한 통합으로 빠르고 일관된 스타일링이 가능하며, 높은 확장성과 유연한 커스터마이징 기능을 통해 프로젝트 요구사항에 맞는 UI를 효율적으로 구현할 수 있습니다. |
| Tanstack-Query | 효율적인 데이터 페칭과 관리를 제공하며, 데이터 캐싱 기능을 통해 불필요한 요청을 줄여 성능 최적화와 네트워크 비용 절감이 가능합니다. |
| Vercel | 깃 저장소와 통합되어 코드 변경 사항을 자동으로 감지하고, 푸시할 때마다 자동 배포를 지원하여 효율적이고 간편하게 웹사이트를 배포할 수 있습니다. |
| PWA | 웹 기술 기반으로 다양한 플랫폼에서 동작하고, 앱 스토어 없이 홈 화면에 추가할 수 있어 접근성과 편의성이 뛰어나며, 개발 비용 절감과 빠른 배포가 가능합니다. |
- 폴더명 -
PascalCase - 파일명 -
PascalCase - 타입, 유틸함수 등 -
camelCase - 상수 -
UpperCase
커밋 메시지는 태그: 커밋 메시지 형식으로 작성 (ex. git commit -m "feat: 카카오 로그인 기능 구현")
📌Type
| 태그명 | commit 규칙 |
|---|---|
| 🔗 feat | 새로운 기능 개발 |
| 🛠 fix | UI,UX 및 코드 수정 |
| 🎨 style | CSS 스타일링 및 퍼블리싱 작업 |
| 📄 docs | 문서 작업(REANME.md 등) |
| 📘 test | 배포 테스트, QA 테스팅 관련 |
| 🧰 refactor | 코드 리팩토링 |
| 🔧 rename | 폴더 혹은 파일명 변경 |
| ✂️ remove | 파일 삭제 |
-
기능 개발 관련 Issue Template이슈에 관한 설명
- 할 일 1
-
버그 수정 관련 Issue Template무슨 에러인지 설명!
특정 기기에서만 발생하는 에러라면 디바이스 종류, 브라우저 종류 등!
어떻게 재현하는지 설명!
스크린샷 or GIF 등..
- 관련 이슈
- 기존 코드에 영향을 미치는 작업 사항
- 기존 코드에 영향을 미치지 않는 작업 사항
- 작업 내용 스크린 샷
- 리뷰어에게 공유할 내용
- 추후 작업할 내용
- main (develop) 브랜치 pull 여부 확인
| 브랜치 명 | 역할 |
|---|---|
| main | 최종 배포될 서비스의 브랜치 |
| develop | 개발 브랜치, 해당 브랜치에서 분기를 파 작업 후 merge |
| feature | 기능 개발 브랜치 |
| hotfix | main 브랜치 배포 후 긴급 수정 사항 발생 시 사용하는 브랜치 |
Language:
Java 17
Framework:Spring Boot 3.3.4
Database:MySQL 8.x
ORM:JPA(Hibernate)
CI/CD:Github Actions
Cloud Platform:AWS(EC2, ALB, ACM), GCP(SQL)
Test DB:testcontainer
TDD (테스트 주도 개발): 구문 커버지리 (Statement coverage) 기준 80%를 목표로 수행Agile (애자일 프로세스): 1주 단위 스프린트 수행Github Flow 전략: 초기 개발 과정에서 불필요한 브랜치 관리를 피하고, 빠른 배포를 위한 전략 선택CI/CD 파이프라인을 통한 배포 자동화: 서비스 개발이 50% 완료된 시점에서 구축하여 배포 자동화
- Service는 단위 테스트, Repository는 통합 테스트 진행
testcontainer를 활용하여 데이터베이스 멱등성 보장- 테스트 코드 커버리지 측정 툴:
IntelliJ
- summary
- statement coverage 기준: 88%
- branch coverage: 54.8%
- class coverage: 100%
- method coverage: 96.7%
- 사용 인스턴스 유형:
t2.large (ram 8GB) - 부하 테스트 측정 툴:
Jmeter
- summary
- 도메인별 주요 api 평균 50.3 Throughput
- 카테고리에서 연관 관계 설정을 통해 관계형 데이터베이스 활용
- AI 서비스 학습을 위한 soft delete 활용
- PR 이벤트 발생 시 CI 실행 (테스트 포함)
- approve 및 CI 성공 시 merge 가능
- merge 이벤트 발생 시 CI 스크립트 수행
- CI 스크립트 성공 시 CD 스크립트 수행
- Docker 이미지 docker hub에 push
- SSH로 AWS EC2 연결
- docker hub에서 이미지 pull
- dokcer-compose를 활용해 서비스 실행 및 도커 네트워크 구축