-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
301 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,302 @@ | ||
|
|
||
| ## **6️⃣ 개발** | ||
|
|
||
| ### **🔍 System Architecture** | ||
|
|
||
|  | ||
|
|
||
| <br><br> | ||
|
|
||
| ### **📜 ERD 설계도** | ||
|
|
||
|  | ||
| <br><br> | ||
|
|
||
| ## **💻 Technology** | ||
|
|
||
|
|
||
| ### 🖥️ Frontend | ||
| <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"/> <img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white"/> <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white"/> | ||
| <br> <img src="https://img.shields.io/badge/axios-DB5C3F?style=for-the-badge&logo=axios&logoColor=white"/> <img src="https://img.shields.io/badge/Recoil-3578E5?style=for-the-badge&logo=recoil&logoColor=white"/> <img src="https://img.shields.io/badge/Styled Components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white"/> <img src="https://img.shields.io/badge/FramerMotion-black?style=for-the-badge&logo=framer&logoColor=blue"/> <br> <img src="https://img.shields.io/badge/PWA-571DC2?style=for-the-badge&logo=pwa&logoColor=white"/> | ||
|
|
||
|
|
||
| ### 📀 Backend | ||
| [](https://spring.io/projects/spring-boot) | ||
| [](https://spring.io/projects/spring-security) | ||
| [](https://spring.io/projects/spring-data-jpa) | ||
| [](https://gradle.org/) | ||
| [](https://jwt.io/) | ||
| [](https://oauth.net/) | ||
| [](https://www.thymeleaf.org/) | ||
| [](https://www.mysql.com/) | ||
|
|
||
| ### 💻 Infra | ||
| [](https://www.ncloud.com/) | ||
| [](https://www.ncloud.com/) | ||
| [](https://www.ncloud.com/) | ||
| [](https://www.ncloud.com/) | ||
| [](https://www.ncloud.com/) | ||
| [](https://www.ncloud.com/) | ||
| [](https://en.wikipedia.org/wiki/Object_storage) | ||
| [](https://clova.ai/) | ||
| [](https://firebase.google.com/) | ||
| [](https://www.ncloud.com/) | ||
|
|
||
|
|
||
|
|
||
| ### 🚀 CI/CD | ||
| [](https://github.com/features/actions) | ||
| [](https://en.wikipedia.org/wiki/Deployment) | ||
| [](https://www.naver.com/) [](https://en.wikipedia.org/wiki/Object_storage) | ||
|
|
||
|
|
||
| ### 🤝🏻 Co-working Tool | ||
| <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white"/> <img src="https://img.shields.io/badge/-Swagger-%23Clojure?style=for-the-badge&logo=swagger&logoColor=white"/> <img src="https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&logo=postman&logoColor=white"/> <img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white"/> <img src="https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white"/> <img src="https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=notion&logoColor=white"/> | ||
|
|
||
| <br><br> | ||
|
|
||
| ## 기술 스택 선정 이유 | ||
|
|
||
|
|
||
| ### 📘 Frontend | ||
| #### `React` | ||
| - 빠른 업데이트, 빠른 렌더링 | ||
| - Virtual DOM을 통해 빠른 업데이트, 렌더링을 제공하여 성능 최적화 | ||
| - 코드 재사용성, 유지보수성 ↑ | ||
| - 컴포넌트 기반 아키텍처로 이루어져 있어 재사용, 유지보수에 용이 | ||
| - 다양한 라이브러리와 활발한 커뮤니티 | ||
| - 사용량이 많은 만큼, 다양한 문제에 대한 많은 솔루션이 존재 | ||
| - 크로스 플랫폼(react-native) 앱으로의 확장 가능성 | ||
| #### `Vite` | ||
| - 빠른 로컬 서버 구동 | ||
| - esbuild로 미리 번들링한 모듈을 필요할 때 가져와 즉각적으로 서버 구동 | ||
| - HMR을 지원하여 수정된 모듈만을 교체 | ||
| - 빠른 프로덕션 빌드 | ||
| - 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합. 중복을 제거하기 때문에 가볍고 빠르게 빌드 가능 | ||
| #### `TypeScript` | ||
| - 높은 생산성 | ||
| - 작업과 동시에 디버깅이 가능해 에러 사전 방지 | ||
| - 객체 안의 필드값을 다 기억할 필요없이 IDE가 자동으로 리스트업 해주어 편리 | ||
| <br> | ||
| #### `Recoil + Axios` | ||
| - 상태관리의 편리함 | ||
| - atom의 상태를 구독, 업데이트하는 방법을 사용하여 간단한 코드만으로 전역 상태 관리 가능 | ||
| <br> | ||
| #### `StyledComponents` | ||
| - 컴포넌트 기반 CSS 작성의 편리함 | ||
| - jsx 내에 css를 적용할 때 카멜케이스로 작성해야하는 번거로움 없이 css 문법 그대로 사용 가능 | ||
| - 직관적인 CSS | ||
| - props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적 | ||
| - 태그에 의미를 부여하여 직관적으로, 어떤 용도로 사용하는지 파악 가능 | ||
| #### `FramerMotion` | ||
| - 쉽게 구현하는 애니메이션, 제스쳐 | ||
| - animate props를 통해 CSS transitions를 자동 생성해주어 자주 사용되는 애니메이션을 쉽게 구현 가능 | ||
| #### `PWA` | ||
| - 네이티브 앱 수준의 모바일 친화적 웹 개발 가능 | ||
| - 푸시 알림 전송 가능 | ||
|
|
||
| <br><br> | ||
|
|
||
| ### 📀 Back-end | ||
|
|
||
| #### `Spring Boot` | ||
| • Java 기반의 애플리케이션을 빠르게 구축할 수 있게 도와주는 프레임워크 <br> | ||
| • 자동 설정, 스타터 패키지, 내장 서버 등을 통해 개발자가 인프라에 신경 쓰지 않고 비즈니스 로직에 집중가능 <br> | ||
| • 팀원 기술 스택에 맞는 Java 기반의 서버를 구축하기위해 사용 | ||
|
|
||
| #### `Spring Security` | ||
| • 인증과 권한 부여를 위한 포괄적인 보안 프레임워크 <br> | ||
| • JWT 기반의 인증 및 인가를 구현하기위해 사용 <br> | ||
| • 추후, 인증 및 인가의 확장의 가능성이 있기 때문에, interceptor 대신 Spring Security 사용 <br> | ||
|
|
||
| #### `JPA` | ||
| • Java ORM 기술로, MYSQL을 자바에서 관리하기 위해 사용 | ||
|
|
||
| #### `Gradle` | ||
| • 빌드 및 의존성 관리 도구로, Maven과 비교하여 더 유연하고 강력한 기능을 제공 | ||
|
|
||
| #### `Swagger` | ||
| • API 문서를 자동으로 생성하고, API 엔드포인트를 테스트할 수 있는 인터페이스 | ||
|
|
||
| #### `JWT` | ||
| • 사용자 인증에 사용되는 토큰 기반 기술로, 서버와 클라이언트 간의 안전한 정보 교환을 가능 <br> | ||
| • 서버 Scale-out시에, Session 방식에 비해 확장성이 좋아 JWT 방식으로 인증 및 인가 구현 | ||
|
|
||
| #### `OAuth2` | ||
| • 외부 제공자를 통한 인증을 구현하는 데 사용되는 프레임워크 <br> | ||
| • 사용자 로그인 편의성 및 높은 접근성을 위해 Kakao를 사용 | ||
|
|
||
|
|
||
|
|
||
| <br><br> | ||
| ### 💻 Infra | ||
|
|
||
| #### `Server` | ||
| • 네이버 클라우드에서 제공하는 클라우드 컴퓨팅 서비스 | ||
| • 서버를 배포하기 위해 사용 | ||
| • Private Subnet에 실서버 구축 및 Public Subnet에 Test Server 구축 | ||
| • Test Server를 통해 테스트 환경 구축 및 Bastion Host 기능 수행 | ||
|
|
||
| #### `Load Balancer` | ||
| • HTTP 트래픽을 제어하기 위해 Network 7계층의 Application Load Balancer 사용 | ||
| • AutoScaling 연결로 인한 확장성 증가 | ||
| • 트래픽을 분산 시키므로, 시스템 가용성 증가 | ||
|
|
||
| #### `Certificate Manager` | ||
| • SSL 인증서 발급 받기 위해 사용 | ||
| • Load Balancer에 연동하여 HTTPS 프로토콜 적용 | ||
|
|
||
| #### `Global DNS` | ||
| • Load Balancer 및 Front 배포 서버에 Domain 이름을 적용시키기 위해 사용 | ||
| • DNSSEC을 적용하여 보안강화하기 위해 사용 | ||
|
|
||
| #### `Auto Scaling` | ||
| • 트래픽의 변화에 서버를 탄력적으로 관리 가능 | ||
| • 서버 scale-out 및 scale-in 자동화 | ||
| • Launch Configuration을 서버 환경설정 간소화 | ||
| • Load Balancer 연동을 통한 효과적인 트래픽 분산 | ||
|
|
||
| #### `VPC` | ||
| • 클라우드 환경에서 사설 네트워크망을 구축해 안정성 확보 | ||
| • ACG 및 Network ACL 이중 방화벽을 통한 보안 강화 | ||
| • 공인 IP 발급을 줄여, 비용 감소 | ||
| • 내부에 Subnet을 나눠 효율적인 인프라 공간 분리 | ||
| • Public Subnet엔 Load Balancer, Private Subnet에 서버 및 DB를 구축함으로써, 외부 침입 방어 | ||
|
|
||
| #### `Nat GateWay` | ||
| • VPC 내부 Private Subnet의 서버가 하나의 공인 IP를 활용하여 외부 인터넷과 통신할 수 있도록 하는 Gateway | ||
| • 스프링 서버내에서 발생하는 API 호출할 때 필요 | ||
| • 외부에선 트래픽이 들어올 수 없어 보안 강화 | ||
|
|
||
| #### `Object Storage` | ||
| • 사용자 피드의 사진 및 파일이 저장되는 저장소 | ||
| • AWS S3와 연동되어 높은 호환성 | ||
| • 고가용성으로 인한 시스템 안정성 확보 | ||
|
|
||
| #### `FireBase` | ||
| • 사용자에게 실시간 알림을 보내기 위한 기술 | ||
| • FCM을 통해 사용자에게 푸시 메세지 전송가능 | ||
|
|
||
| #### `MySQL` | ||
| • 서버와 연결되는 메인 DB | ||
|
|
||
| <br><br> | ||
|
|
||
| ### 🚀 CI/CD | ||
|
|
||
| #### `GitHub Action` | ||
| • Github와 연동해 CI-CD 파이프라인 구축 | ||
| • main -> 실서버 배포 CI-CD | ||
| • develop -> 테스트서버 배포 CI-CD | ||
| • 그 외 -> Commit & PR시, 자동 빌드 및 테스트 진행 | ||
|
|
||
| #### `Object Storage` | ||
| • CI 진행 후, Jar 파일을 압축시켜 Object Storage에 저장 | ||
| • 파일을 버전별로 나눌 수 있어, 쉽게 Rollback 가능 | ||
| • AWS S3 CLI와 연동되어, 간편하게 파일 저장 가능 | ||
|
|
||
| #### `Source Deploy` | ||
| • Object Storage의 파일을 기반으로 AutoScaling CD 진행 | ||
| • 배포 스크립트를 통해 Spring 서버 실행 | ||
| • Auto Scaling Group별로 블루/그린 무중단 배포 | ||
| • GitHub Action에서 naver signiture v2 방식으로 API 호출가능 | ||
|
|
||
| #### `Naver Agent` | ||
| • Source Deploy를 적용하기 위해 꼭 필요한 프로그램 | ||
| • Server에 자동 스크립트를 적용하여 자동 설치 | ||
|
|
||
| <br><br> | ||
|
|
||
| ## 🔖 Naming Rules | ||
|
|
||
| ### 🖥️ Frontend | ||
| - **Folder**: `kebab-case` | ||
| - **File**: `PascalCase` | ||
| - **Component**: `PascalCase` | ||
| - **Constant**: `SNAKE_CASE` | ||
| - **Variable**: `camelCase` | ||
| - **State(atom, recoil)**: `camelCaseState` | ||
| - **Interface** | ||
| - **props**: `PascalCaseProps` | ||
| - **api response**: `PascalCaseProps` | ||
|
|
||
| ### 🖥️ Backend | ||
| - **Package** : `lowercase` | ||
| - **Class** : `PascalCase` | ||
| - **Constant** : `UPPERCASE` | ||
| - **Method** : `camelCase` | ||
| - **Variables** : `camelCase` | ||
|
|
||
| <br><br> | ||
|
|
||
| ## **🗂️ Commit Convention** | ||
|
|
||
|
|
||
| ### 🖥️ Frontend | ||
| > "[커밋유형] 작업 내용” | ||
| > <br> | ||
| > EX) [feat] 카카오 로그인 기능 추가 | ||
| #### **📌 Type** | ||
|
|
||
| | Tag | 뜻 | | ||
| | --- | --- | | ||
| | feat | 새로운 기능 추가 | | ||
| | fix | 버그 수정 | | ||
| | docs | 문서 수정 | | ||
| | style | 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우 | | ||
| | refactor | 코드 리팩토링 | | ||
| | test | 테스트 코드, 리팩토링 테스트 코드 추가 | | ||
| | chore | 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore | | ||
| | design | CSS 등 사용자 UI 디자인 변경 | | ||
| | comment | 필요한 주석 추가 및 변경 | | ||
| | rename | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 | | ||
| | remove | 파일을 삭제하는 작업만 수행한 경우 | | ||
| | !HOTFIX | 급하게 치명적인 버그를 고쳐야 하는 경우 | | ||
| | init | 프로젝트 생성 후 첫 커밋 | | ||
|
|
||
| <br> | ||
|
|
||
| ### 🖥️ Backend | ||
| > 커밋유형:커밋 메세지 #(이슈번호) | ||
| > <br> | ||
| > EX) Feat: 카카오페이 결제 기능 개발 (#13) | ||
| #### **📌 Type** | ||
| | Tag | 뜻 | | ||
| |-----------|-----------------| | ||
| | Feat | 새로운 기능 추가 | | ||
| | Fix | 버그 수정 및 기능 수정 | | ||
| | Docs | 문서 추가 및 수정 | | ||
| | Test | 테스트 코드 추가 및 수정 | | ||
| | Refactor | 코드 리팩토링 | | ||
| | Rename | 파일 및 폴더명 수정 | | ||
| | Remove | 파일 삭제 | | ||
| | Chore | 그 외 자잘한 수정 | | ||
|
|
||
| <br><br> | ||
|
|
||
| ## **🐬 Git Flow** | ||
|
|
||
|
|
||
| <img width="738" alt="gitflow" src="https://github.com/Team-baebae/29th_Semi_README/assets/113423517/69f432a8-3764-4cbe-9f62-81372ebe13d0"> | ||
|
|
||
| - **`main`** : 출시 가능한 프로덕션 코드의 브랜치 | ||
| - **`develop`** : 다음 버전을 개발하는 브랜치 | ||
| - **`feat`** : 이슈 단위로 기능을 개발하는 브랜치 | ||
| - 브랜치 네이밍 : `feat/#이슈번호` | ||
| - **`fix`** : 이슈 단위로 버그를 수정하는 브랜치 | ||
| - 브랜치 네이밍: `fix/#이슈번호` | ||
| <br><br> | ||
|
|
||
|
|
||
| ## **`work flow`** | ||
|
|
||
| 백엔드의 경우 CI-CD를 통해 개발 부터 배포까지 자동화를 진행하였으며, 워크플로우는 다음과 같습니다. | ||
|
|
||
| #### `main, develop 브랜치` | ||
|
|
||
| Github Action으로 구현을 하였으며, 깃허브 상에 코드가 push되거나, merge되었을 때, 빌드 및 테스트가 진행이 됩니다. 이 과정이 성공적으로 종료되면 빌드파일을 Object Storage에 저장을 합니다. 이후, Naver Signiture V2 방식을 통해 api 요청으로 Source Deploy에 트리거를 걸어 자동으로 Autoscaling 블루/그린 무중단 배포를 진행합니다. | ||
|
|
||
| #### `그 외 브랜치` | ||
|
|
||
| 기능개발을하는 feature 브랜치나, 오류 해결하는 fix 브랜치의 경우, 배포가 필요하지않습니다. 따라서, 깃허브 상에 코드가 push된 경우, 자동 빌드 및 테스트가 진행이 되며, 이 과정의 성공유무를 통해 코드가 정상적인지 판단합니다. |