Vue3 + express

이상우·2022년 1월 22일
0

목차
1. Vue Cli를 이용하여 Vue3 프로젝트 생성
2. Vue Router 설치 및 연결
3. express 설치 및 연결

1. Vue Cli를 이용하여 Vue3 프로젝트 생성

  • Vue Cli를 설치한다.
npm install -g @vue/cli
  • Vue3 기본 설정으로 프로젝트를 생성한다.
vue create 프로젝트명

vue 프로젝트 진행 시 편리한 vscode extension

  • Vetur
  • Vue 3 snippets
  • HTML CSS Support

2. Vue router 설치 및 연결

  • 생성한 프로젝트에서 Vue router를 설치한다.
npm i vue-router@next
  • src 폴더에 router.js 파일을 생성 후 아래의 코드를 작성한다.
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;
  • main.js 파일에서 router 관련 코드를 작성 후 App.vue 파일에서 연결 완료
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 run serve 명령문을 통해 개발 모드를 실행하고 연결이 되었는지 확인한다.

3. express 설치 및 연결

  • backend 폴더 생성 후 server.js 파일 생성 한다. express 및 pass 모듈 설치를 하고 server.js에 아래의 코드를 작성한다.
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());
})
  • backend 폴더 내에 routes 폴더를 생성한 뒤 그곳에 index.js 파일을 생성 후 아래의 코드를 작성한다.
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;
  • package.json의 scripts 부분에 아래의 코드를 추가한 뒤 터미널을 키고 연결 테스트를 마무리
"start": "nodemon backend/server.js " // 노데몬을 설치해야 가능

글을 마무리하며, 서버 개발에 관한 지식이 부족하여 서버 연결 부분에서 굉장히 헤메며 작업을 했다.
history 모드로 사용을 하려고 하다 보니 해당 URL로 접속을 하였을때 제대로 된 요청을 보내지 못하는 것에 문제가 있었는 알고보니 이 부분은 내가 라우팅도 걸지 않고 헤멘...

✨ 참고

profile
풀스택을 하고 싶은 프론트앤드 개발자입니다.

0개의 댓글