[Spring] VSCode - Spring Project [2]

회사에서 사용하는 php 기반으로 만든 출근과 업무메일 전자결재를 통합하는 사이트가 있다. 

 

이런게 있는데... 이거를 클론코딩처럼 똑같이 만들어 보려 한다...

 

cursor로 만들면 별거 없을 거 같은데... 뭐라도 해야하겠다는 생각이 들어서

 

공부한다고 생각하고 Vuetify 적용해서 만들어보겠다.

 

App.vue에 layout 을 아래와 같이 설정해주면

<script setup>
import { ref } from 'vue';

</script>


<template>
  <div class="layout">
    <header class="header">
      헤더
    </header>
    <div class="container">
      <aside class="sidebar">
        사이드바
      </aside>
      <main class="content">
        <router-view /> <!-- 여기가 바뀜 -->
      </main>
    </div>
    <footer class="footer">
      푸터
    </footer>
  </div>
</template>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header,
.footer {
  height: 60px;
  background-color: #ddd;
  text-align: center;
  line-height: 60px;
}

.container {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 200px;
  background-color: #f4f4f4;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>

 

이렇게 모양이 잡힌다.

 

 

이후 각각에 해당하는 컴포넌트르 만들어주면 된다. (기본이지만, 컴포넌트는 대문자로 시작해야함!!!)

- Header.vue

- Footer.vue

- Aside.vue

 

이렇게 3개를 src/componets/common 아래에 만들어주었다.

 

이제는 router 관련된 것을 정리해주려고 한다.

 

src 아래에 router 폴더를 만들어주고,

 

src/router/index.js를 만들어주고 그 안에 아래와 같이 입력해준다.

import { createRouter, createWebHashHistory } from 'vue-router';

import Dashboard from '@/components/main/Dashboard.vue'

// 라우트 정의
const routes = [
  { path: '/', name: 'Dashboard', component: Dashboard },

  // 동적 라우트 (프로필 페이지)
//   { 
//     path: '/profile/:username',  
//     name: 'Profile',
//     component: () => import('../views/Profile.vue'),  // Lazy Loading
//     props: true
//   },

//   // 404 페이지
//   { 
//     path: '/:catchAll(.*)',  
//     name: 'NotFound',
//     component: () => import('../views/NotFound.vue')
//   }
]

// 라우터 생성
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

 

components 폴더안에 나중에 로그인도 만들고 해야하니 일단 common으로 Aside.vue, Footer.vue, Header.vue를 묶어주고 login 폴더를 만들어주고 그 안에 Login.vue 컴포넌트 만들어주고, main 폴더를 생성하고 main 폴더 안에 Dashboard.vue를 만들어준다. 

 

이런 구조로 만들어주면 localhost:5173/#/ 이렇게 url을 입력해주면 아래와 같이 나온다

 

다음편에서 port 번호를 변경하는 것에서부터 시작해보겠다!