프로젝트 소개

# 프로젝트 개요 이 프로젝트는 vue2 + vuex로 작성된 대형 단일 페이지 애플리케이션(SPA) 예제입니다. Ele.me(饿了么) 배달 시나리오를 소재로 삼았으며, README에 따르면 작성자가 여가 시간을 활용해 처음부터 레이아웃을 잡고 완성하기까지 약 2개월 이상이 소요되었습니다. 프로젝트의 지향점은 단순한 데모가 아니라 기능이 완전하고 로직이 복잡한 실전 연습에 가깝습니다. 작성자는 이 프로젝트가 Imooc(慕课网)의 Ele.me 강의 프로젝트와 무관하며, 순수한 개인 연습용 프로젝트이므로 정상적인 주문은 공식 클라이언트를 사용해야 한다고 명시했습니다. # 기술 스택 vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg. README에서는 다량의 ES6/7 신기술이 포함되어 있어 Node.js 6.0 이상 버전이 필요하다고 안내하고 있습니다. # 프로젝트 실행 ``` git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install 또는 yarn(추천) npm run dev ``` # API 데이터 및 연동 프로젝트 모든 API 데이터는 연동된 백엔드 시스템인 node-elm에서 제공됩니다. 프론트엔드와 백엔드를 동시에 개발하는 경험을 해보고 싶다면 백엔드 시스템을 다운로드할 수 있으며, 이때 실행 명령어는 `npm run dev`가 아닌 `npm run local`입니다. 또한 element-ui 기반으로 구축된 백엔드 관리자 페이지인 vue2-manage도 제공됩니다. 프론트엔드 개발만 진행할 경우 이는 무시해도 됩니다. README에서는 미리보기 주소와 API 호출 시 https를 사용해야 한다고 언급하고 있습니다. # 구현된 기능 - 위치 확인 기능 - 도시 선택 - 주소 검색 - 선택한 주소 주변의 상점 목록 표시 - 음식 및 음식점 검색 - 거리, 판매량, 평점, 대표 메뉴, 배달 방식 등에 따른 정렬 및 필터링 - 음식점 메뉴 목록 페이지 - 장바구니 기능 - 상점 리뷰 페이지 - 개별 음식 상세 페이지 - 상점 상세 페이지 - 로그인, 회원가입 - 비밀번호 변경 - 마이페이지 - SMS 및 음성 인증번호 발송 - 주문 기능 - 주문 목록 - 주문 상세 정보 - 앱 다운로드 - 배송지 주소 추가, 삭제, 수정 - 계정 정보 - 고객 센터 - 홍바오(쿠폰) - 프로필 이미지 업로드 미구현 기능: 결제 (README에는 "도저히 할 수 없습니다(臣妾做不到啊)"라고 표시되어 있음). # 프로젝트 구조 소스 코드는 src 디렉터리에 위치하며, components(common, footer, header 공통 컴포넌트: 팝업창, 장바구니, 카운트다운, 로딩 애니메이션, 평점 별점, 음식점 목록, 하단 및 상단 컴포넌트 등), config(env.js 환경 전환, fetch.js 데이터 요청, mUtils.js 자주 쓰는 유틸리티 함수, rem.js 단위 변환), images, page(비즈니스 로직별로 구분된 페이지 디렉터리: balance, benefit, city, confirmOrder, download, find, food, forget, home, login, msite, order, points, profile, search, service, shop, vipcard), plugins, router, service(getData.js API 통합 관리, tempdata 임시 데이터), store(vuex의 action, getters, index, modules, mutation-types, mutations) 및 style(common.scss, mixin.scss, swiper.min.css)을 포함합니다. 루트 디렉터리에는 build(webpack 설정), config(빌드 경로), elm(배포용 파일), screenshots(스크린샷), App.vue, main.js, index.html 등이 있습니다. README 기준 총 56개 디렉터리, 203개 파일로 집계되었습니다. # 작성자 소회 및 향후 목표 README에서는 결제(money)와 관련된 웹 페이지 로직이 비교적 복잡하고, 상점과 음식 종류가 많으며 페이지 상호작용이 복잡하여 장바구니와 주문 기능을 작성할 때 데이터와 로직 처리에 꽤 애를 먹었다고 언급했습니다. 또한 디자인 시안이나 API 명세서가 없어 단계별로 직접 탐색하며 개발해야 했습니다. 작성자는 복잡한 상호작용 로직을 처리할 때 vuex가 필수적이며, vue + vuex 조합으로 대형 단일 페이지 프로젝트를 충분히 구현할 수 있다고 생각합니다. 향후 목표로는 Node.js를 이용한 배달 플랫폼 모의 백엔드 시스템 구축, Android 및 iOS를 아우르는 크로스 플랫폼 네이티브 앱 버전 개발이 있으며, 시간이 허락한다면 판매자용 버전도 출시할 계획이라고 밝혔습니다. # 데모 및 라이선스 README에는 온라인 데모 주소(Chrome 모바일 모드로 미리보기 권장)와 모바일용 QR 코드가 제공되며, 상점 목록 페이지, 상점 필터 페이지, 음식점 메뉴 목록 및 장바구니, 주문 확인 페이지, 검색 페이지, 로그인 페이지, 마이페이지 등의 스크린샷이 첨부되어 있습니다. 프로젝트 관련 소통은 Gitter 그룹이나 Issues/PR을 통해 참여할 수 있습니다. 라이선스는 GPL입니다.