JaeWon's Devlog
article thumbnail
반응형

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. 1. 기본 컴포넌트 파일 생성하기

- components 디렉토리 안의 HelloWorld.vue 파일은 지우고, 개발하고자 하는 컴포넌트 파일들을 생성합니다.

- 아래 이미지와 같이 파일을 생성합니다.(파일명은 파스칼 표기법(첫 글자를 대문자로 시작)으로 작성합니다.)

- 생성한 파일들을 App.vue 파일에 연결하여 사용하도록 합니다.

<javascript />
<!-- 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. 컴포넌트 파일 마크업(개발)하기

- 먼저 간단하게 화면 구성 후 추후 수정을 통해서 재구성하도록 하겠습니다.

2.1. 2-1. TodoHeader.vue

- TodoHeader.vue는 로고와 현재 날짜를 보여주는 영역입니다.

<javascript />
<!-- 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. 2-2. TodoTitle.vue

- 인사말과 Todo의 총 갯수를 보여주는 영역입니다.

<javascript />
<!-- 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. 2-3. TodoList.vue

- Todo 목록을 보여주는 영역입니다.

<javascript />
<!-- 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. 2-4. TodoInput.vue

- Todo 입력을 받는 영역입니다.

<javascript />
<template> <div class="add"> <input type="text" class="add__input" placeholder="Enter your task" /> <button class="add__button">Add</button> </div> </template>

2.5. 2-5. TodoFooter.vue

- Todo Footer 영역입니다.

<javascript />
<!-- TodoFooter.vue --> <template> <footer class="footer">SpringBoot + Vue.js + MySQL</footer> </template>

2.6. 2-6. TodoController.vue

- Todo 목록을 재정렬, 전체 삭제 처리하는 영역입니다.

<javascript />
<!-- 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. 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 파일을 수정합니다.

<javascript />
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

- https://nykim.work/74

- https://sungjaecloud.tistory.com/335

- https://sungjaecloud.tistory.com/341?category=1056950  

반응형
profile

JaeWon's Devlog

@Wonol

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!