이순명

💆 테라피

📋 프로젝트 개요


프로젝트 설명	강사와 고객 간의 예약 매칭 키오스크 프로그램
기술 스택	Vue3, Express
참여도	프론트엔드 100%, 백엔드 100%
기간	2022.12 ~ 2023.03

⭐ 주요 기능

📅 강사 연동 예약 시스템

강사 선택 시 예약 가능 시간 자동 체크
불가능한 시간대 비활성화 처리
dayjs를 이용한 예약시간 체크 기능 모듈화

📡 웹소켓 실시간 통신

키오스크 → 관리자 직원 호출 기능
결제 알림 실시간 전송
app.config.globalProperties에 웹소켓 객체 형성하여 전역 사용

✍️ 회원가입 시스템

가상 키보드 구현 (테이블 형태, event 객체 활용)
Vue3Signature 활용 서명패드 구현
서명 이미지 캡처 후 서버 저장

💬 Dialog 재사용 컴포넌트

<Dialog 
  :status="dialogError" 
  :onClose="dialogErrorClose" 
  :errorMessage="'주문한 상품이 취소됩니다. 돌아가시겠습니까?'"
>
  <template #footer>
    <!-- 커스텀 푸터 -->
  </template>
</Dialog>

🛠 기술적 구현

dayjs 예약시간 체크 모듈화

/**
 * currentDate가 A와 B 사이에 있을 경우 true (값이 아예 같음 체크)
 * @param currentDate
 * @param compareStart 시작
 * @param compareEnd 끝
 */

jsDoc을 적절히 활용하여 모듈화
자주 사용하는 기능 유틸로 분리

MVC 패턴 백엔드 구성

backend/
├── bin/
├── controllers/    # 미들웨어, 권한 등 비즈니스 로직
├── middleware/
├── models/         # DB 데이터 가져오는 부분
├── public/
├── routes/         # 기본적인 요청을 받는 곳
├── utils/
├── app.js
└── config.js

웹소켓 전역 설정

// app.config.globalProperties에 웹소켓 객체 형성
// 어느 컴포넌트에서든 서버와 소통 가능

🔧 트러블슈팅

전역 상태관리 초기화 이슈

문제: 장바구니, 예약된 리스트 등 전역 상태 초기화가 이뤄지지 않음
해결:
- 두 뎁스 이상 넘어가는 것만 전역으로 관리
- 뎁스를 줄여 전역 상태에 대한 상태를 별도 관리
- 초기화에 대한 인지 강화

강사-시간 선택 복잡도

문제: 강사 선택 시 시간 체크, 시간 선택 시 강사 선택에 대한 기능 복잡도 증가
해결:
- 겹치는 부분은 명확한 의미 전달을 위해 함수화
- 추출 및 분리 작업 리팩토링
- 약 80줄 감소, 가독성 증가

💡 성과

예약 시스템 전체 개발: 프론트/백엔드 100% 참여
웹소켓 실시간 통신: 직원호출, 결제알림 구현
재사용 컴포넌트: Dialog, 예약시간 체크 모듈화
코드 리팩토링: 80줄 감소 및 가독성 향상

← 메인으로 돌아가기