- 사물함 대여 서비스: 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를 구현해서 검증 및 반복 작업의 자동화로 개발의 편의성 |
🍑 eunbikim | 🥔 gyuwlee | 👻 hybae | 🍒 hyoon | 🍏 hyospark |
---|
🧑 |
🐶 jiwchoi | 🐯 joopark | 🐻 seuan | 😺 sichoi |
---|
🍎 skim | 🍪 spark | 🪀 yoyoo | 🎒 yubchoi |
---|