Vue.js 로 작업 관리자 만들기

소개

이 프로젝트에서는 Vue.js 를 사용하여 간단한 작업 관리자 애플리케이션을 구축하는 방법을 배우게 됩니다. 이 작업 관리자를 통해 일일 작업을 생성, 삭제하고 추적하여 시간 관리 전문가가 될 수 있습니다.

👀 미리보기

🎯 작업

이 프로젝트에서 다음을 배우게 됩니다:

• Vue.js 환경 설정 방법
• 페이지 로드 시 기본적으로 "No data" 표시 방법
• 작업 목록에 작업 추가 방법
• 작업 목록에서 작업 삭제 방법
• 총 작업 수 표시 방법
• 전체 작업 목록 지우는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• 처음부터 Vue.js 애플리케이션 생성
• Vue.js 디렉티브 및 데이터 바인딩 사용
• 기본적인 CRUD (Create, Read, Update, Delete) 기능 구현
• 사용자 상호 작용 처리 및 UI 업데이트

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
│   └── style.css ## 페이지 스타일 파일
├── img
│   └── icon.png ## 페이지에 필요한 작은 아이콘
├── js
│    └── vue.js ## Vue.js 프레임워크 버전 2.x
└── index.html ## 페이지 레이아웃 및 로직 코딩 파일

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

현재 표시는 정적 레이아웃일 뿐이며 특정 기능을 구현하지 않습니다.

기본적으로 '데이터 없음' 표시

이 단계에서는 페이지가 로드될 때 기본적으로 "No data"를 표시합니다.

1. index.html 파일에서 Vue 인스턴스의 data 객체를 el: "#box", 아래에 추가하여 todoList 배열을 포함하도록 합니다:

data: {
  todoList: [],
}

2. HTML 구조에서 <ul class="list"></ul>의 모든 코드를 제거합니다. 그런 다음 todoList 배열이 비어 있으면 "No data"를 표시하는 조건부 렌더링을 추가합니다:

<ul class="list">
  <li v-if="!todoList.length">No data</li>
  <!-- TODO: Add task list items here -->
</ul>

3. index.html 파일을 저장하고 페이지를 새로 고칩니다. "No data" 메시지가 표시되어야 합니다. 최종 구현 효과는 다음과 같습니다:

할 일 목록에 작업 추가

이 단계에서는 작업 목록에 작업을 추가합니다.

1. index.html 파일에서 HTML 구조에 입력 필드와 "Confirm" 버튼을 추가합니다:

<div class="input">
  <span>content</span>
  <input
    type="text"
    v-model="search"
    placeholder="Please enter what you're going to do"
  />
  <span id="add" @click="addTodo">Confirm</span>
</div>

2. Vue 인스턴스에서 search 데이터 속성과 addTodo 메서드를 추가합니다:

data: {
  todoList: [],
  search: ""
},
methods: {
  addTodo() {
    this.todoList.push(this.search);
    this.search = "";
  },
}

3. index.html 파일을 저장하고 페이지를 새로 고칩니다. 입력 필드에 텍스트를 입력하고 "Confirm" 버튼을 클릭하여 목록에 새 작업을 추가할 수 있어야 합니다. 최종 구현 효과는 다음과 같습니다:

할 일 목록에서 작업 삭제

이 단계에서는 작업 목록에서 작업을 삭제하는 기능을 추가합니다.

1. index.html 파일에서 각 작업 항목에 "Delete" 아이콘을 추가합니다:

<li v-if="!todoList.length">No data</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- Preceding serial number -->
  <span class="number">{{index + 1}}</span>
  <!-- List content -->
  <span>{{todo}}</span>
  <!-- Delete button -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

2. Vue 인스턴스에서 deleteTodo 메서드를 추가합니다:

methods: {
  // ...
  deleteTodo(index) {
    this.todoList.splice(index, 1);
  },
}

3. index.html 파일을 저장하고 페이지를 새로 고칩니다. "Delete" 아이콘을 클릭하여 목록에서 작업을 제거할 수 있어야 합니다. 최종 구현 효과는 다음과 같습니다:

총 작업 수 표시

이 단계에서는 작업 목록에 있는 총 작업 수를 표시합니다.

1. HTML 구조에서 작업 목록 하단에 "Total" 섹션을 추가합니다:

<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- ... -->
</li>
<li v-if="todoList.length">
  <b> Total: {{todoList.length}} </b>
  <!-- ... -->
</li>

2. index.html 파일을 저장하고 페이지를 새로 고칩니다. 목록 하단에 총 작업 수가 표시되는 것을 확인할 수 있습니다.

작업 목록 초기화

이 단계에서는 전체 작업 목록을 지우는 기능을 추가합니다.

1. Vue 인스턴스에서 clear 메서드를 추가합니다:

methods: {
  // ...
  clear() {
    this.todoList = [];
    this.search = "";
  }
}

2. HTML 구조에서 "Total" 섹션에 "Clear" 버튼을 추가합니다:

<!-- ... -->
<li v-if="todoList.length">
  <b> Total: {{todoList.length}} </b>
  <b id="clear" @click="clear">Clear</b>
</li>

3. index.html 파일을 저장하고 페이지를 새로 고칩니다. "Clear" 버튼을 클릭하여 목록에서 모든 작업을 제거할 수 있어야 합니다.

축하합니다! Vue.js 를 사용하여 Time Management Master 프로젝트를 완료했습니다. 최종 구현 효과는 다음과 같습니다:

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.