이 코드는 "remove-todo"라는 사용자 지정 이벤트의 인스턴스를 생성하며, 이 이벤트는 "할 일" 배열 내에서 대상 항목의 인덱스를 나타내는 식별자로 구성된 페이로드와 함께 발송됩니다. 이를 통해 제공된 인덱스 값을 사용하여 지정된 위치에서 해당 배열에서 특정 항목을 제거할 수 있습니다.

사용자 인터페이스에서 지정된 영역을 누르면 특정 요소에 의해 신호가 해제되어 감독 프레임워크 내에서 독점적인 상황이 시작됩니다. 이 발생은 클라이언트가 제어에 참여했음을 의미하며, 결과적으로 App.vue에 있는 감독 템플릿에 설명된 미리 결정된 프로세스가 활성화됩니다.

애플리케이션 만들기 €™의 보기 구성 요소

앱 구성 요소는 Todo 애플리케이션의 전반적인 기능을 관리하기 위한 중앙 허브 역할을 하며, 특히 새 작업을 추가하고 이를 Todo 구성 요소의 형태로 표시하는 프로세스를 처리합니다. 이 기능에 액세스하려면 프로젝트의 소스 코드 내에서 App.vue 파일로 이동하세요.

{ ...mapGetters(['posts']) }, methods: { ...mapActions(['fetchPosts']), formatDate(date) { const year = date.getFullYear() const month = ('0' + (date.getMonth() + 1)).slice(-2) const day = ('0' + date.getDate()).slice(-2) 반환 `${년}-${월}-${일}` } } } “`

 <!-- App.vue -->
<script setup>
import Todo from "./components/Todo.Vue";
import { ref } from "vue";

const newTodo = ref("");
const todos = ref([]);

const addTodo = () => {
  if (newTodo.value.trim() === "") return;
  todos.value.push({ text: newTodo.value });
  newTodo.value = "";
  saveToLocalStorage();
};

const removeTodo = (key) => {
  todos.value.splice(key, 1);
  saveToLocalStorage();
};

const saveToLocalStorage = () => {
  localStorage.setItem("todos", JSON.stringify(todos.value));
};

const savedTodos = localStorage.getItem("todos");

if (savedTodos) {
  todos.value.push(...JSON.parse(savedTodos));
}
</script>
 

앞서 언급한 코드 발췌문은 App.vue 컴포넌트에 내재된 기능을 보여주는데, 여기에는 Todo 컴포넌트의 가져오기 및 초기화와 함께 반응형 데이터 구조를 설정하기 위해 Vue Composition API를 사용하는 기능이 포함되어 있습니다.

Todo 컴포넌트와 ref 함수를 각각의 소스에서 가져오는 것으로 시작하겠습니다. 구체적으로, Vue 내의 지정된 경로에서 가져옵니다.

초기화 시 이 코드는 사용자가 입력한 작업에 대한 버퍼 역할을 하는 “newTodo”라는 리액티브 문자열을 생성합니다. 또한 사용자의 작업 목록을 보관하기 위해 “todos”라는 빈 리액티브 배열을 설정합니다.

`addTodo` 함수는 사용자 확인 시 새로 입력된 작업을 `todos` 배열에 추가합니다. 이 기능의 목적은 사용자가 새 작업을 추가할 때마다 다시 입력할 필요 없이 한 번에 여러 작업을 입력할 수 있도록 하는 것입니다. 확인이 완료되면 다른 빈 줄이 감지되거나 사용자가 “지우기” 버튼을 클릭하는 등 필드를 지우기 위한 명시적인 조치를 취할 때까지 `newTodo` 필드에 추가 입력은 무시됩니다.

`addTodo` 함수는 브라우저의 로컬 저장소에 `todos` 배열을 저장하는 `saveToLocalStorage` 함수를 트리거합니다. 이 작업을 수행하기 위해 코드에서는 `setItem` 메서드를 사용하여 `todos` 배열을 저장하기 전에 JSON 문자열로 변환합니다.

애플리케이션은 ‘키’라고 하는 고유 식별자를 입력으로 받아들이는 removeTodo 함수로 구성되어 있습니다. 이 특정 키는 지정된 “할 일” 배열에서 관련 작업을 삭제하는 데 사용됩니다. 삭제에 성공하면 removeTodo 함수는 saveToLocalStorage 프로세스를 활성화하여 로컬 스토리지에 저장된 정보를 수정합니다.

마지막으로, 이 코드는 로컬 스토리지에서 제공하는 `getItem` 함수를 활용하여 `todos` 키를 사용하여 이전에 저장된 작업을 검색합니다. 브라우저의 LocalStorage에 저장된 작업이 있으면 `todos` 배열에 추가됩니다.

“App” 컴포넌트의 시각적 표현을 설정하려면 Vue 애플리케이션의 루트 요소의 `