Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 5 (프론트 컴포넌트 생성)

안녕하세요.

 

오늘 포스팅에서는 실제로 Todo List 를 한번 만들어보도록 하겠습니다.

가장 먼저 해야 할 일은 HelloWorld.vue 파일을 삭제하고, App.vue 의 내용을 비워주겠습니다.

 

간단하게 테스트 할 코드를 적어주도록 하겠습니다.

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      name: 'cslee'
    }    
  }
}
</script>

<style>

</style>

이러한 코드를 작성하고, yarn serve를 입력해주시면 서버가 실행되고, localhost:8080 으로 접속하면

화면에 cslee 라는 값이 div 태그 안에 생성된 것을 확인할 수 있습니다.

 

좋습니다.

components 폴더 아래에 TodoHeader.vue, TodoContent.vue, TodoFooter.vue 를 생성해보도록 하겠습니다.

// components/TodoHeader.vue

<template>
    <header>
        <h1>Header</h1>
    </header>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

위 코드를 복사해서 4 곳에 붙여넣은 뒤 h1 안의 값만 변경해줍니다.

그리고 App.vue 로 이동해서 생성한 파일을 import 하고 컴포넌트를 등록해주도록 하겠습니다.

// App.vue
<template>
  <div>
    <todo-header></todo-header>
    <todo-content></todo-content>
    <todo-footer></todo-footer>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoContent from './components/TodoContent.vue';
import TodoFooter from './components/TodoFooter.vue';

export default {
  data: function() {
    return {
      name: 'cslee'
    }    
  },
components: {
  'todo-header': TodoHeader,
  'todo-content': TodoContent,
  'todo-footer': TodoFooter,
}
}
</script>

<style>

</style>

좋습니다. 이제 서버를 확인해보면!

정상적으로 잘 생성 된 것을 확인할 수 있습니다.

 

이제 화면에 보이는 부분을 꾸며주도록 하겠습니다.

vuetify 라는 프론트 웹 프레임워크를 사용해보겠습니다.

 

vuetify 설치

우리는 사전에 vue cli 로 프로젝트를 구성하였습니다.

cli 를 이용하여 vuetify 를 설치하는 방법은 아래와 같습니다.

 

설치 전에 주의해야 할 점은 index.html 안에 내용이 변경된다는 점 입니다.

우리가 처음에 Vue를 설치하였을 때 아무것도 설정하지 않았지만 Vue 에서 제공해주는 기본 웹 페이지가 보이는 것 처럼

Vuetify 도 설치 후에 index.html 과 그 외 src 폴더 안에 새로운 내용이 추가 될 것 입니다.

vue add vuetify

 

좋습니다. 이제 아래 보이는 사진처럼 간단하게 꾸며주도록 하겠습니다.

 

TodoHeader.vue

<!-- TodoHeader.vue -->

<template>
  <header>
    <center>
      <h1 class="title">Todo List</h1>
    </center>
  </header>
</template>

<script>
</script>

<style>
.title {
  color: green;
  padding: 10px;
}
</style>

TodoContent.vue

<!-- TodoContent.vue -->

<template>
  <div>
    <v-container fluid>
      <v-layout column>
        <v-flex xs12>
          <h3 class="subject">what is your plan?</h3>
        </v-flex>
        <v-flex column>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-text-field v-model="title" :counter="64" label="Title" required></v-text-field>
            <v-text-field
              v-model="content"
              :counter="255"
              label="Content"
              required
            ></v-text-field>

            <v-btn @click="create" style="background: green">create</v-btn>
            <v-btn @click="clear" style="background: red">clear</v-btn>
          </v-form>
        </v-flex>

        <v-flex class="todoList" column>
          <v-card max-width="600" tile>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>Title</v-list-item-title>
                <v-list-item-subtitle>content</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

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

<style>
.subject {
  color: blue;
  font-style: oblique;
  padding: 30px;
  text-align: center;
}
.todoList {
    margin: 30px 0px 30px 0px;
}
</style>

TodoFooter.vue

<!-- TodoFooter.vue -->

<template>
    <footer>@copyright</footer>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

좋습니다. 투두리스트 프론트 부분이 얼추 만들어졌습니다. 하지만 개발자 도구를 켜서 확인해보니 오류가 많이 보입니다. 이 오류들은 아직 이벤트나 모델을 정의해주지 않았기 때문에 나는 오류이니 추후에 해결될 것 입니다.

 

다음시간에는 axios 를 이용하여 백엔드의 데이터를 가져와 App.vue (상위 컴포넌트) 에서 하위 컴포넌트에 데이터를 전달하고 하위 컴포넌트에서는 상위 컴포넌트에 이벤트를 발생시켜 어떠한 동작을 하는 투두리스트를 만들어보도록 하겠습니다.

 

감사합니다.