[Project] Vue.js 로 ToDo App 만들기 <#1 add, delete 기능 구현 및 GitHub 호스팅하기>

2021. 4. 21. 09:38

개발환경

$ vue --version
@vue/cli 4.5.12

vscode, windows10

<실시간 결과물>

k-junyyy.github.io/TODO-APP/

todo-app

k-junyyy.github.io

Vue 프레임워크를 사용해보기 위해서 Vue CLI를 통해 프로젝트를 생성해 간단한 ToDo App을 구현해봤습니다. 버튼의 디자인과 같은 CSS의 경우 부트스트랩 CDN을 통해 다운로드하여서 사용했습니다.

<프로젝트 디렉터리 구조>

<기능>

할일을 입력 후 엔터 시 아래의 목록에 추가
delete 버튼 클릭 시 해당 목록 삭제
해당 목록 체크 시 목록에 취소선 및 연하게 표시

<개발 계획>

Todo 목록 수 표시
체크 표시된 것들 삭제 기능(+@ 전체 선택 기능) 구현
전체적인 디자인 꾸미기
목록 수정(Edit) 버튼 및 기능 구현

<코드>

<index.html>

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<App.vue>

<template>
  <div id="app" class="container">
    <h1 class="text-center">ToDo App</h1>
    <input 
      v-model="todoText"
      type="text" 
      class="w-100 p-2" 
      placeholder="Type todo"
      @keyup.enter="addTodo"
    >
    <hr>
    <todo 
      v-for="todo in todos" 
      :key="todo.id"
      :todo="todo"
      @toggle-checkbox="toggleCheckbox"
      @click-delete="deleteTodo"
    />
  </div>
</template>

<script>
import todo from '@/components/todo.vue'
export default {
  components:{
    todo
  },
  data(){
    return{
      todoText:'',
      todos:[
        {id:1, text:'buy a car', checked:false},
        {id:2, text:'play game', checked:false},
      ]
    }
  },
  methods:{
    deleteTodo(id){
      // const index = this.todos.findIndex(todo=>{
      //   return todo.id === id;
      // });
      // this.todos.splice(index,1);
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    addTodo(e){
      this.todos.push({
        id:Math.random,
        text:e.target.value,
        checked:false,
      });
      this.todoText='';
    },
    toggleCheckbox({id,checked}){
      const index = this.todos.findIndex(todo=>{
        return todo.id === id;
      });
      this.todos[index].checked = checked;
    },
  }
}
</script>

<style>

</style>

<todo.vue>

<template>
  <div class="mb-2 d-flex">
    <div>
      <input type="checkbox" :checked="todo.checked"
      @change="toggleCheckbox">
    </div>
      
      <span 
        class="ml-3 flex-grow-1"
        :class="todo.checked ? 'text-muted' : ''"
        :style="todo.checked ? 'text-decoration: line-through' : ''"
      >{{todo.text}}</span>
      <button 
        class="btn btn-danger btn-sm"
        @click="clickDelete"
      >Delete</button>
  </div>
</template>

<script>
export default {
  props:{
    todo:{
      type:Object,
      required:true
    }
  },
  methods:{
    toggleCheckbox(e){
      this.$emit('toggle-checkbox',{
        id:this.todo.id,
        checked:e.target.checked
      })
    },
    clickDelete(){
      this.$emit('click-delete',this.todo.id);
    }
  }
}
</script>

<style>

</style>

<Vue로 작업한 결과물 GitHub로 호스팅 하는 방법>

저의 경우 Git 명령어로 커밋하는 게 익숙지 않아서 git bash에서 git 명령어를 사용하지 않고 깃헙 사이트에서 직접 자료를 업로드하고 브랜치로 커밋해서 호스팅 하였습니다.

1. Vue 작업물을 빌드하기 전에 먼저 프로젝트 폴더의 루트에 vue.config.js 파일을 생성해서 아래와 같이 파일을 저장합니다. (저의 경우 깃헙 저장소 명이 "TODO-APP" 이였기 때문에 해당 자리에 호스팅하고자 하는 저장소명을 삽입합니다.)

<vue.config.js>

  module.exports = {
    publicPath: '/TODO-APP/',
};

2. vscode 터미널에서 "npm run build"를 통해 파일을 빌드합니다.(빌드 결과로 프로젝트 파일에 'dist'라는 파일이 생성됩니다.)

$ npm run build

3. 저장소에 파일을 업로드 후 새로운 브랜치로 커밋하고 페이지 호스팅

main에 커밋이 아닌 새로운 branch 생성하고 branch 이름 입력 (저의 경우 'gh-page')

pages탭에서 아까 커밋한 브랜치로 변경후 Save하면 깃허브 페이지 호스팅 완료

<GitHub Link>

github.com/K-Junyyy/TODO-APP

K-Junyyy/TODO-APP

Contribute to K-Junyyy/TODO-APP development by creating an account on GitHub.

github.com

저작자표시 비영리

'👨🏻‍💻Project' 카테고리의 다른 글

[Project] 네이버 로그인 페이지 제작하기 <#3 JavaScript로 기능 구현 하기> (0)	2021.04.24
[Project] Vue.js 로 ToDo App 만들기 <#2 완성> (0)	2021.04.22
[Project] 네이버 로그인 페이지 제작하기 <#2 CSS로 디자인 하기> (0)	2021.04.11
[Project] 네이버 로그인 페이지 제작하기 <#1 HTML로 뼈대 세우기> (0)	2021.04.01
[HTML] 간단한 회원가입 form 만들기 (0)	2020.12.15

코딩 공부 일지