vue

2053 No

Vue Todo 앱 만들기 - 1 ★ vue 파이어 베이스 실시간 데이터 베이스 3분안에 연동해서 메시지 보내기, Todo 앱 만들기 CRUD

2023-02-26 22:22:19 By 라이트 0 1177 댓글수 4 포스트 하기
11월 2024
일월화수목금토
     12
3456789
10111213141516
17181920212223
24252627282930

 

 

vue 

프로젝트 초기 생성 방법은

다음을 참조 : https://macaronics.net/m04/vue/view/2048

 

 

 

소스 :

https://github.com/braverokmc79/vue-todo

 

 

 

1. 파이어 베이스 DB와 연동하지 않은 프로젝트

 

최종 산출물

 

 

 

vuetify 사용법

 

https://vuetifyjs.com/en/

예를 들엇 v-card 를 찾아서 적용하고 싶다면 검색을 한다.

 

 

vuetifyjs 에서 v-card 검색 후

 

 

 

 

이와 같은 방법으로

 

v-card, 

v-row

cols,

v-list-item

v-text-field

 

등의 검색을 하고 예시로 사용한 템플릿 소스를 보면서  적용한다.

 

 

 

 

https://vuetifyjs.com/en/components/checkboxes/

 

 

 

App.vue

<template>
  <v-app>
     <v-card>
        <v-app-bar dark color="pink">
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
          <v-toolbar-title>To-Do 리스트</v-toolbar-title>
        </v-app-bar>

      <v-main>
          <v-container>
             <v-row my-5>
                <v-col cols="8"  offset="1"  >
                    <!-- 실행되자마자 입력 포커스를 가지도록 autofocus 설절 -->
                    <v-text-field   label="할 일" required autofocus v-model="sTodoTitle"  >   
                    </v-text-field>       
                </v-col>
                <v-col cols="2">
                  <v-btn  fab class="mx-2"  dark   color="pink"  @click="fnsubmitTodo()" >
                    <v-icon dark>mdi-plus</v-icon>
                  </v-btn>
                </v-col>
             </v-row>


             <v-row>
                <v-col cols="12" >

                  <v-list two-line  v-for="(item, i) in items"  :key="i">
            
                        <v-card flat color="grey lighten-3"  v-if="!item.b_edit">
                            <v-list-item-group>
                              <v-list-item class="py-2">
                                <template >
                                  <v-list-item-action>
                                    <v-checkbox v-model="item.b_completed"  @change="fnCheckboxChange(item.key)"></v-checkbox>
                                  </v-list-item-action>

                                  <v-list-item-content>
                                    <v-list-item-title v-text="item.todo_title" :class="{'style_completed':item.b_completed}"></v-list-item-title>
                                    <v-list-item-subtitle class="mt-2">

                                        <v-icon class="pointer" @click="fnSeEditTodo(item.key)">create</v-icon>
                                        <v-icon class="pointer" @click="fnRemoveTodo(item.key)">delete</v-icon>

                                    </v-list-item-subtitle>
                                  </v-list-item-content>
                                </template>
                              </v-list-item>
                            </v-list-item-group>  
                      </v-card>


                      <v-card v-else dark>
                            <v-list-item-group>
                              <v-list-item class="py-2">
                                
                                <template v-slot:default="{ active }">
                                  <v-list-item-action>
                                    <v-checkbox v-model="item.b_completed"  @change="fnCheckboxChange(item.key)"></v-checkbox>
                                  </v-list-item-action>

                                  <v-list-item-content >

                                    <v-col cols="11"   >
                                        <v-text-field v-model="item.todo_title"   color="blue darken-2"  autofocus clearable   
                                          required
                                        ></v-text-field>
                                  
                                    </v-col>
                                    <v-col cols="1"   >
                                      <v-list-item-subtitle class="mt-2">
                                        <v-icon class="pointer" @click="fnSaveEditTodo(item.key)">save</v-icon>
                                        <v-icon class="pointer" @click="fnCancelEdit(item.key)">cancel</v-icon>
                                      </v-list-item-subtitle>
                                    </v-col>

                                  </v-list-item-content>



                                </template>
                              </v-list-item>
                            </v-list-item-group>  
                      </v-card>




                  </v-list>
                </v-col>
                
             </v-row>



          </v-container>
      </v-main>
  </v-card> 
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data () {
    return {
       sTodoTitle:"",
       selectedItem: 1,

       items: [
        {key:1, todo_title: 'Real-Time' , b_edit:false, b_completed:false},
        {key:2, todo_title: 'Audience' , b_edit:false , b_completed:false},
        {key:3, todo_title: 'Conversions' , b_edit:false, b_completed:false},
        {key:4, todo_title: 'Conversions' , b_edit:true, b_completed:false},
      ],
      checkbox: true,
      settings: [], 

      }
     
  },
  methods: {
    //할일 추가 폼 버튼 클릭시
    fnsubmitTodo(){
      if(!this.sTodoTitle){
        window.alert("할일을 입력해 주세요.");
        return;
      }
      const data= {
            key:new Date().getTime(), 
            todo_title:this.sTodoTitle ,
            b_edit:false, 
            b_completed:false
          }
      this.items.push(data);
      this.sTodoTitle="";
    },
    

    //수정 버튼 클릭시
    fnSeEditTodo(key){
      this.items.map(item=>{
          if(item.key===key){
            item.b_edit=true
          }
      });
    },

    //수정후 저저장 버튼 클릭시
    fnSaveEditTodo(key){
      
      this.items.map(item=>{
          if(item.key===key){
            item.b_edit=false
          }
      });
    },


    //취소버튼 클릭시
    fnCancelEdit(key){
      this.items.map(item=>{
          if(item.key===key){
            item.b_edit=false
          }
      });
    },

    //삭제 버튼 클릭시
    fnRemoveTodo(key){
  
      const result=this.items.filter((item)=>(item.key!==key));   
      this.items=result;

    },


    fnCheckboxChange(key){
       
    }

  },
  computed: {
    
  },
};
</script>

