[Vue3 + Spring Boot] 1. Todo 레이아웃 만들기

 

https://github.com/minhong1126/todo_full/tree/FE/layout

GitHub - minhong1126/todo_full

 

 

 

 React로 캡스톤디자인 진행을 하다 보니 다른 언어들 등에 관심이 생겼습니다. 그 중에서 가장 관심이 갔던 게 Vue랑 Spring이었습니다. 왜냐하면... 10년을 넘게 지낸 친구가 있는데 마침 다른 학교 같은 학과를 갔고? 같은 시기에 캡스톤을 진행했고? 같은 프론트엔드 역할을 맡았고? 심지어 비슷한 기능들을 개발하는데? 유일하게 다른 언어인 Vue를 썼기 때문입니다. 고민거리도 비슷하다 보니 서로의 코드도 종종 보게 됐는데 이게 뭐지? 싶었던 것들이 많았습니다. 그래서 널널할 때 한 번 써보고 싶어졌습니다.

 

 그리고 Spring 같은 경우에는 단순합니다. 함께 캡스톤한 백엔드 분들께서 쓰셨는데, 프론트만 해 온 입장에서 저게 그래서 어떻게 되는 거라고? 하는 생각이 계속 들었기 때문입니다. 설명해주긴 했지만 여전히 이해가 안 가는 부분들이 많아서 결국 제가 직접 한 번 해봐야겠다고 생각했습니다. 찍먹 수준이더라도요! 그리고 혹시나 제가 백엔드를 갈 수도 있지 않을까? 하는 마음이 들었습니다.

 

 

1. Vue3?

 

 몰랐는데 Vue2가 2023년 쯤에 사용 중지가 되었다 하더라고요. 근데 많은 자료드이 Vue2로 되어있는 것 같았습니다. 예를 들어 script를 쓴다던가 export default 안에 components 방식으로 사용하는 게요. 물론 Vue3에서도 지원하는 것 같긴 했지만, 조금 찾아보니 Composition API 때문에 script setup을 사용하는 걸 더 권장한다고 하더라고요. 하지만 setup을 하면 export로 data, component, method 등이 안 되는 것 같았습니다. 

 

 느낀 전체적인 흐름을 적어보자면 Vue3 파일 구조는 이렇게 된 것 같았습니다.

 

1. <template>: 겉으로 보여지는 뷰. html과 유사하다. <v-btn> 등의 컴포넌트가 있다. 

2. <script setup>: 본격적인 기능 등. html의 script 부분과 유사하다. import도 여기에 해야 한다.

3. <style>: 파일에서 css가 가능하다. <style scoped>를 쓰면 css가 그 안의 요소들에서만 적용된다. 

 

 그 외에는 React와 유사하다고 생각했습니다. Component로 관리가 가능하다는 거나, script setup을 사용했을 때 함수를 선언하는 방식 등이 대체로 비슷한 것 같습니다.

 

 

2. 전체적인 레이아웃

 외관은 아직 크게 신경쓰지 않았습니다. vue의 전체적인 기능 등을 익히기 위해 간략화했습니다. 하지만 추후에 vuetify를 통해 조금씩 개선할 예정입니다.

 올린 코드에는 css를 지웠습니다. 사유는... 길기만 하고 css 내용 그대로라서...

 

2-1. App.vue

<template>
  <v-app>
    <div>
      <MainHeader class="header"></MainHeader>
      <TodoBoard class="todoBoard"></TodoBoard>
      <MainFooter class="footer"></MainFooter>
    </div>
  </v-app>
</template>

<script setup>
import MainFooter from "./components/layout/Footer/MainFooter.vue";
import MainHeader from "./components/layout/Header/MainHeader.vue";
import TodoBoard from "./components/layout/TodoBoard/TodoBoard.vue";
</script>

<style scoped>
// css
</style>

 

 App.vue에서는 아주 간단하게 컴포넌트를 불러오는 방식만 사용했습니다. 최상단의 v-app 태그 같은 경우에는 Vuetify를 사용했기 때문에 들어간 태그입니다.

 

2-2. MainHeader.vue & ThemeToggle.vue

<template>
  <header>
    <h1>Todo List</h1>
    <ThemeToggle />
  </header>
</template>

<script setup>
import ThemeToggle from "./ThemeToggle.vue";
</script>

<style scoped>
// css
</style>

<template>
  <v-switch v-model="isChecked" />
</template>

<script setup>
import { ref, watch } from "vue";
import { useTheme } from "vuetify/lib/framework.mjs";

const theme = useTheme();
const isChecked = ref(false);

watch(isChecked, (val) => {
  theme.global.name.value = val ? "dark" : "light";
});
</script>

<style></style>

 

 헤더에는 TodoList라는 문구와 테마 변경 토글 버튼을 넣었습니다. 테마는 Vuetify에서 제공됩니다. 

 

 그리고 이곳에서 Vue의 문법이 조금 들어갑니다. 

1. ref: 값이 변할 수 있는 변수. 변하면  (=React의 useState)

2. watch: ref 변수가 변했을 때 하는 동작을 정의한다. (=React의 useState)

 

 

2-3. MainFooter.vue

<template>
  <footer>
    <h3>
      {{ remainTime.day }} Days, {{ remainTime.hour }} Hours :
      {{ remainTime.min }} Minutes : {{ remainTime.sec }} Seconds
    </h3>
  </footer>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import dayjs from "dayjs";

const remainTime = ref({
  day: 0,
  hour: 0,
  min: 0,
  sec: 0,
});
const dueTime = dayjs("2025-01-01");
let intervalId;

function timeFormat(value) {
  const time = value / 1000;

  remainTime.value.day = Math.floor(time / 86400);
  remainTime.value.hour = Math.floor((time % 86400) / 3600);
  remainTime.value.min = Math.floor(((time % 86400) % 3600) / 60);
  remainTime.value.sec = Math.floor(((time % 86400) % 3600) % 60);
}

onMounted(() => {
  intervalId = setInterval(() => {
    const curr = dayjs();
    timeFormat(dueTime.diff(curr));
  }, 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style scoped>
// css
</style>

 

 

 footer에는 2025년까지의 카운트다운을 넣었습니다. setInterval, clearInterval을 사용했습니다.

 

1. dayjs: 시간 관련 라이브러리입니다. moment보다 더 가볍고 좋다고 해서 사용했습니다. 하지만 밀리초를 바꿀 수 있는 함수가 없어서 직접 변환해줬습니다.

2. onMounted, onUnmounted: 컴포넌트 생명 주기에서 마운트 되고 언마운트 됐을 때 실행됩니다. 

 

 

 

 이상 레이아웃은 간단하게 구현했습니다. TodoBoard는 정말 html만 아직 있는 상태라 넣지 않았습니다. 추후 TodoComponent를 생성한 후 조금 뭐라도 있을 것 같네요. 다음번에는 Vuetify에 관한 내용을 적거나 Spring에 관해 적을 것 같습니다. 그리고... 오류 일기로 겪었던 오류들을 적을 예정입니다. 화이팅...