Express Bus (MERN Stack Online Bus Ticket Booking App)

Tip

MERN Stack Online Bus Ticket Booking App은 MERN 스택(몽고DB, 익스프레스, 리액트, 노드.js)을 기반으로 한 온라인 버스 예매 시스템입니다. 이 앱은 사용자가 버스 예매를 손쉽게 할 수 있도록 지원하며, 관리자는 시스템을 통해 예약을 관리할 수 있습니다.

주요 기능

📝 사용자 등록 및 로그인 (User Registration & Login)

• 사용자는 이메일과 비밀번호를 사용해 계정을 생성하고 로그인할 수 있습니다.
• JWT(JSON Web Token)를 활용한 인증 시스템을 사용하여 보안을 강화합니다.

🚌 버스 검색 및 예약 (Bus Search & Booking)

• 사용자는 출발지, 도착지, 날짜를 선택하여 버스를 검색할 수 있습니다.
• 예약 가능한 버스를 조회하고, 원하는 버스를 선택하여 예매할 수 있습니다.
• 예약 확인 및 예약 내역을 볼 수 있습니다.

📋 예약 관리 (Booking Management)

• 사용자는 자신이 예약한 티켓을 확인하고, 예약을 취소하거나 수정할 수 있습니다.
• 예약 상태를 "확인됨", "취소됨" 등으로 업데이트할 수 있습니다.

💳 결제 시스템 (Payment System)

• Strype.JS 온라인 결제 시스템을 연동하여, 사용자가 버스 예매 시 결제를 진행할 수 있습니다.
• 결제 정보는 안전하게 처리되며, 결제 후 예약이 완료됩니다.

📊 관리자 대시보드 (Admin Dashboard)

• 관리자는 버스 노선, 시간표, 좌석 정보를 관리할 수 있습니다.
• 관리자는 예약 내역을 조회하고, 고객 요청을 처리할 수 있습니다.

🔑 관리자 및 사용자 권한 관리 (Admin & User Roles)

• 관리자와 일반 사용자에 따라 다른 권한을 부여하여 시스템을 관리합니다.

주요 기술 스택

• 프론트엔드: React, React-Router-DOM, React-Redux/Toolkit, Hot Toast, Antd Design, Axios, Proxy 등
• 백언드: Node.js, Express.js, Bycript.js, Stripe.js,JsonWebToken,MongoDb,NodeMailer,UUID 등

프론트엔드 기술 구현 목록

Note

🛠 Redux Toolkit으로 상태 관리:

• Redux Toolkit을 사용하여 전역 상태를 관리하고, 복잡한 상태 로직을 효율적으로 처리할 수 있도록 설계했습니다.

🔄 React Router로 라우팅 구현:

• React Router를 활용해 단일 페이지 애플리케이션(SPA)에서 뷰 전환 및 URL 변경을 매끄럽게 처리했습니다.

💳 Stripe 결제 기능 통합:

• React Stripe Checkout을 구현해 사용자가 앱 내에서 Stripe를 통해 안전하게 결제를 처리할 수 있도록 설정했습니다.

📦 Ant Design으로 컴포넌트 스타일링:

• Ant Design UI 컴포넌트를 활용해 일관성 있고 반응형인 디자인을 적용하고, 버튼, 폼, 테이블 같은 사전 제작된 컴포넌트를 사용해 개발 속도를 높였습니다.

📡 Axios로 HTTP 요청 처리:

• Axios를 사용해 외부 API와 통신하며 비동기 데이터 요청을 처리하고 부드러운 사용자 경험을 제공합니다.

📅 Moment.js로 날짜 처리:

• Moment.js를 통합하여 날짜 및 시간 데이터를 효율적으로 처리하고, 앱에서 날짜를 표시하고 포맷할 수 있도록 구현했습니다.

📄 React-to-Print으로 인쇄 기능 제공:

• React-to-Print를 통해 사용자들이 특정 화면 섹션을 UI에서 직접 인쇄할 수 있는 기능을 구현했습니다.

🔔 React Hot Toast로 알림 추가:

• React Hot Toast를 사용하여 사용자에게 폼 제출, 오류, 성공 메시지와 같은 중요한 이벤트를 알려주는 알림 기능을 추가했습니다.

📦 기존 Redux 통합:

• Redux Toolkit과 함께 Redux를 통합하여 기존 상태 관리 방식과의 호환성을 유지하고, 복잡한 액션을 효율적으로 처리했습니다.

📊 Web Vitals로 성능 모니터링:

• Web Vitals를 포함하여 중요한 성능 지표를 추적하고, 사용자에게 빠르고 부드러운 경험을 제공하기 위한 성능을 모니터링했습니다.

백언드 기술 구현 목록

Note

• 🌐 Express.js로 서버 구축: Express.js를 사용하여 HTTP 요청을 효율적으로 처리하고 애플리케이션 API 엔드포인트를 정의했습니다.
• 🔐 인증 및 권한 관리:
  • **JSON Web Token (JWT)**를 사용하여 인증을 구현하고, 사용자 세션을 안전하게 관리하며 보호된 라우트를 보호합니다.
  • bcrypt.js를 사용하여 비밀번호를 해싱하고 안전하게 저장하여 계정 보안을 강화했습니다.