<style>
  .pointer {
    /* 마우스포인터를 손모양으로 변경 */
    cursor: pointer;
  }

  .style_completed {
    /* 할 일의 제목을 취소선으로 변경 */
    text-decoration: line-through;
  }
</style>

 

 

 

 

 

 

 

 

 

2. vue 파이어 베이스 실시간 데이터 베이스  3분안에  연동 ,

파이어 베이스 DB 준비하기

 

파이어베이스 공식 문서 참조

 

https://firebase.google.com/docs/database/web/start?hl=ko

 

 

파이어베이스 실시간 데이터 베이스 설정

 

다음과 같이 데이터 베이스 만들기를 클릭한다

 

 

데이터 베이스 지역  설정

 

 

테스트모드에서 시작 설정

 

 

 

위와 같이 하면 파이어베이스 실시간 데이터 베이스 설정 완료 된 것이다.

 

 

 

 

 

다음을 통해   databaseURL 값을  알아내야 한다.

 

 

 

다음 톱니바퀴  버튼을 클릭후 맨 아래로 내리면 

 

 

 

파이어베이스  SDK 설정  및  구성 값을 알아 낼 수 있다.

 

 

 

 

 

 

src/datasources/firebase.js 을 생성후 다음과 같이 작성

// 파이어베이스 앱 객체 모듈 가져오기
import firebase from 'firebase/compat/app'
// 파이어베이스 패키지 모듈 가져오기
import 'firebase/compat/database';

// 파이어베이스 DB를 초기화하고 연결
const oDB = firebase.initializeApp({
  // 파이어베이스 콘솔에서 복사하여 붙여넣기
  //databaseURL: "https://pwa-to-do.firebaseio.com",
  databaseURL: "https://pwa-to-do-33db2.firebaseio.com",
}).database();

// 파이어베이스 DB객체 중에서 todos 항목을 다른 곳에서 사용하도록 공개
export const oTodosinDB = oDB.ref('todos');

 

 

 

