[실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 웹(WEB)에 투두 리스트 구현하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

오늘의 Vue.js 실습 목표는 "투두리스트(Todo List) 만들어보기!" 입니다.

본 게시글에서 다루는 사항은 지난 게시글에서 다룬 웹 어플리케이션에 투두 리스트를 올리는 과정입니다.

---

투두 리스트 (Todo List) 구현하기

사전 준비

아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.

1. Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5)

 

혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다.

• 뷰 라우터(Vue Router) - 네스티드 라우터: https://logs-jejustone.tistory.com/20

 

파일 구조

아래 이미지에서 파란색으로 표시한 파일은 기존에 구현한 파일에서 수정해야할 파일을 표시하였으며, 초록색으로 표시된 파일은 Todo List 관련하여 신규 추가된 파일을 의미합니다. 

추가적으로 노란색으로 표시한 파일은 지난 실습이었던 계산기 구현시 추가된 파일로 해당 작업을 진행하지 않았다면 신규 추가해야할 파일입니다.

작업할 파일에 대해 간략한 설명은 아래를 참고하시면 됩니다.

• TheSidebar.vue
  • Web Sidebar이자 Menu 영역을 정의하는 파일
  • 콘텐츠 영역에서 보여줄 콘텐츠 페이지의 지시자 역할을 하는 영역을 정의하는 파일
• router\index.js: 라우터 관련 정보를 설정하는 파일
• views\PracticePage.vue: 라우팅 결과로 표현되어지는 콘텐츠를 정의하는 파일
• views\Practice\PracticeTodo.vue
  • PracticePage.vue 하위 컴포넌트로 네스티드 라우팅 결과 파일
  • Todo List의 최상위 컴포넌트 파일

 

추가적으로 본 게시글에서 도식화한 파일 구조와 동일한 구조를 구현하고 싶으시다면, 아래 링크를 참조하여 구현하시면 됩니다.

• [실습] 뷰(Vue)로 웹 어플리케이션 레이아웃(Web layout) 구현하기
• [실습] 뷰(Vue)로 계산기 구현하기 - 웹(WEB)에 계산기 구현하기

 

결과 이미지

구현하기에 앞서 본 글을 따라하시면 아래와 같이 투두 리스트(Todo List) 구현 결과를 콘텐츠 영역에서 확인하실 수 있습니다.

지난 번에 만든 웹 애플리케이션 레이아웃에 띄운 투두 리스트(Todo List) 결과 이미지는 아래와 같습니다.

• 경로: http://localhost:8080/practice/todo

 

소스 코드

src\component\TheSidebar.vue

위 결과 이미지에서 'Menu'로 좌측에 위치한 메뉴이자 사이드바 영역을 정의하고 관리하는 코드를 구현합니다.

<!-- TheSidebar.vue -->

<template>
    <div id="sidebar">
        ...
        <div>
            ...
            <div class="defaultMenu subMenu">
                <router-link to="/practice/todo">Todo</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
...
</style>

위 코드는 첫 실습 예제였던 계산기를 웹에 올리는 과정에서 사용한 코드에서 Todo List 관련하여 새롭게 추가된 코드에 대해서 작성한 사항입니다.

전체 코드가 궁금하신 분들은 아래 '더보기'를 참고해주세요.

<!-- TheSidebar.vue -->

<template>
    <div id="sidebar">
        <h3>Menu</h3>
        
        <div class="defaultMenu topMenu">
            <router-link to="/home">Home</router-link>
        </div>
        <div>
            <p class="defaultMenu topMenu">Practice</p>
            <div class="defaultMenu subMenu">
                <router-link to="/practice/calculator">Calculator</router-link>
            </div>
            <div class="defaultMenu subMenu">
                <router-link to="/practice/todo">Todo</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
#sidebar {
    background-color: green;

    float: left;
    height: 100%;
    width: 15%;
}

.defaultMenu {
    padding: 5px;
    font-style: oblique;
}
.topMenu {
    text-align: left;
    font-size: 2vw;
}