• 🛢 Mongoose로 데이터베이스 관리: Mongoose를 사용하여 스키마를 정의하고 MongoDB 데이터베이스와 상호작용하여 안정적이고 유연한 데이터 관리를 제공합니다.
• 💳 Stripe를 통한 결제 처리: stripe와 @stripe/stripe-js 패키지를 사용하여 안전한 결제 처리를 구현하고 거래를 관리합니다.
• 📧 Nodemailer로 이메일 알림: Nodemailer를 구성하여 계정 확인, 비밀번호 재설정, 결제 확인과 같은 트랜잭션 이메일을 사용자에게 보냅니다.
• ⚙️ 환경 설정 관리: dotenv를 사용하여 API 키 및 데이터베이스 URL과 같은 민감한 설정 값을 안전하게 관리합니다.
• 🔄 개발 워크플로우 자동화: Nodemon을 통합하여 개발 중에 서버를 자동으로 재시작하도록 설정해 효율성을 높였습니다.
• 🔑 고유 식별자 생성: uuid를 사용하여 사용자 세션, 주문, 데이터베이스 항목과 같은 레코드에 신뢰할 수 있는 고유 식별자를 생성합니다.

프로젝트를 통해 얻을 수 있는 성과와 배운 점들:

1.풀스택 개발 경험 🚀

• 프론트엔드: React와 Redux를 사용하여 사용자 인터페이스를 구축하고, 동적인 웹 애플리케이션을 만들면서 컴포넌트 기반 설계 및 상태 관리에 대한 깊은 이해를 얻을 수 있었습니다.
• 백엔드: Node.js와 Express.js를 사용하여 RESTful API를 개발하고, 데이터베이스와의 통신 및 서버 사이드 로직을 처리하면서 서버 측 CRUD Application 기술에 대한 이해를 높일 수 있었습니다.
• 데이터베이스: MongoDB를 사용하여 비정형 데이터를 처리하고, 데이터베이스와 스키마 설계 및 쿼리 최적화 기술을 배울 수 있었습니다.

2.사용자 인증 및 권한 관리 🔐

• Authentication (인증): 사용자 로그인 및 회원가입 기능을 구현하면서 JWT (JSON Web Tokens) 인증 시스템을 사용하여 사용자 인증 방식을 구현했습니다. 이를 통해 사용자가 자신임을 증명하고 시스템에 접근할 수 있도록 보장하는 방법을 경험해 봤습니다. 예: 로그인 후 JWT를 사용해 사용자 인증을 처리하고, 클라이언트에서 토큰을 통해 서버에 인증된 요청을 보냄.
• Authorization (인가): 인증된 사용자에게 권한을 부여하는 과정인 Authorization을 구현하면서 사용자가 어떤 자원에 접근할 수 있는지 결정하는 방법을 배워 봤습니다.예: 관리자만 접근할 수 있는 페이지나 기능을 제한하거나, 예약된 티켓을 사용자만 수정할 수 있도록 하는 권한 부여 시스템 구현.
• 사용자 로그인 및 회원가입 기능을 구현하면서 JWT (JSON Web Tokens) 기반 인증 및 권한 관리 방법을 배울 수 있습니다. 이를 통해 보안 측면에서 중요한 개념들을 알게 되고 경험을 쌓을 수 있었습니다.
• Role-Based Access Control (RBAC): 역할 기반 접근 제어(RBAC)를 구현하여 사용자별로 다르게 적용되는 권한 관리 시스템을 설계할 수 있습니다. 예를 들어, 관리자는 모든 티켓을 보고 수정할 수 있는 권한을 가지고, 일반 사용자는 자신의 예약 내역만 볼 수 있도록 제한할 수 있습니다.

3. 결제 시스템 통합 💳

• Stripe이라는 시스템을 통합하여 온라인 결제 과정과 그에 관련된 보안 및 데이터 처리 방법을 배워 봤습니다. 실제 결제 흐름을 경험하면서 결제 API 통합 및 보안 관리를 익혀 봤습니다.

4.API 설계 및 RESTful 아키텍처 🌐

• RESTful API 설계 원칙을 기반으로 서버와 클라이언트 간의 데이터 흐름을 설계하고, HTTP 메소드 (GET, POST, PUT, DELETE 등) 및 상태 코드를 이해하며 API 개발을 실습해 봤습니다.

5.디자인 및 UI/UX 🎨

• Ant Design UI 라이브러리를 사용하여 사용자 친화적인 인터페이스를 구축하면서 UI/UX 디자인에 대한 감각을 키울 수 있었습니다. 프로젝트를 통해 실제 사용자 경험을 고려한 디자인을 구현하고 이를 개선하는 방법을 배웠습니다.

이 프로젝트를 통해 인증과 인가와 관련된 중요한 보안 기술을 실습하고, 웹 애플리케이션의 안전성을 보장하는 방법을 배우게 되었습니다. 이를 통해 실무에서 필요한 보안 인프라와 사용자 관리에 대한 깊은 이해를 쌓을 수 있었습니다.

Problems & Challanges

Error & Problem Title	Status	Difficult	Date
🎨 TailwindCSS Conflicts		low	Oct 3, 2024

앞으로 추가로 해야 할 기능들 정리 ✨

• ⏰ 알림 기능 (Notification System)

  • 예약이 완료되거나 예약 상태가 변경되면 사용자에게 알림을 전송합니다.
  • 결제 실패, 예약 취소 등의 상황에 대한 알림도 제공합니다.

• 🎁 모바일 대응 (Mobile Responsiveness)

  • 사용자가 모바일에서도 쉽게 접근하고 예약을 진행할 수 있도록 반응형 디자인을 적용했습니다.

• ✨ 다국어 지원 (Multilingual Support)

  • 다양한 언어로 서비스를 제공할 수 있어 다국적 사용자가 쉽게 접근할 수 있습니다.

• 예약 내역 확인 (Booking History)

  • 사용자는 과거 예약 내역을 확인할 수 있습니다.
  • 예약 내역에는 출발 시간, 도착 시간, 좌석 정보, 결제 정보 등이 포함됩니다.