src/main.js    에서 다음 과 같이 수정한다.

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import vuetify from "./plugins/vuetify";

//뷰파이어 노드 모듈 가져와서 Vue 에 연결
import { rtdbPlugin } from "vuefire";
Vue.use(rtdbPlugin);

Vue.config.productionTip = false;

new Vue({
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

 

뷰파이어 연결

뷰파이어를 사용하면 파이어베이스의 RTDB(realtime database) 와 파이어스토어 (클라우드 스토어 ) 등 두가지 DB 형식을 뷰 애플리케이션과 연결할 수 있도록 돕는

플러그인을 제공한다. 

여기서는 RTDB 를 사용할 것이므로 rtdbplugin 을 모듈을 가져와서 뷰어 연결한다.

 

 

 

 

 

 

oTodosinDB는 루트 노드이고 child(pKey) 를 사용하면 원하는 자식 노드를 바로 선택할 수있다.

 

 

 

 

 

 

 

 

 

 

 

 

1) 파이어베이스 DB 가져오기

//파이어베이스 DB 가져옴
import { oTodosinDB } from './datasources/firebase';

 

2) 목록 불러오기

    data () {
      return {
        oTodos:[], //할일 데이터 목록 저장 변수
        sTodoTitle:"", //할일 제목 저장 문자열 변수

        // items: [
        //   {key:1, todo_title: 'Real-Time' , b_edit:false, b_completed:false},
        //   {key:2, todo_title: 'Audience' , b_edit:false , b_completed:false},
        //   {key:3, todo_title: 'Conversions' , b_edit:false, b_completed:false},
        //   {key:4, todo_title: 'Conversions' , b_edit:true, b_completed:false},
        // ],

        }
    },

    //파이어베이스를 쉽게 사용하도록 oTodos 변수로 변경
    firebase:{
      oTodos:oTodosinDB
    },

 

 

3)등록하기

      //할일 추가 폼 버튼 클릭시
      fnsubmitTodo(){
        if(!this.sTodoTitle){
          window.alert("할일을 입력해 주세요.");
          return;
        }

        //할일 제목 , 완료 수정 모드 상탯값을 파이어베이스 DB 에 저장
        oTodosinDB.push({
          todo_title: this.sTodoTitle,
          b_completed: false,
          b_edit: false
        });
        this.sTodoTitle="";
      },

 

 

 

4) 수정하기

      //수정 - 수정후 저저장 버튼 클릭시
      fnSaveEditTodo(pItem){
        const sKey=pItem['.key']

        oTodosinDB.child(sKey).set({
          todo_title:pItem.todo_title,
          b_completed:pItem.b_completed,
          b_edit:false
        });

      },

 

 

 

 

5)삭제하기

 //삭제 - 삭제 버튼 클릭시
      fnRemoveTodo(key){
        //전달된 할일 DB 에서 제거
        oTodosinDB.child(key).remove();
      },

 

 

 

 

전체 코드

