[Vue.js - Vuex] Todo List 만들기 ①

1. Vue.js Project 생성

vue create todoapp

미리 Git Clone 시켜놓고 그 폴더 안에 Vue.js 프로젝트를 생성한다.

(Git Clone : GitHub Code 복사 → VSCode에서 Ctrl + Shift + P → Git: Clone → GitHub Code 붙여 넣기)

 

 

cd todoapp
npm run serve

프로젝트를 실행시켜보고 실행이 잘 된다면

Defalut 파일 src/component/HelloWorld.vue 파일을 삭제한다.

src/App.vue에 HelloWorld.vue 관련 내용을 다 지운다. (아래 주석 부분)

<!-- src/App.vue -->
<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  }
}
</script>

 

 

2. Components 생성 및 import (TodoInput, TodoList, TodoItem)

src/components 아래에 3개의 vue 파일을 만들어주고,

일단 파일 내용은 <h3> 태그로 파일명만 작성을 해둔다.

 

 

<!-- src/App.vue -->
<template>
  <div id="app">
    <TodoInput/>
    <TodoList/>
  </div>
</template>

<script>
import TodoInput from '@/components/TodoInput';
import TodoList from '@/components/TodoList';

export default {
  name: 'App',
  components: {
    TodoInput,
    TodoList
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

TodoInput과 TodoList 파일은 App.vue에 import 시켜주고,

 

 

<!-- src/components/TodoList.vue -->
<template>
    <div>
        <h3>Todo List</h3>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </div>
</template>

<script>
import TodoItem from '@/components/TodoItem';

export default {
    components: {
        TodoItem
    }
}
</script>

<style>

</style>

TodoItem은 TodoList에 import 시켜준다.

일단 예시로 TodoItem을 3개 표시해줘 봤다.

 

저렇게 import 시키고 실행을 하면 이런 화면이 출력될 거다.

 

 

3.  Vuetify 추가 후 UI 수정

이제 각자 파일명이 아닌 역할을 주기로 😉

 

 

먼저 TodoInput.vue 파일에 <input>과 <button>을 생성한다.

<!-- src/components/TodoInput.vue -->
<template>
    <div>
        <input type="text"/>
        <button>Add</button>
    </div>
</template>
<!-- script, style 그대로 -->

 

 

TodoList.vue에는 <h3> 제목 태그를 지워주고 <TodoItem>만 담는다.

<!-- src/components/TodoList.vue -->
<template>
    <div>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </div>
</template>
<!-- script, style 그대로 -->

 

 

TodoItem.vue에는 <button> 두 개와 기타 등등 생성 😋

<!-- src/components/TodoItem.vue -->
<template>
    <div>
        <h5>#1</h5>
        <h3>Todo Title</h3>
        <button>Edit</button>
        <button>Delete</button>
    </div>
</template>
<!-- script, style 그대로 -->

 

 

이렇게 나오면 된다.

근데 UI가 마음에 안들어서 이제야 Vuetify 추가... ^^

 

 

Vuetify 추가하면서 App.vue가 아예 바뀌어버려서

App.vue에 import 했던 거 다 사라짐!

(vuetify 추가할 거면 미리 하기 🙄)

 

 

파일들을 Vuetify Tag로 바꾸고 코드를 다시 수정해보겠습니다 ,,, ^^

<!-- src/App.vue -->
<v-main>
  <TodoInput/>
  <TodoList/>
</v-main>
.
.
.
<script>
import TodoInput from '@/components/TodoInput';
import TodoList from '@/components/TodoList';

export default {
  name: 'App',

  components: {
    TodoInput,
    TodoList
  },

  data: () => ({
    //
  }),
};
</script>

<!-- src/components/TodoInput.vue -->
<template>
    <v-container fluid>
        <v-row class="mt-6" justify="center">
            <v-col cols="4">
                <v-text-field outlined></v-text-field>
            </v-col>
            <v-col cols="1">
                <v-btn block x-large color="primary">Add</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {

}
</script>

<style>

</style>

<!-- src/components/TodoList.vue -->
<template>
    <v-container>
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
    </v-container>
</template>

<script>
import TodoItem from '@/components/TodoItem';

export default {
    components: {
        TodoItem
    }
}
</script>

<style>

</style>

<!-- src/components/TodoItem.vue -->
<template>
    <v-container fluid>
        <v-row class="mb-3 text-center" justify="center">
            <v-col cols="1">
                #1
            </v-col>
            <v-col cols="2">
                Todo Title
            </v-col>
            <v-col cols="1">
                <v-btn block color="primary">Edit</v-btn>
            </v-col>
            <v-col cols="1">
                <v-btn block color="error">Delete</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

 

저장 후 실행하면 Vuetify Tag가 적용된 화면을 볼 수 있다.

다른 UI 작업은 하지 않고, 예제라 간단한 Vuetify 속성만 사용했다.

 

 

다음 글은 Vuex 연결해서 store 관리까지 😊