개발, 프로그래밍 웹 개발 할 일 목록

로컬 스토리지를 사용하여 Vue To-Do 앱을 빌드하는 방법

By이지원

9월 18, 2023

최신 웹 브라우저에 통합된 로컬 저장소 기능을 사용하면 웹 사이트에서 특정 데이터 항목을 개인용 컴퓨터 또는 모바일 장치에 키-값 쌍 형태로 저장하고 검색할 수 있습니다. 이 기능은 사용자가 인터넷 브라우징 애플리케이션을 종료했는지 여부에 관계없이 정보를 지속적으로 저장할 수 있는 효율적인 수단을 제공합니다.

Vue 애플리케이션에서 로컬 스토리지 통합을 활용하면 목록 및 작은 크기의 정보를 포함한 사용자 데이터를 보존할 수 있으므로 다양한 세션 간격에 걸쳐 이러한 데이터의 연속성을 유지할 수 있습니다.

이 튜토리얼을 마치면 데이터 저장 목적으로 로컬 스토리지를 활용하면서 작업을 추가 및 제거할 수 있는 완전히 작동하는 Vue.js 할 일 애플리케이션을 보유하게 됩니다.

Vue 할 일 애플리케이션 설정하기

프로그래밍 작업을 시작하기 전에 각 시스템 또는 장치에 Node.js 및 npm(노드 패키지 관리자)이 설치되어 있는지 확인해야 합니다.

새로운 작업의 개발을 시작하려면 Node Package Manager(npm)를 사용하여 다음 명령을 실행하십시오:

 npm create vue 
 

새 Vue 프로젝트를 설정하기 전에 사용 가능한 사전 설정 또는 템플릿에서 사전 정의된 구성 옵션을 선택하십시오. 이 옵션을 선택하면 지정된 설정에 필요한 종속성을 설치할 수 있습니다.

이 작업 관리 애플리케이션에는 추가 기능이 필요하지 않으므로 제공된 각 옵션에 대해 “아니요”를 선택하는 것이 적절할 것입니다.

프로젝트가 초기화되고 적절하게 구성되면, 로컬 스토리지를 기본 데이터 스토리지 솔루션으로 사용하는 작업 관리 도구 구축을 시작할 수 있습니다.

할 일 애플리케이션 만들기

Vue.js를 사용한 할 일 애플리케이션의 구현을 시연하기 위해 프로젝트 내에서 두 개의 별도 컴포넌트를 개발합니다. 첫 번째 컴포넌트인 App.vue는 전체 애플리케이션의 레이아웃과 구조의 기초 역할을 합니다. 동시에, 할당된 작업의 포괄적인 목록을 표시하도록 특별히 설계된 Todo.vue라는 또 다른 컴포넌트도 설정합니다.

할 일 컴포넌트 만들기

할 일 컴포넌트를 만들기 위해 “src/components/Todo.vue”라는 이름의 새로운 파일을 생성합니다. 이 특정 파일의 주요 기능은 과제 인벤토리의 아키텍처 구성을 조절하는 것입니다.

이 글도 확인해 보세요:  Reqwest로 Rust에서 HTTP 요청 만들기

다음은 토도.vue 파일에 대한 원본 코드 복제의 예입니다. “`php

이 코드는 "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 애플리케이션의 루트 요소의 `