.subMenu {
    text-align: right;
    font-size: 1.5vw;
}

div h3 {
    text-align: center;
    color: white;
}
</style>

 

src\router\index.js

router\index.js은 라우팅 기능을 사용하기 위한 최소한의 정보 및 라우팅될 페이지 정보를 설정하는 파일입니다.

본 파일에서 Sidebar인 메뉴에서 Element 클릭시 변경될 Path 정보와 Path에 해당하여 콘텐츠 영역에 보여질 컴포넌트 파일을 지정합니다. 

// 라우팅될 페이지 경로 및 별칭
...
import PracticeTodo from "../views/Practice/PracticeTodo.vue";

// 라우팅될 페이지 정보를 담는 변수
const routes = [
    ...
    {
        path: "/practice",
        name: "practice",
        component: PracticePage,
        children: [
            ...
            {
                path: "todo",
                component: PracticeTodo
            }
        ]
    }
];

...

위 코드는 첫 실습 예제였던 계산기를 웹에 올리는 과정에서 사용한 코드에서 Todo List 관련하여 새롭게 추가된 코드에 대해서 작성한 사항입니다.

전체 코드가 궁금하신 분들은 아래 '더보기'를 참고해주세요.

// router > index.js

import { createRouter, createWebHistory } from 'vue-router'

// 라우팅될 페이지 경로 및 별칭
import HomePage from "../views/HomePage.vue";
import PracticePage from "../views/PracticePage.vue";
import PracticeCalculator from "../views/Practice/PracticeCalculator.vue";
import PracticeTodo from "../views/Practice/PracticeTodo.vue";


// 라우팅될 페이지 정보를 담는 변수
const routes = [
    {
        path: "/home",
        name: "home",
        component: HomePage
    },
    {
        path: "/practice",
        name: "practice",
        component: PracticePage,
        children: [
            {
                path: "calculator",
                component: PracticeCalculator
            },
            {
                path: "todo",
                component: PracticeTodo
            }
        ]
    }
];

// 라우터 정보
const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router;

 

src\views\PracticePage.vue

위 결과 이미지에서 Sidebar 메뉴에서 Practice가 콘텐츠 영역에서 보여질 컴포넌트를 구현합니다.

실질적으로 Practice 메뉴는 클릭하여 콘텐츠 영역이 변경되지는 않습니다.

다만, 노란색으로 표시되고 있는 콘텐츠 영역에서 Practice로 개발할 계산기, Todo 등의 컴포넌트를 주체적으로 관리하는 페이지이자 파일로 사용됩니다.

그렇게 하기 위해 뷰 라우터 중에서 네스티드 라우터 개념을 착안하여 구현하였습니다.

 

첫 실습 예제였던 계산기를 웹에 올리는 과정에서 사용한 코드에서 Todo List 관련하여 새롭게 추가된 코드가 없어서 아래 전체 코드만 첨부합니다. 전체 코드가 궁금하신 분들은 아래 '더보기'를 참고해주세요.

<!-- PracticePage.vue -->

<template>
    <div id="wrapPractice">
        <h1> Vue Practice </h1>

        <div>
        <router-view></router-view>

        </div>
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
#wrapPractice {
    height: 100%;
}

#wrapPractice h1 {
    margin: 0;

    height: 10%;
}

#wrapPractice div {
    height: 90%;
}
</style>

 

src\views\Practice\PracticeTodo.vue

Todo List의 최상위 컴포넌트인 뷰 파일입니다.

보다 상세하게 다루기 위해 별도의 게시글로 작성하였으니 관련 코드는 아래 링크를 참조해주세요.

• Todo List 구현하기 - Layout 구성: https://logs-jejustone.tistory.com/37
• Todo List 구현하기 - Header, Input 컴포넌트 구현: https://logs-jejustone.tistory.com/39
• Todo List 구현하기 - List, Footer 컴포넌트 구현: https://logs-jejustone.tistory.com/40

 

---

References

• Vue.js 공식 사이트: https://vuejs.org/guide/quick-start.html

Quick Start | Vue.js