Programmingnuxt

Nuxt와 Bootstrap4 기반의 Dashboard 만들기

Intro

, , , , ,

Nuxt.js

최근들어 공부하고 블로그 쓰고, 공부하고 블로그 쓰는 코드를 잘 안 쓰는 나날들이 계속되다 보니깐 손가락이 굳어가는 느낌과 살짝 지루하다는 생각이 들어서 공부한걸 써보면서 실습해보는 기회로 Nuxt 기반의 Bootstrap4를 사용한 Dashboard를 만들어보려고 합니다.

왜 Dashboard를 만드나?

일반 사이트가 아닌 Dashboard를 선택한 이유는 일반 사이트를 개발하는 것보다 Javascript를 통해 개발해야할 기술적 요소들이 더 많다고 생각했기 때문이다. 일반 페이지의 경우에는 디자인 + CSS 이 더 집중되어 있다면, 대시보드의 경우에는 기능 + Javascript 에 더 집중되어 있고 여기에 디자인 을 MSG로 첨가할 수도 있기 때문이다. 물론 일반 페이지도 기능을 끼워넣으면 되긴 하지만… 대시보드는 이미 기능이 거기서 거기이기 때문에 기능설계에 대한 힘을 덜 수 있다.

Dashboard 구상

Dashboard는 음… 이전에 외주나 개인 프로젝트에서도 만들어봤었지만 큰 차이는 없었다.

Dashboard를 만들기 위한 Resource

Dashboard 템플릿을 만드는 것은 아니니 일단 무엇을 관리하고 어떤 Resource를 관리할지에 대한 시나리오가 있어야 한다. 상상해본것들을 대략 정리해보자면 Resource는 아래와 같다.

  • User
  • Event
  • Admin
  • Traffic
  • Account
  • Transaction

Dashboard 페이지 구상

위에서 정리한 Resource를 기반으로 아래와 같이 구상해봤다.

  • Overview
  • Traffic & Engagement
  • User List
  • Event Management
  • Profile
  • Sign-in

페이지 상세 정의

일단 페이지 구상이 끝났으니 페이지의 컨텐츠를 채워보자.

Overview

  1. Total Visitor
    • 상단
    • 3
    • Index
    • 전월대비 지수 (%)
  2. New Visitors & Users
    • 상단
    • 3
    • Index
    • 전월대비 지수 (%)
  3. Traffic Share
    • 상단
    • 3
    • Index
    • Share Type: Desktop, Mobile
    • Unit (%)
  4. Views Per Minute
    • 상단
    • 3
    • Pie Chart
    • 전주대비 지수 (%)
  5. Channels
    • 중단
    • 3
    • Donut Chart
    • Channel Type: Organic Search, Direct, Social, Paid
  6. Visit by Notification
    • 중단
    • 9
    • Push
    • Email
    • Direct
  7. Sales Value
    • 하단
    • 6
    • Linear Graph
    • 전월대비 지수 (%)
    • Data: 2 Weaks
  8. Event Rank
    • 하단
    • 6
    • Table
    • Top 10
    • Column: Name, Views, Sales, Bounce rate

Traffic & Engagement

  1. Traffic Share
    • 6
    • 전월대비 지수 (%)
    • Donut Chart
    • Organic Search
    • Direct
    • Social
    • Paid
    • Push
  2. Traffic Volumes by Source
    • 6
    • 일주일치 데이터
    • Line Graph
    • Organic Search
    • Direct
    • Social
    • Paid
    • Push
  3. Traffic Source Table
    • 12
    • Table
    • Column: Traffic Source, Source Type, Share, Changes(from the previous week)

User List

  1. Search
    • Simple Search
    • Detail Search
  2. Sorting
    • ASC / DESC
    • Condition
  3. Table
    • 12
    • Column: Action CheckBox, Name, Date Created, Paid, Notification, Recent, Action
  4. Pagination
    • Buttons: Prev, (numbers), Next

Event Management

  1. Search
    • 6
    • Simple Search
    • Detail Search
  2. Sorting
    • 6
    • ASC / DESC,
    • Condition
  3. Table
    • 12
    • Column: Index, Title, Date Created, Open Date, Close Date, Margin, Status, Action
  4. Pagination
    • Buttons: Prev, (numbers), Next

Profile

  1. General information
    • 12
    • Form
    • Field: First Name, Last Name, Birthday, Email, Department

Sign-in

  1. Form
    • 4
    • Form
    • Field: Email, Password
  2. Password Reset Require
    • 12
    • Button
  3. Login
    • Button
  4. Error Message
    • Text

개발

기본적으로 Nuxt, Bootstrap & Bootstrap-vue를 기반으로 개발할 것입니다.

개발 환경

  • Nuxt (SSR)
  • Express (API)
  • Heroku
  • Git & Github
  • Bootstrap & Bootstrap-vue
  • Chart.js (Client)
  • Axios

개발 순서

  1. 프로젝트 생성 및 Github Repository 환경구성
  2. Heroku 배포 환경구성
  3. Nuxt & Express API 환경구성
  4. Axios
  5. Bootstrap & Bootstrap-vue 환경구성
  6. Page & UI 개발
    • Chart.js

Reference

정리

이번 프로젝트의 최대 목표는 ASAP 이다.

  1. 가능한 빠르게! 만드는 것이 목표!
  2. 중간중간 배우고 사용한걸 정리하자!
  3. 개발이 완료되고 스케줄을 고려해서 transition을 작업할지 말지 결정하자!
Share