[Spring] VSCode - Spring Project [3]

 

- port 변경하기

vite.config.js에서 server:{port:3000}를 추가해주면 된다.

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server:{
    port: 3000
  }
})

 

이렇게 작성하고 저장하면

이렇게 재시작하면서 port가 변경된다.

 

클론코딩하려고 하는 사이트가 

 

fullcalendar를 쓰고 있다. 

나는 vue의 fullcalendar를 사용해보려고 한다.

 

npm install @fullcalendar/vue3 @fullcalendar/core @fullcalendar/daygrid

 

이렇게 설치를 해준다. 그리고 

<script setup>
import { ref } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";

const calendarOptions = ref({
  plugins: [dayGridPlugin],
  initialView: "dayGridMonth",
  events: [
    { title: "회의", start: "2024-03-20" },
    { title: "프로젝트 마감", start: "2024-03-25" },
  ],
});
</script>

<template>
  <FullCalendar :options="calendarOptions" />
</template>

 

입력하고 컴포넌트를 import 해주면 아래와 같이 나온다.

 

그 이후 게시판을 만들어야 하는데, 다음편에서 게시판을 만들어보자