[OP.GG/Spring Framework] Vue.js

2023. 5. 28. 01:30

디자인에 감각적이지 않기때문에, bootstrap을 최대한 활용하면서 꾸미려고 한다.

버전에서 애를 많이 먹었는데, vue, bootstrap 등과 관련한 dependency 버전은 아래와 같다.

  "dependencies": {
    "bootstrap": "^5.2.3",
    "bootstrap-vue": "^2.23.1",
    "core-js": "^3.8.3",
    "vue": "^3.3.4",
    "vue-router": "^4.0.13"
  },

Add Header

<template>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand">Navbar</a>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>
</template>

<script>
export default {
    name: 'Header',
};
</script>

<style scoped>
/* Header component styles */
</style>

Change Code at App.vue

<template>
  <div id="app">
      <Header></Header>
      <div id="content" class="content">
          <router-view></router-view>
      </div>
  </div>
</template>

<script>
import Header from './components/layout/Header.vue'

export default {
  name: 'App',
  components: {
    Header
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Fix main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from "./router.js"

createApp(App)
    .use(router)
    .mount('#app');

위와 같이 header를 추가해주면 아래와 같이 닉네임 입력 칸과 검색 버튼이 추가가 된다.

일단, bootstrap이 정상적으로 작동되는지 확인이 완료했다.

nav, 스피너 사용 고려 (아직 신경 써야할 부분)

front-end로 vue.js를 back-end로 spring boot를 사용할 때 방법이 2가지 정도가 있다.

첫번째, vue.js를 spring boot의 src directory에 index.html로 내보내는 방법

Vue.js 애플리케이션을 빌드한 후 생성된 정적 파일을 Spring Boot의 정적 자원으로 포함시키는 방법이다. Vue.js 애플리케이션과 Spring Boot 애플리케이션이 하나의 단일 애플리케이션으로 구성된다.

장점
- 구성이 간단하고 초기 설정이 쉽다.
- 서버 측에서 Vue.js 애플리케이션을 렌더링할 수 있다.
- 단일 애플리케이션을 배포하므로 배포 및 관리가 용이하다.
단점
- 개발 및 빌드 단계에서 Vue.js와 Spring Boot가 함께 실행되므로 개발 환경에서의 개별적인 테스트와 디버깅이 어려울 수 있다.
- 프론트엔드와 백엔드의 종속성이 높아져 유연성이 제한될 수 있다. (별로인듯..)

두번째, vue.config.js에서 프록시를 설정하여 spring boot 서버와 통신하는 방법

Vue CLI의 설정 파일(vue.config.js)을 사용하여 개발 환경에서의 프록시를 설정한다. Vue 개발 서버는 프론트엔드 애플리케이션을 제공하면서 백엔드 API 호출을 Spring Boot 서버로 전달한다.

장점
- 개발 시에는 프론트엔드와 백엔드를 개별적으로 실행하고 디버깅할 수 있다.
- 개발 환경에서의 효율적인 개발을 위해 Hot Module Replacement(HMR)과 같은 기능을 사용할 수 있다.
- 프론트엔드와 백엔드의 종속성이 낮아져 개별적으로 스케일링하거나 교체하는 데 유리하다.
단점
- 프록시 설정 및 개발 환경의 구성이 좀 더 복잡할 수 있다.
- 프론트엔드와 백엔드가 별도의 서버로 실행되므로 배포 및 관리가 더 복잡할 수 있다.

위의 장단점들을 비교해본 결과 두번째 방식이 더 적합하다고 판단이 되어서 두번째 방식으로 구현하려 한다.

관련 문서

선장 일지

[OP.GG/Spring Framework] Vue.js

+ Recent posts

티스토리툴바