목차
💬 프로젝트 소개
웹사이트
프로젝트 목표
- 캐비닛 대여 서비스: 42서울의 캐비닛 400여 개를 편리하게 대여 및 반납할 수 있는 서비스
- 효율적이고 원활한 서비스: 제한된 자원으로 많은 사용자가 원활하게 사용할 수 있는 서비스
- 관리자 플랫폼: 캐비닛 대여 현황 및 상태를 도식화하여 관리자의 작업이 수월한 플랫폼
프로젝트 내용
- 클러스터 별 캐비닛 배치도를 바탕으로 실제 위치에 따른 캐비닛 대여 현황을 확인할 수 있습니다.
- 클러스터에 방문할 필요 없이 간편하게 캐비닛 대여 및 반납이 가능합니다.
- 캐비닛마다
READ/UPDATE가능한 메모장을 제공합니다.- 공유 캐비닛의 경우, 캐비닛 사용자들끼리만 공유 가능한 메모장을 제공합니다.
기술적 도전
- 지속할 수 있고, 확장할 수 있는 서비스를 지향하고, 한정된 자원으로 증가하는 사용자들에게 양질의 서비스를 제공하기 위해 42Cabi 팀은 다음과 같이 노력했습니다:
Common
- 유지/보수와 기능 추가가 용이하도록 코딩 컨벤션을 정하고, 문서화 작업 및 이슈 관리를 체계화했습니다.
- Notion, Slack 등의 협업 툴들을 이용하여 팀원 간 정보 시차와 격차를 줄였습니다.
- 주기적이지만 유동적인 회의를 통해 목표와 분업을 명확히 하여 효과적인 협업을 진행했습니다.
- 시설관리팀과 실사용자들과 끊임없이 소통하면서 사용자 친화적인 서비스를 제공했습니다.
FrontEnd
- 웹, 모바일 환경에서도 이용에 불편함이 없도록 반응형 웹 디자인을 적용했습니다.
- 사용자가 쉽게 캐비닛을 찾을 수 있도록 실제 사용 공간에 따른 맵을 표시했습니다.
- 원활한 사용자 경험을 위해 페이지를 포함한 캐러셀을 구현했습니다.
- 사용자가 서비스 상태를 명확하게 인지할 수 있도록 로딩과 에러 코드에 따른 렌더링을 구현했습니다.
- 정책이나 UI/UX 등 빠르게 변화하는 환경을 원활히 반영할 수 있도록 하드코딩을 피하고 props와 환경변수를 이용해 유지보수성을 높였습니다.
BackEnd
- 사용자가 층별로 캐비닛 정보를 조회할 때 빠른 응답속도를 위해 쿼리 최적화로 성능을 향상했습니다.
- 공유 캐비닛 서비스를 구현하며 캐비닛 대여/반납 시 발생할 수 있는 여러 경우를 원활하게 제어하기 위해 캐비닛 상태에 따라 처리하게끔 DFA 알고리즘을 적용했습니다.
- 동시에 들어오는 요청에 대해 특정 요청이 실패할 경우, 무결성을 위해 대여/반납의 과정을 트랜잭션으로 관리하였으며 격리 수준 구별로 데드락을 방지했습니다.
- 블랙홀에 빠진 사용자(퇴학 처리된 사용자)를 적절하게 처리하도록 42API를 사용하였고 블랙홀 스케줄링을 고안, 적용했습니다.
- 기존 버전에서 Express.js로 작성된 코드를 IoC, DI, AOP를 이용, 유지보수에 유리한 Nest.js로 포팅했습니다.
- 불필요한 정보를 저장하는 컬럼을 제거, 트랜잭션의 로직을 재구성하는 등 DB 구조를 개선했습니다.
🛠 기술 스택
| 분야 | 기술스택 | 선정이유 |
|---|---|---|
| Common |  TypeScript |
컴파일 타임에 에러를 검출하여 서비스 과정에서 발생할 수 있는 오류를 최소화했습니다. |
 ESLint |
코딩 컨벤션에 위배되거나 안티 패턴을 미리 검출하여 에러 발생 요소를 줄였습니다. | |
 Prettier |
기본적인 코딩룰 적용으로 가독성 향상 및 코드 양식을 통일했습니다. | |
| Front-End |  React |
컴포넌트 기반의 UI 구현으로 재사용성을 높이고 상태 관리를 통해 성능을 최적화했습니다. |
 Recoil |
API 요청 최소화 및 컴포넌트간 공유하는 상태를 효율적으로 관리하여 리렌더링을 최적화했습니다. | |
 styled-components |
CSS in JS를 통해 컴포넌트와 스타일 간의 의존성을 제거하여 컴포넌트 단위의 재사용성을 향상했습니다. | |
 Vite |
esbuild를 통한 빠른 번들링과 HMR을 통해 생산성을 향상했습니다. | |
| Back-End |  NestJS |
Express.js 대비 낮은 자유도로 협업에 적합한 프레임워크로 판단했고, IoC, DI, AOP를 통해 유지보수성을 높였습니다. |
 MariaDB |
활성화된 커뮤니티를 통해 여러 레퍼런스를 이용, 개발 중 발생하는 여러 문제들을 해결했습니다. | |
 TypeORM |
Raw query로 작성하는 것보다 용이하고 추후 다른 DBMS로 쉽게 전환 가능한 라이브러리로, 이를 이용해 유지보수성을 높였습니다. | |
 Swagger |
명확한 HTTP API 명세를 통해 프론트엔드/백엔드의 원활한 협업을 이뤘습니다. | |
 Passport |
OAuth2 인증 방식 적용에 용이한 라이브러리로, 서버 자체 토큰 및 42 인트라 인증에 사용했습니다. | |
| Infra |  nginx |
로컬 개발환경에서 리버스 프록시를 통한 프론트/백엔드 서버 라우팅으로 개발의 편의성을 높였습니다. |
 AWS |
비용효율적이고 신뢰도가 높은 웹서비스로 판단, EC2/RDS/S3/CloudFront 등의 솔루션들을 사용하여 신속하고 안정적인 서비스 환경을 구성했습니다. | |
 PM2 |
서버 앱 프로세스의 명확한 관리와 무중단 서비스에 사용했습니다. | |
 Docker |
컨테이너를 통해 통일된 로컬 개발환경을 설정하여 개발의 호환성을 높였습니다. | |
 Github Actions |
CI/CD를 통해 테스트, 배포를 자동화하여 무중단 서비스를 지원, 효율성과 효과성을 높였습니다. |
🧑💻 프로젝트 멤버
| 🐇dongglee | 🍑 eunbikim | 🥔 gyuwlee | 🐬huchoi | 👻 hybae |
|---|
| 🍒 hyoon | 🍏 hyospark | 🙉 inshin | 🧑 |
🐶 jiwchoi |
|---|
| 🐯 joopark | 🚀sanan | 🐻 seuan | 🤑seycho | 😺 sichoi |
|---|
| 🍎 skim | 🍪 spark | ✏️yooh | 🪀 yoyoo | 🎒 yubchoi |
|---|
| 🌑 daewoole | 🐝 hyungnoh | 원 jpark2 | 🎨 junsohn | 🤓 seong-hui | 🚀 wchae |
|---|
 |
|---|