View Code? Open in Web Editor
NEW
This project forked from innovationacademy-kr/cabi
사물함 관리 서비스
License: MIT License
Shell 0.50%
JavaScript 0.75%
TypeScript 91.39%
CSS 5.55%
HTML 0.63%
Handlebars 1.01%
Dockerfile 0.17%
42cabi's Introduction
- 사물함 대여 서비스: 42서울 클러스터의 캐비닛 약 300여개를 편리하게 대여 및 반납할 수 있는 서비스
- 1,000명 이상의 카뎃들이 사용하는 플랫폼: 모든 카뎃들이 캐비닛 사용 현황을 언제든 간편하게 확인할 수 있는 플랫폼
- 관리자 플랫폼: 캐비닛 대여 현황 및 상태를 도식화하여 한눈에 확인 및 변경 가능한 플랫폼
- 클러스터 별 사물함 배치도를 바탕으로 실제 위치에 따른 사물함 대여 현황을 확인할 수 있습니다.
- 클러스터에 방문할 필요 없이 간편하게 사물함 대여 및 반납이 가능합니다.
- 사물함 별로
READ / UPDATE 가능한 개인 메모장을 제공합니다.
- 공유사물함 기능을 도입해 최대 3명의 사용자가 한 개의 사물함을 공유할 수 있습니다.
- 1,000명 이상의 카뎃들에게 더 양질의 서비스를 제공하기 위해 42Cabi 팀은 아래와 같이 고민했습니다:
- 사용자가 층별로 캐비넷 정보를 조회할 때 빠른 응답속도를 위해 쿼리 최적화로 성능을 향상시켰습니다.
- 공유 사물함 서비스를 구현하며 캐비넷 대여/반납에서 발생할 수 있는 케이스가 많아 캐비넷 상태에 따라 처리되는 DFA 알고리즘을 적용했습니다.
- 동시에 들어오는 요청에 대해 특정 요청이 실패할 경우 무결성을 위해 대여/반납의 과정을 트랜잭션으로 관리하였으며 격리 수준 구별로 데드락을 방지하였습니다.
- 블랙홀에 빠진 유저(퇴학 처리된 유저)를 적절하게 처리하도록 42 API를 사용하였고 블랙홀 스케줄링 구조를 고안했습니다.
- 기존 버전에서 Express.js로 작성된 코드를 백앤드 기술에서 많이 사용하는 IoC, DI, AOP가 적용되어 유지보수에 유리한 Nest.js로 포팅했습니다.
- 불필요한 정보를 저장하는 컬럼을 제거하는 등 DB 구조를 개선하였습니다.
- 다양한 환경에서도 이용에 불편함이 없도록 반응형 웹 디자인을 적용했습니다.
- 사용자들이 쉽게 사물함을 찾을 수 있도록 평면도에 구역을 표시한 페이지를 포함한 캐러셀을 구현했습니다.
- 사용자들이 서비스를 이용하면서 현재 상태를 쉽게 알 수 있도록 로딩이나 에러 발생 등 상황에 맞는 정보를 줄 수 있도록 처리했습니다.
- 쉽게 변할 수 있는 정책이나 UI/UX를 빠르게 반영할 수 있도록 하드코딩을 최대한 피하고 props와 환경변수를 이용했습니다.
- 신규 팀원이 들어와도 지속적으로 유지/보수와 기능 추가가 용이하도록 코딩 컨벤션을 정하고 문서화 작업 및 이슈 관리를 진행했습니다.
| 분야 |
기술스택 |
선정이유 |
|---|
| Common |
TypeScript |
컴파일 타임에 에러를 검출하여 서비스 과정에서 발생할 수 있는 오류를 최소화 |
| ESLint |
코딩 컨벤션에 위배되거나 안티 패턴을 미리 검출하여 에러 발생 요소를 |
| Prettier |
기본적인 코딩룰 적용으로 가독성 향상 |
| Front-End |
React |
컴포넌트 기반의 UI 구현으로 재사용성을 높이고 상태 관리를 통한 성능 최적화 |
| Redux |
API 요청 최소화 및 컴포넌트간 공유하는 상태를 효율적으로 관리하여 리렌더링 최적화 |
| styled-components |
CSS in JS를 통해 컴포넌트와 스타일 간의 의존성을 제거하여 컴포넌트 단위의 재사용성 향상 |
| Vite |
esbuild를 통한 빠른 번들링과 HMR을 통한 생산성 향상 |
| material-UI |
안드로이드 시스템에서 검증된 신뢰성과 리액트와의 호환성을 바탕으로 생산성 향상 |
| Storybook |
공통 UI 컴포넌트 제작 시 컴포넌트를 독립적으로 만들고, 테스트하는 과정을 통한 생산성 향상 |
| Back-End |
NestJS |
백엔드에 필요한 기술들인 Ioc, DI, AOP 등이 적용되어 있고, Express.js 프레임워크 대비 낮은 자유도로 협업에 적합 |
| MariaDB |
많이 사용되는 만큼 래퍼런스를 찾기 쉽고, 개발 과정에서 생기는 문제에 대한 해결책을 찾기 용이 |
| TypeORM |
SQL raw query로 작성하는 것보다 유지 보수 측면에서 유리하고, 추후 다른 DBMS로 쉽게 전환 가능 |
| Swagger |
프론트엔드 팀원들과 HTTP API 소통을 하기 위해 사용 |
| Passport |
OAuth2 적용을 위해 사용 |
| Infra |
nginx |
로컬 개발 모드에서 리버스 프록시를 이용하여 개발의 편의성을 높이기 위해 사용 |
| PM2 |
프로젝트 배포 시 node 데몬을 관리할 때 사용 |
| Docker-compose |
로컬 개발 시 동일한 환경에서 쉽게 세팅하기 위해 사용하였으며, MariaDB와 Nginx를 구동할 때 사용 |
| Github Actions |
CI/CD를 구현해서 검증 및 반복 작업의 자동화로 개발의 편의성 |
42cabi's People
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent