목차
1. Vue Cli를 이용하여 Vue3 프로젝트 생성
2. Vue Router 설치 및 연결
3. express 설치 및 연결
npm install -g @vue/cli
vue create 프로젝트명
vue 프로젝트 진행 시 편리한 vscode extension
- Vetur
- Vue 3 snippets
- HTML CSS Support
npm i vue-router@next
import { createWebHistory, createRouter } from "vue-router";
import 컴포넌트 from "컴포넌트 경로";
const routes = [
{
path: "path 경로",
component: 컴포넌트,
// nested routes 설정 방법
// children: [
// {
// path: "컴포넌트",
// component: 컴포넌트,
// },
// ]
},
]
// history 모드를 사용
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
<template>
// router-view를 이용하여 router.js 파일에서 작성한 대로 라우팅이 되는지 확인할 수 있다.
<router-view></router-view>
// router-link를 이용하면 링크 이동이 가능하다.
</template>
<script>
export default {
name: "App",
}
</script>
<style>
</style>
npm install express --save
npm install path
const express = require('express');
const app = express();
const indexRouter = require('./routes/index');
const history = require('connect-history-api-fallback');
app.use(express.static('dist')); /* 정적 콘텐츠(css, js 이미지) 설정 */
// 어느 경로에 들어와도 index.html 로 빠질 수 있도록 라우트 설정을 해준다.
app.use('/', indexRouter);
app.use('/home', indexRouter);
app.use('/gallery', indexRouter);
app.use('/room', indexRouter);
app.use(history());
// app.get('/*', (req, res) => {
// console.log(res);
// res.render('index.html');
// })
/* 404 에러 (에러페이지 응답) */
// app.use(function (error, res) {
// res.render('error.html');
// });
/* 서버 에러 핸들링 */
// app.use(function (err, req, res, next) {
// console.log(err.stack);
// res.status(500).send('something broke!');
// });
app.listen(3000, function () {
// console.log(` listening on port 3000`);
console.log(new Date());
})
const express = require('express');
const router = express.Router();
const path = require('path');
router.get('/', (req, res, next) =>{
res.sendFile(path.join(__dirname, '../../dist', 'index.html'));
});
module.exports = router;
"start": "nodemon backend/server.js " // 노데몬을 설치해야 가능
글을 마무리하며, 서버 개발에 관한 지식이 부족하여 서버 연결 부분에서 굉장히 헤메며 작업을 했다.
history 모드로 사용을 하려고 하다 보니 해당 URL로 접속을 하였을때 제대로 된 요청을 보내지 못하는 것에 문제가 있었는 알고보니 이 부분은 내가 라우팅도 걸지 않고 헤멘...
✨ 참고