[Spring Boot + Vue.js] 게시판 만들기 - 구성

게시판 프로젝트, 컴포넌트, 뷰 구조는 아래와 같다.

앞으로 진행되는 포스팅 순서는 공통 컴포넌트 구현을 시작으로 각 기능별 컴포넌트 구현 순으로 진행할 예정이다.

프로젝트 구조

APP

┌─ node_modules
├─ public
├─ src ┌─ api
│       ├─ assets
│       ├─ components ┌─ board
│       │              └─ common
│       ├─ mixins
│       ├─ plugins
│       ├─ router
│       ├─ store
│       ├─ views ┌─ board
│       │         ├─ error
│       │         └─ Home.vue
│       ├─ App.vue
│       └─ main.js
├─ .browserslistrc
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ README.md
└─ vue.config.js

API

┌─ .mvn
├─ .vscode
├─ src ┌─ main ┌─ java ── board ┌─ config
│       │       │                    ├─ controller
│       │       │                    ├─ domain
│       │       │                    ├─ repository
│       │       │                    ├─ service
│       │       │                    └─ Application.java
│       │       └─ resources ┌─ mappers ── board
│       │                      ├─ static
│       │                      ├─ templates
│       │                      ├─ application.properties
│       │                      └─ logback-spring.xml
│       └─ test ── java ── ApplicationTests.java
├─ .gitignore
├─ HELP.md
├─ mvnw
├─ mvnw.cmd
├─ pom.xml
└─ README.md

컴포넌트 구성

1. 공통 컴포넌트

• AppHeader
• Button
• Clock
• Editor
• Snackbar
• Tooltip
• Viewer

2. 게시판 컴포넌트

• BoardList
• BoardWrite
• BoardDetail
• BoardEdit

뷰 구성

1. 에러 뷰

• 404

2. 게시판 뷰

• ListView
• WriteView
• DetailView
• EditView