Vue, Spring - 간단한 블로그 만들기 - 1 (Vue 설정)

- 실행 구조

1. Spring Boot

- Spring Boot는 내장된 웹 서버(Tomcat 등)을 사용하여 백엔드 서버를 실행한다.

- 애플리케이션을 실행하려면 Java 개발 환경을 설정하고, 해당 애플리케이션을 빌드하여 실행해야 한다.

 

2. Vue.js

- JavaScript 라이브러리이다.

- Vue.js 애플리케이션은 일반적으로 정적 파일로 빌드되며, 이러한 정적 파일을 웹 서버(Apache, Nginx 등)를 통해 제공할 수 있다.
- Vue.js 애플리케이션을 실행하기 위해서는 Node.js와 npm을 설지하고, 필요한 종속성을 설치한 후 개발 서버를 시작해야 한다.

---

- Vue.js 설치

1. Vue.js는 JavaScript 라이브러리이기 때문에 Node.js와 npm을 기존에 설치해놓아야 한다.

2. 아래 명령어를 통해 Vue 최신 라이브러리를 설치한다.

npm init vue@latest

- 설치를 시작하게 되면 설정 화면이 나오게 되고 개인 환경에 맞게 설정을 마루힌다.

- 설정 이후 위와 같이 새로운 패키지가 생성된 것을 확인 할 수 있다.

 

- 설치가 완료된 것을 확인 한 뒤 해당 Vue 패키지로 이동하여

npm run dev

위 명령어를 통해 애플리케이션을 실행한다.

 

- 실행이 완료되면 위와 같이 vue가 실행되는 것을 확인할 수 있다.

---

 

- 백엔드

https://insoobaik.tistory.com/category/Study%20%281%29/Spring%28Hodol%29

'Study (1)/Spring(Hodol)' 카테고리의 글 목록

- Vue.js에서 통신할 백엔드 서버는 같은 IP 주소의 8080번 포트의 서버를 사용할 예정이다.

* 현재 Vue.js 서버와 Spring Boot Server는 현재 컴퓨터의 IP 즉, localhost:5173(Vue),8080(Spring)의 주소를 사용할 것이다.

---

- 통신 URL 설정

 

- vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      // "/posts": "http://localhost:8080 ",
      "/api":{
        target : "http://localhost:8080",
        rewrite:(path)=>path.replace(/^\/api/,""),
      }
    }
  }
})

- 위 코드는 Vue.js 프로젝트의 개발 서버에서 프록시 설정을 구성하는 부분이다.

- 아래 server: {...}에 해당하는 부분은

1. /api로 시작하는 모든 요청을 http://localhost:8080 서버로 프록시하도록 구성한다.

2. target 속성은 프록시할 대상 서버의 주소를 지정하며, rewrite 함수는 요청 경로에서 /api 부분을 제거한다.

3. 즉, 클라이언트가 "/api/OOOOO로 요청하면 개발 서버는 실제로 "http://localhost:8080/OOOOO로 요청을 전달한다.

---

- main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import "bootstrap/dist/css/bootstrap-utilities.css"

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)

app.mount('#app')

1. createApp(App) : Vue.js 애플리케이션을 생성한다. App 컴포넌트는 애플리케이션의 진입점이다.

2. app.use(router) : Vue Router를 사용하여 라우팅을 설정한다. router는 ./router에서 가져온 것으로, 애플리케이션 내에서 페이지 전환을 관리한다.

3. app.mount('#app') : 애플리케이션을 #app 이라는 HTML 요소에 마운트 한다. 이것은 Vue.js 애플리케이션을 실제로 화면에 표시하는 단계이다.

---

- App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import Header from "@/components/Header.vue";
import Content from "@/components/Content.vue";
</script>

<template>
  <Header />
  <Content />
</template>

............

- index.html main.ts를 script로 전달받고 있고, main.ts는 App.vue를 마운트하고 화면에 띄우게 된다.

- App.vue는 <Header />, <Content />를 컴포넌트로 전달 받는다.

---

- Route

- Route를 이용하면 정적, 동적 페이지 이동이 수월해진다.

 

- index.ts

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: "/write",
      name:"write",
      component: WriteView
    },
    {
      path: "/read/:postId",
      name: "read",
      component: ReadView,
      props:true
    },
    {
      path:"/edit/:postId",
      name: "edit",
      component: EditView,
      props:true
    },

- createRouter를 통해 router를 생성해주고, 페이지 이동에 필요한 경로들을 객체 배열 형식으로 작성해준다.

- Path는 실제 경로를 의미하고, name은 다른 코드에서 전달받아 사용하게 될 이름이며, component를 통해 해당 경로에 대한 요소 전달을 한다.

---

- Content.Vue

<template>
  <el-main class="content">
    <el-row>
      <el-col>
        <RouterView />
      </el-col>
    </el-row>
  </el-main>
</template>

<script setup lang="ts">
import {RouterView} from "vue-router";
</script>

- App.vue에서 컴포넌트로 Content.Vue를 전달받고, <RouterView />를 컴포넌트로 전달 받는다.

- <RouterView />는 index.ts에서 생성된 routes의 path 경로를 화면에 띄우는 역할을 한다.