App.vue

  <template>
    <v-app>
      <v-card>
          <v-app-bar dark color="pink">
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-toolbar-title>To-Do 리스트</v-toolbar-title>
          </v-app-bar>

        <v-main>
            <v-container>
              <v-row my-5>
                  <v-col cols="8"  offset="1"  >
                      <!-- 실행되자마자 입력 포커스를 가지도록 autofocus 설절 -->
                      <v-text-field   label="할 일" required autofocus v-model="sTodoTitle"  >   
                      </v-text-field>       
                  </v-col>
                  <v-col cols="2">
                    <v-btn  fab class="mx-2"  dark   color="pink"  @click="fnsubmitTodo()" >
                      <v-icon dark>mdi-plus</v-icon>
                    </v-btn>
                  </v-col>
              </v-row>


              <v-row>
                  <v-col cols="12" >

                    <v-list two-line  v-for="(item, i) in oTodos"  :key="i">
              
                          <v-card flat color="grey lighten-3"  v-if="!item.b_edit">
                              <v-list-item-group>
                                <v-list-item class="py-2">
                                  <template >
                                    <v-list-item-action>
                                      <v-checkbox v-model="item.b_completed"  @change="fnCheckboxChange(item)"></v-checkbox>
                                    </v-list-item-action>

                                    <v-list-item-content>
                                      <v-list-item-title v-text="item.todo_title" :class="{'style_completed':item.b_completed}"></v-list-item-title>
                                      <v-list-item-subtitle class="mt-2">

                                          <v-icon class="pointer" @click="fnSetEditTodo(item['.key'])">create</v-icon>
                                          <v-icon class="pointer" @click="fnRemoveTodo(item['.key'])">delete</v-icon>

                                      </v-list-item-subtitle>
                                    </v-list-item-content>
                                  </template>
                                </v-list-item>
                              </v-list-item-group>  
                        </v-card>


                        <v-card v-else dark>
                              <v-list-item-group>
                                <v-list-item class="py-2">
                                  
                                  <template v-slot:default="{ active }">
                                    <v-list-item-action>
                                      <v-checkbox v-model="item.b_completed"  @change="fnCheckboxChange(item)"></v-checkbox>
                                    </v-list-item-action>

                                    <v-list-item-content >

                                      <v-col cols="11"   >
                                          <v-text-field v-model="item.todo_title"   color="blue darken-2"  autofocus clearable   
                                            required
                                          ></v-text-field>
                                    
                                      </v-col>
                                      <v-col cols="1"   >
                                        <v-list-item-subtitle class="mt-2">
                                          <v-icon class="pointer" @click="fnSaveEditTodo(item)">save</v-icon>
                                          <v-icon class="pointer" @click="fnCancelEdit(item['.key'])">cancel</v-icon>
                                        </v-list-item-subtitle>
                                      </v-col>

                                    </v-list-item-content>



                                  </template>
                                </v-list-item>
                              </v-list-item-group>  
                        </v-card>




                    </v-list>
                  </v-col>
                  
              </v-row>



            </v-container>
        </v-main>
    </v-card> 
    </v-app>
  </template>

  <script>
//파이어베이스 DB 가져옴
import { oTodosinDB } from './datasources/firebase';

console.log(" oTodosinDB  : " ,oTodosinDB);
  export default {
    name: 'App',
    


    data () {
      return {
        oTodos:[], //할일 데이터 목록 저장 변수
        sTodoTitle:"", //할일 제목 저장 문자열 변수

        // items: [
        //   {key:1, todo_title: 'Real-Time' , b_edit:false, b_completed:false},
        //   {key:2, todo_title: 'Audience' , b_edit:false , b_completed:false},
        //   {key:3, todo_title: 'Conversions' , b_edit:false, b_completed:false},
        //   {key:4, todo_title: 'Conversions' , b_edit:true, b_completed:false},
        // ],

        }
    },

    //파이어베이스를 쉽게 사용하도록 oTodos 변수로 변경
    firebase:{
      oTodos:oTodosinDB
    },

    methods: {
      //할일 추가 폼 버튼 클릭시
      fnsubmitTodo(){
        if(!this.sTodoTitle){
          window.alert("할일을 입력해 주세요.");
          return;
        }
        // const data= {
        //       key:new Date().getTime(), 
        //       todo_title:this.sTodoTitle ,
        //       b_edit:false, 
        //       b_completed:false
        //     }
        // this.items.push(data);

        //할일 제목 , 완료 수정 모드 상탯값을 파이어베이스 DB 에 저장
        oTodosinDB.push({
          todo_title: this.sTodoTitle,
          b_completed: false,
          b_edit: false
        });
        this.sTodoTitle="";
      },
      

      //수정 버튼 클릭시
      fnSetEditTodo(key){
        // this.items.map(item=>{
        //     if(item['.key']===key){
        //       item.b_edit=true
        //     }
        // });
        oTodosinDB.child(key).update({
            b_edit:true
        })
      },

      //수정 - 수정후 저저장 버튼 클릭시
      fnSaveEditTodo(pItem){
        // this.items.map(item=>{
        //     if(item['.key']===key){
        //       item.b_edit=false
        //     }
        // });
        const sKey=pItem['.key']

        oTodosinDB.child(sKey).set({
          todo_title:pItem.todo_title,
          b_completed:pItem.b_completed,
          b_edit:false
        });

      },


      //취소버튼 클릭시
      fnCancelEdit(key){
        // this.items.map(item=>{
        //     if(item['.key']===key){
        //       item.b_edit=false
        //     }
        // });
        oTodosinDB.child(key).update({
            b_edit:false
        })
      },

      //삭제 - 삭제 버튼 클릭시
      fnRemoveTodo(key){
        // const result=this.items.filter((item)=>(item['.key']!==key));   
        // this.items=result;

        //전달된 할일 DB 에서 제거
        oTodosinDB.child(key).remove();
      },

      //체크박스 선택 되면 DB 에 b_completed 변경값 저장
      fnCheckboxChange(pItem){
        const sKey =pItem['.key']
        oTodosinDB.child(sKey).update({
          b_completed:pItem.b_completed
        })
      }

    },


    mounted() {
      document.title = 'Todo 할일'
    }
  };
  </script>

  <style>
    .pointer {
      /* 마우스포인터를 손모양으로 변경 */
      cursor: pointer;
    }

    .style_completed {
      /* 할 일의 제목을 취소선으로 변경 */
      text-decoration: line-through;
    }
  </style>

 

 

 

 

 

 

 

