주요 내용
Pinia는 단순성과 사용 편의성에 대한 변함없는 노력이 특징인 Vue.js를 사용하여 구축된 애플리케이션의 상태를 관리하기 위한 포괄적인 라이브러리입니다. 이 라이브러리는 디자인과 기능 모두에서 미니멀리즘을 우선시하여 개발자가 웹 애플리케이션을 구축할 때 직관적이고 간소화된 경험을 제공합니다.
Pinia의 기본 원칙은 게터, 액션, 저장소 및 상태를 포괄하여 Vue 컴포넌트 내에서 효율적인 데이터 관리 및 공유를 용이하게 합니다.
Pinia는 Vue의 반응형 특성을 활용하고 엄격한 유형 검사 및 TypeScript 통합을 제공하여 오류를 줄이면서 보다 안정적인 애플리케이션을 개발할 수 있으므로 Vuex와 비교할 때 보다 현대적이고 실용적인 접근 방식을 제시합니다. 따라서 새로 시작하는 프로젝트와 Vuex에서 마이그레이션하려는 프로젝트 모두에게 매력적인 선택이 될 수 있습니다.
Vue.js의 열렬한 추종자로서 애플리케이션의 상태를 쉽게 관리하는 데 어려움을 겪은 적이 있으신가요? 그렇다면 좋은 소식을 전해드립니다! Pinia 소개,
Pinia의 기본 원칙에 대한 포괄적인 검토를 통해 Pinia의 기능과 잠재력을 이해할 수 있습니다. 피니아와 벡스의 비교와 함께 기본 피니아 애플리케이션을 만드는 방법도 제공됩니다.
피니아란 무엇인가요?
Pinia는 Vue 프로젝트에 탁월한 수준의 단순성과 효율성을 제공하는 것을 목표로 Vue와 함께 사용하기 위해 특별히 세심하게 제작된 고도로 전문화된 라이브러리입니다. 가장 성공적인 현대적 상태 관리 방법의 영향을 받은 이 라이브러리는 놀랍도록 가볍고 기존 애플리케이션에 쉽게 통합할 수 있는 기능을 유지하면서 Vue 개발자에게 원활하고 손쉬운 경험을 제공하기 위해 개발되었습니다.
Pinia는 디자인에서 단순함과 우아함을 중시하는 철학적 원칙을 구현합니다. 개발자가 사용자에게 의미 있는 경험을 제공하는 데 집중할 수 있도록 애플리케이션의 상태 관리 프로세스를 간소화하는 것이 목표입니다. 피니아는 간단하고 사용자 친화적인 접근 방식을 채택함으로써 개발자가 쉽게 목표를 달성하는 동시에 Vue 앱을 통해 뛰어난 사용자 경험을 제공할 수 있도록 지원합니다.
피니아 핵심 개념
피니아를 활용함으로써 얻을 수 있는 이점을 극대화하려면 기본 원칙에 대한 이해가 필수적입니다.
게터
Pinecone의 게터는 스토어 상태로부터 특정 값을 검색하고 전파하는 역할을 합니다. 게터를 구현하면 스토어의 기본 상태에 직접 간섭하지 않고도 정보를 검색하고 처리할 수 있습니다.스토어 상태와 함께 작동하도록 특별히 설계된 계산된 속성으로 간주할 수 있습니다.
액션
Pinecone 내에서 수행되는 액션은 스토어 상태를 비동기 및 동기식으로 모두 수정할 수 있는 가장 중요한 요소입니다. 이러한 작업은 애플리케이션의 다양한 구성 요소 간의 중개자 역할을 하며, 상태 변경에 대한 정해진 지침과 패턴화된 동작을 준수하도록 촉진합니다.
스토어
스토어는 현재 상태, 페처, 활동, 돌연변이(해당되는 경우)를 포괄하는 Pina의 진원지 역할을 하며 모든 구성 요소에서 애플리케이션 상태의 일관성을 유지하기 위한 권위 있는 저장소 역할을 합니다. 이를 통해 애플리케이션의 상태를 집중적으로 유지하고 프로그램의 다양한 부분 내에서 쉽게 액세스할 수 있도록 지원합니다.
상태
“상태”라는 용어는 스토어에서 관리하고 있는 정보를 나타냅니다. 이 정보는 컴포넌트가 최종 사용자에게 업데이트된 세부 정보를 표시하기 위한 반응물 역할을 합니다. 스토어 내에서 상태 객체를 활용하면 여러 컴포넌트 간에 데이터를 손쉽게 관리하고 공유할 수 있습니다.
Vuex는 어떻습니까?
Pinia와 Vuex는 모두 상태 관리 라이브러리로, Vue.js 개발자들 사이에서 인기를 얻고 있는 라이브러리입니다. 그러나 Vuex가 안정적이고 강력한 옵션으로 인상적인 실적을 자랑하는 반면, Pinia는 현대적이고 간소화된 철학을 채택하여 차별화됩니다.
Pinia 에코시스템 내에서 상태를 관리하기 위해 Vue의 반응형 프레임워크를 활용하면 추가적인 종속성이 필요 없는 간소화된 경험을 보장합니다. 그 결과 Pinia 환경은 높은 수준의 집중도를 유지하여 원치 않는 확장이나 과도한 복잡성의 위험을 최소화합니다. 또한 엄격한 유형 검사 및 TypeScript 지원이 포함되어 있어 개발자가 개발 초기 단계에서 오류를 식별하고 수정할 수 있으므로 궁극적으로 버그 수가 줄어들어 더욱 안정적인 애플리케이션을 개발할 수 있습니다.
Pinia는 유연성과 견고성을 유지하면서 상태 관리를 간소화하기 때문에 새로운 Vue 프로젝트를 시작하거나 Vuex에서 전환을 고려하는 사용자에게 매력적인 옵션입니다.
Pinia를 사용한 간단한 Vue 앱
Pinia에 익숙해지는 과정은 테스트 애플리케이션, 특히 간단한 할 일 목록 관리자를 구성하여 수행할 수 있으며, 이는 훌륭한 시작점이 될 수 있습니다. 이러한 유형의 프로그램은 사용자가 작업을 생성, 추적 및 완료할 수 있는 기본 아키텍처를 갖추고 있으며 필요에 따라 작업 항목을 쉽게 수정 및 삭제할 수 있습니다.Pinia는 이러한 유형의 프로그램의 내부 상태를 관리하기 위한 포괄적인 리소스 세트를 제공합니다.
전제 조건
작업을 시작하려면 Vue CLI를 시작하여 적절한 환경을 조성하는 것이 필수적입니다.
# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app
터미널을 검사한 결과, 사전 구성된 옵션을 선택해야 하는 것으로 확인되었습니다. 이 경우 기본 설정으로 Vue 3을 사용하는 것이 권장되며 이후에는 이를 수행합니다.
프로젝트 폴더에 Pinia를 설치하려면 다음 단계를 따르세요: 1. 컴퓨터에서 터미널 또는 명령 프롬프트를 열고 프로젝트가 있는 디렉토리로 이동합니다. 2. 디렉토리에서 다음 명령을 실행합니다: ‘pip 설치 Pinia`. 그러면 Pinia에 필요한 패키지가 다운로드되고 설치됩니다. 3. 설치가 완료되면 파이썬 스크립트 시작 부분에 `from pinia import app`을 추가하여 Pinia를 가져와서 사용할 수 있습니다.
cd pinia-todo-app
npm install pinia
파일 설정
이 샘플 프로젝트는 몇 가지 문서만 수정하면 완성됩니다.
할 일 목록에서 작업을 추가, 삭제, 관리하는 기능을 구현하기 위해서는 “src” 디렉토리에 “store.js”라는 이름의 자바스크립트 파일을 만들어야 합니다. 이 파일은 애플리케이션의 상태를 조작하는 방법을 통합하여 사용자가 새 작업 추가, 기존 작업 제거, 완료된 작업의 상태 업데이트와 같은 작업을 수행할 수 있도록 함으로써 Pina의 기본 원칙을 활용합니다.
// src/store.js
import { defineStore } from "pinia";
export const useTodoStore = defineStore("todo", {
state: () => ({
todos: [],
}),
actions: {
addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
},
removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
},
},
});
앞서 언급한 코드 스니펫이 제대로 작동하려면 다른 파일과의 통합이 필요합니다. store.js 파일을 App.vue와 연결하려면 후자를 수정해야 합니다. 구체적으로, src/App.vue 파일의 내용을 적절히 조정해야 합니다.
// src/App.vue
<script>
import { useTodoStore } from './store';
export default {
data() {
return {
todoText: '',
};
},
computed: {
todos() {
return useTodoStore().todos;
},
},
methods: {
addTodo() {
if (this.todoText.trim() !== '') {
useTodoStore().addTodo(this.todoText);
this.todoText = '';
}
},
removeTodo(todoId) {
useTodoStore().removeTodo(todoId);
},
},
};
</script>
이 개념의 물류는 비교적 간단합니다. store.js 내에서 지정한 기능은 App.vue에 명시된 사양에 따라 전개됩니다. 본질적으로 App.vue는 전체 애플리케이션에 대한 관리 메커니즘 역할을 합니다.
앞서 언급한 내용은 사전 정의된 템플릿과 스타일 요소를 통합하지 않으면 애플리케이션에 실질적인 내용이 부족하다는 것을 시사합니다. 그러나 이러한 구성 요소는 App.vue 파일을 특정 방식으로 변경하여 추가할 수 있습니다.
// src/App.vue
<template>
<div>
<h1>My Pinia Todo List</h1>
<input v-model="todoText" @keyup.enter="addTodo"
placeholder="What is your goal?" />
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }} <button @click="removeTodo(todo.id)">Done!</button>
</li>
</ul>
</div>
</template>
<script>
import { useTodoStore } from './store';
export default {
data() {
return {
todoText: '',
};
},
computed: {
todos() {
return useTodoStore().todos;
},
},
methods: {
addTodo() {
if (this.todoText.trim() !== '') {
useTodoStore().addTodo(this.todoText);
this.todoText = '';
}
},
removeTodo(todoId) {
useTodoStore().removeTodo(todoId);
},
},
};
</script>
<style>
// Your styles...
</style>
마지막 단계는 애플리케이션의 올바른 작동에 필수적인 구성 요소를 통합하여 src 폴더 내에 있는 main.js 파일을 업데이트하는 것입니다.
// src/main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount("#app");
애플리케이션 테스트에 필요한 모든 구성 요소가 정상적으로 작동하는 것으로 확인되었습니다.
예제 Pinia 앱 실행
앞서 언급한 지시어를 사용하여 이 간단하지만 깨달음을 주는 명령어 집합의 결과를 볼 수 있습니다.
npm run serve
사용자 앞에 표시되는 인터페이스는 복잡하지 않고 흠 잡을 데 없는 인터페이스이므로 작업을 쉽게 추가하거나 제거할 수 있습니다.
피니아는 얼마나 유용한가요?
Pinia는 반응성, 유형 안전성 및 모듈식 아키텍처를 제공하여 데이터 흐름을 간소화하는 애플리케이션입니다. 이러한 기능은 상태 관리를 간소화하고 생산성을 향상시킵니다.
Pinia를 채택하는 것은 포괄적인 문서와 강력한 커뮤니티 지원을 고려할 때 신중한 결정이며, 최소한의 노력으로 확장 가능하고 유지 관리가 가능한 Vue 프로젝트를 생성할 수 있습니다.