커피숍&스마트스토어 관리페이지 만들어주기
어머니가 커피숍과 스마트스토어 판매를 하고 계신다. 회사 업무가 끝나고 종종 가서 도와드리곤 하는데 계속 마음에 걸리는 점이 컴퓨터와 관련된 점이었다. 특히 커피숍 월말정산이나 스마트스토어 장부를 작성하시는데 나이가 있으신 만큼 엑셀은 커녕 POS 가계부/장부 기능도 잘 못쓰셔서 결국 노트에 직접 쓰고 계신다.
명색에 아들이 개발자인데 이런거 간단하게라도 맞춤형으로 만들어 드려야겠다 싶어서 짧은 프로젝트를 열었다.
Front-End
Vue 설치하기
대학생 때 Vue 처음 나오면서 궁금한 마음에 한번 환경설정 해봤던 기억을 가지고 Vue3로 채택했다.
거창한 홈페이지 만들거 아니고 가볍게 엑셀 대체하고 수익률/판매마진 계산 도와주는 웹 사이트 만들어 줄거라 러닝커브 짧고 비교적 가벼운 Vue로 선정.
Vue 환경설정
https://vuejs.org/guide/quick-start.html
개인블로그/github을 둘러보는데 애초에 Front 작업을 제대로 해본 적 없는 본인으로서는 무슨 말인지 전혀 알 수 없어서 근본이 되는 공식사이트를 따라하기로 했다.
# npm 6.x
> npm create vite@latest [my-vue-app] --template vue
# npm 7+, '--'를 반드시 붙여주세요
> npm create vite@latest [my-vue-app] -- --template vue
# yarn
> yarn create vite [my-vue-app] --template vue
vue3가 생기면서 vite(‘비-트(/vit/)’라고 발음하는 것 같다… 프랑스어로 ‘빠름’이라는 의미란다.)라는 번들러가 만들어졌다. vite로 대체하면서 webpack이나 vue-cli가 필요없어진 것 같다. (좋다~)
위 명령어로 설치를 하게되면 여느 npm 프로젝트 시작처럼 기본적인 사항들에 대해 기입하고 설치를 시작한다.
cd my-project
npm install
npm run dev
마지막으로 이런 식의 dev 시작 안내 후 설치를 끝낸다.
package.json을 열어보면 scripts가 아래와 같이 미리정의되어 있다.
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 7077"
},
dev : 개발환경에서의 localhost 오픈.
build : 번들링하여 <root>/dist directory에 src 파일들을 build
preview : dev와는 달리 build 후 컴파일된 파일들을 기반으로 Web 오픈
안내된 대로 package install 후 run dev를 하면 Vue 시작화면이 뜬다.
감탄할 새 없이 바로 개발을 위한 기초지식을 알아봐야 한다.
LifeCycle
Vue만의 LifeCycle이 존재한다. LifeCycle을 이해해야 data, methods, computed를 이해할 수 있고 그 다음단계들이 이해된다.
LifeCycle에 대한 내용을 본인이 직접 서술하는 것보다는 정리를 잘해주신 버미노트님 블로그 링크를 남긴다. https://beomy.tistory.com/47
Router
다음으로 할 일은 업무 성격에 따른 URI Router를 생성하는 것이다.
# vue3 이후부터는 `@next`를 뒤에 붙여야 한다고 한다.
> yarn add vue-router@next
router 패키지를 설치한 다음같이 router.js 파일에 routes를 등록한다.
// store directory > index.js
import StoreView from './StoreView.vue'
import StoreHome from './StoreHome.vue'
import StoreLogin from './StoreLogin.vue'
export default {
StoreView, StoreHome, StoreLogin
}
//////////////////////////
// 필요한 패키지 import
import { createWebHistory, createRouter } from 'vue-router'
import Home from '@/components/Home.vue'
// 위 index.js처럼 하나의 js파일에 컴포넌트를 모두 import 한 후 묶어서 import할 수도 있다.
import Stores from '@/components/stores'
import NotFound from '@/components/except/NotFound.vue'
const routes=[
{
path: "/:catchAll(.*)", // 아래 지정된 URI외 다른 URI를 요청할 경우 NotFound 페이지를 내보낸다.
name: "NotFound",
component: NotFound
},
{
path: "/",
name: "Home",
component: Home
},
{
path: '/store',
name: 'StoreHome',
component: Stores.StoreView,
children: [
{
path: '',
component: Stores.StoreHome
},
{
path: 'login',
component: Stores.StoreLogin
}
]
// Nested Route 방식. 부모 컴포넌트가 되는 View template에 <router-view/>를 걸어준 다음,
// children 값에 list로 path를 넣어준다. child에는 '/'가 필요 없는 모양.
}
]
export const router = createRouter({
history: createWebHistory(),
routes
})
잠깐 하나 짚고 넘어가자면, import하는 구문에 @표시가 있다. 사전작업 없이 @를 사용하면 모듈이 안보인다는 오류를 내뱉을 것이다. 이건 vite.config.js에서 alias를 설정해 준 것이다.
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
이 js를 main.js에서 호출, app에 넣어준다.
...
import { router } from './router'
const app = createApp(App)
app.use(router) // app에 router 등록
...
이러면 Routing은 완료된다.
현재 바로 필요한 기능은 2가지다.
- 커피숍 하루매입출 등록/조회 (메뉴 별 판매수량)
- 스마트스토어 장부등록
컴포넌트 구성을 어떻게 해야할까 고민하다가 규모있는 프로젝트를 하는것이 아니기 때문에 각 기능 범주 별로 디렉토리를 나누고 공통모듈만 따로 떼어서 사용하기로 했다.
그래서 현재 파일 구성도는 이렇게 된다.
<root-project>
├─index.html # root html
├─package.json # project packages
├─vite.config.js # vite config
├─dist/ # build output
├─public/ # favicon
└─src/
├─assets/ # image
├─components/ # vue files
│ ├─App.vue # root vue
│ ├─Home.vue # Main page vue
│ ├─store/ # 스마트스토어 관리페이지 Component vue
│ ├─cafe/ # 카페관리 페이지 Component vue
│ ├─common/ # 공통모듈 Directory
│ └─except/ # Error Page Component vue
└─scripts/ # javascript files
앞으로 해당 프로젝트의 개발 순서는
- (Back-End)Spring Boot 프로젝트 생성
- (DB)Mysql Schema 생성
- (Front-End)Store 관리페이지(장부입력/삭제/조회) 만들기
- (Back-End)Store 관리페이지 API 개발
- (DevOps)서버 올리기 1차
- (Front-End)카페 매출관리 페이지(입력/조회) 만들기
- (Back-End)카페 매출관리 API 개발
- (DevOps)서버 올리기 2차
