Vue + SpringBoot + Mysql 를 이용한 Todo 구현(1) - 프로젝트 구성하기
Vue + SpringBoot + Mysql 를 이용한 Todo 구현(2) - 프로젝트 환경 설정하기
Vue + SpringBoot + Mysql 를 이용한 Todo 구현(3) - Todo API 개발하기(1)
Vue + SpringBoot + Mysql 를 이용한 Todo 구현(4) - Todo API 개발하기(2)
Vue + SpringBoot + Mysql 를 이용한 Todo 구현(6) - Todo 화면 개발하기(2) - Vuex 적용
(끝) Vue + SpringBoot + Mysql 를 이용한 Todo 구현(7) - Todo 화면 개발하기(3) - 화면 개발
이전까지 API를 개발하면서 Backend를 구성하였습니다. 이번 글에서는 화면단인 Frontend를 Vue.js를 통해서 개발해보도록 하겠습니다.
해당 화면은 캡틴판교님의 Vue.js 강의를 듣고 개발한 화면입니다.
css 는 비슷한 강의를 들으신 다른 개발자분의 블로그를 보다가 잘 만드셔서 참고하였습니다.
번외로... 지인 프론트 개발자분이 Vue.js 에 대해서 조그맣게 Youtube(유튜브)에 기초 강의를 올리고 계십니다.
참고해보셔도 좋을 것 같습니다.
9Diin
구디사는 개발자🤔 9Diin의 엉망진창 개발 시리즈
www.youtube.com
1. 기본 컴포넌트 파일 생성하기
- components 디렉토리 안의 HelloWorld.vue 파일은 지우고, 개발하고자 하는 컴포넌트 파일들을 생성합니다.
- 아래 이미지와 같이 파일을 생성합니다.(파일명은 파스칼 표기법(첫 글자를 대문자로 시작)으로 작성합니다.)
- 생성한 파일들을 App.vue 파일에 연결하여 사용하도록 합니다.
<!-- App.vue -->
<template>
<div id="app">
<TodoHeader />
<TodoTitle />
<TodoInput />
<TodoController />
<TodoList />
<TodoFooter />
</div>
</template>
<script>
import TodoHeader from "./components/TodoHeader";
import TodoTitle from "./components/TodoTitle";
import TodoInput from "./components/TodoInput";
import TodoController from "./components/TodoController";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
name: "App",
components: {
TodoHeader,
TodoTitle,
TodoInput,
TodoController,
TodoList,
TodoFooter
}
};
</script>2. 컴포넌트 파일 마크업(개발)하기
- 먼저 간단하게 화면 구성 후 추후 수정을 통해서 재구성하도록 하겠습니다.
2-1. TodoHeader.vue
- TodoHeader.vue는 로고와 현재 날짜를 보여주는 영역입니다.
<!-- TodoHeader.vue -->
<template>
<header class="header">
<h1 class="logo">My Todo</h1>
<p class="date">{{ timestamp }}</p>
</header>
</template>
<script>
export default {
data() {
return {
timestamp: ""
};
},
created() {
const now = new Date();
const month = now.getMonth() + 1;
const date = now.getDate();
const weekList = new Array("Sun.", "Mon.", "Tue.", "Wed.", "Thu.", "Fri.", "Sat.");
const week = weekList[now.getDay()];
this.timestamp = `${month}/${date} ${week}`;
}
};
</script>- created()에 오늘 날짜를 구하는 스크립트를 추가합니다.
- created(), mounted() 등 Vue 개발자가 아니라 라이프사이클에 대해서는 아직 어색하지만, 해당 내용에 관해서는 지인인 vue 개발자 분의 블로그를 참고해주세요!
2-2. TodoTitle.vue
- 인사말과 Todo의 총 갯수를 보여주는 영역입니다.
<!-- TodoTitle.vue -->
<template>
<div class="title">
<p class="title__message">{{ message }}</p>
<p class="title__task">
You've got
<span class="title__task-total">{{ taskTotal }}</span> tasks today.
</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, Jaewon.",
taskTotal: 10
};
}
};
</script>2-3. TodoList.vue
- Todo 목록을 보여주는 영역입니다.
<!-- TodoList.vue -->
<template>
<ul class="list">
<li class="list__item">
<input type="checkbox" id="list-item-1" />
<label for="list-item-1">
<p class="list__text">Smile! :)</p>
</label>
<p class="list__date">5/26</p>
<button class="list__delete">Delete</button>
</li>
</ul>
</template>2-4. TodoInput.vue
- Todo 입력을 받는 영역입니다.
<template>
<div class="add">
<input type="text" class="add__input" placeholder="Enter your task" />
<button class="add__button">Add</button>
</div>
</template>2-5. TodoFooter.vue
- Todo Footer 영역입니다.
<!-- TodoFooter.vue -->
<template>
<footer class="footer">SpringBoot + Vue.js + MySQL</footer>
</template>2-6. TodoController.vue
- Todo 목록을 재정렬, 전체 삭제 처리하는 영역입니다.
<!-- TodoController.vue -->
<template>
<div class="controller">
<div class="select">
<label for="order">Order</label>
<select name="order" id="order" class="selectbox">
<option value="date-asc">Date Ascending</option>
<option value="date-desc">Date Descending</option>
</select>
</div>
<button class="clear">Clear All</button>
</div>
</template>- 화면 구성이 끝났다면, 간단하게 Vue.js 실행합니다.
npm run serve
3. css(스타일) 입히기
- css는 Sass 를 설정하여 사용합니다.
- Vue CLI는 PostCss, Css Moudles를 지원하고, Sass, Less, Stylus 까지 지원합니다.
- Sass를 사용하기 위해 아래 명령어를 통해 설치합니다.
npm install node-sass sass-loader --save-dev
- 아래 파일 이미지처럼 파일을 생성합니다.(src -> assets -> style)
- 각 파일의 소스들은 이 링크를 통해서 확인 부탁드립니다.
- 해당 파일들을 사용하기 위해, vue.config.js 파일을 수정합니다.
const path = require("path");
module.exports = {
...
css: {
sourceMap: true,
loaderOptions: {
scss: {
additionalData: `
@import "~@/assets/style/_mixins.scss";
@import "~@/assets/style/_variables.scss";
@import "~@/assets/style/_mediaQueries.scss";
@import "~@/assets/style/_svg.scss";
@import "~@/assets/style/_common.scss";
`
}
}
}
}- css 를 정상적으로 입히게 된다면, 최종적으로는 아래 이미지와 같이 적용됩니다.
- 하지만 각 컴포넌트 파일 수정에 대해서는 해당 글에서는 다루지 않겠습니다.(필요시 여기를 참고 부탁드립니다.)
- 다음 글에서는 vuex를 통해 서버 통신 기능을 구현하도록 하겠습니다.
참고
- https://www.inflearn.com/course/age-of-vuejs/dashboard
