[Vue.js 프로젝트 투입 일주일 전] 14장 - 미니프로젝트: 제품 판매 웹앱 구현 (마지막)

14.1 애플리케이션 Overview

  - 제품 등록 페이지

  - 제품 리스트 페이지

  - 제품 상세 페이지

14.2 프로젝트 소프트웨어 구성

  - 클라이언트: Vue.js, Bootstrap

  - 서버: Node.js, Express.js

  - 데이터베이스: MariaDB

14.3 클라이언트(Vue 프로젝트)

  - Vue CLI로 프로젝트 생성

    - vue create 명령어

  - Bootstrap 추가하기

    - index.html

      - css, js 파일에 대한 cdn 주소 추가

  - 화면 레이아웃 만들기: Header, Main, Footer

    - Header: 애플리케이션 로고, 메뉴에 해당하는 네비게이션 등 위치

    - Main

    - Footer: 애플리케이션을 제공하는 회사 정보

  - 라우터 구성

    - / (ProductList.vue)

    - /detail (ProductDetail.vue)

    - /create (ProductCreate.vue)

    - /update (ProductUpdate.vue)

    - /sales (SalesList.vue)

    - /image_insert (ImageInsert.vue)

  - Store.js

    - vuex

    - vuex-persistedstate

  - Mixins.js

    - main.js에 전역으로 등록해서 사용

      - 서버와 데이터 통신을 위한 $api 메소드

      - 제품 이미지를 서버로 업로드 하기 위해 이미지 파일을 base64 string으로 변환하기 위한 $base64 메소드

      - 제품 가격의 금액 표기를 위한 $currencyFormat 메소드

  - main.js

  - 카카오 계정으로 로그인하기

  - Proxy 서버 구성

    - 클라이언트, 서버 포트 다름 => CORS 문제 해결 위한 임시 방편

  - 제품 리스트 컴포넌트 만들기

    - ProductList.vue

  - 제품 상세 컴포넌트 만들기

    - ProductDetail.vue

  - 제품 관리 컴포넌트 만들기

    - SalesList.vue

  - 제품 등록 컴포넌트 만들기

    - ProductCreate.vue

  - 제품 사진 등록 컴포넌트 만들기

    - ImageInsert.vue

14.4 서버(Node.js + Express.js)

  - app.js (express 모듈을 이용하여 구현된 웹 서버)

    - express: Node.js 기반으로 웹 서버를 구동할 수 있게 해주는 플러그인

    - express-session: 세션 관리를 위해 사용하는 플러그인

    - mysql: 데이터베이스 연결을 위해 사용하는 플러그인 (MySQL/MariaDB)

  - sql.js (데이터베이스 처리를 위한 SQL문 작성)

14.5 데이터베이스 구성

  - MariaDB/MySQL 이용

---

[Source Code] Ch 14. 미니프로젝트: 제품 판매 웹앱 구현