수정모드에서  set() 함수와 update() 함수 차이

수정 모드에서 수정한 내용을 저장하려면 update() 함수가 아니라 set() 함수를 사용한다.

그 이유는 set() 함수는 update() 함수와 달리 하위 노드도 모두 영향을 주는 , 좀 더 큰 수정 기능이기 때문이다.

 

 

    //수정 - 수정후 저저장 버튼 클릭시
      fnSaveEditTodo(pItem){

        const sKey=pItem['.key']

        oTodosinDB.child(sKey).set({
          todo_title:pItem.todo_title,
          b_completed:pItem.b_completed,
          b_edit:false
        });

      },


      //취소버튼 클릭시
      fnCancelEdit(key){

        oTodosinDB.child(key).update({
            b_edit:false
        })
      },

 

 

 

 

 

 

 

 

 

 

vue

 

about author

PHRASE

Level 60  라이트

산밑 집에 방앗공이 놀다 , 그 고장의 산물이 오히려 그 곳에서는 귀하다는 말.

댓글 ( 4)

댓글 남기기

작성
Vue.js Examples Vue.js




Vue.js Examples Vue.js Examples






Vue.js Examples vuetifyjs




vue 목록    more

? Copyright 2016 JunHo | Powered by Codeigniter | Powered by jQuery Rain

| Powered by Bootstrap

macaronics.net 는 그어떠한 동영상, 이미지, 파일등을 직접적으로 업로드 제공을 하지 않습니다. 페이스북, 트위터 등 각종 SNS 처럼 macaronics.net 는 웹서핑을 통하여 각종 페이지위치등을 하이퍼링크, 다이렉트링크, 직접링크등으로 링크된 페이지 주소만을 수집 저장하여 제공하고 있습니다. 저장된 각각의 주소에 연결된 페이지등은 그 페이지에서 제공하는 "서버, 사이트" 상황에 따라 페이지와 내용이 삭제 중단 될 수 있으며 macaronics.net 과는 어떠한 연관 관련이 없음을 알려드립니다. 또한, 저작권에 관련된 문제있는 글이나 기타 저작권에 관련된 문제가 있는 것은 연락주시면 바로 삭제해 드리겠습니다.

개인정보 처리방침 | 서비스 이용약관

관리자 문의: braverokmc79@gmail.com 혹은 가입후 관리자 1:1 게시판