80. Reviewing the Pinia Configuration

vue cli start 링크open in new window

npm create vue@latest

프로젝트 링크

이번엔 프로젝트에서 Pinia 라이브러리의 구성을 검토할 것입니다.
일반적으로 첫 단계는 패키지를 설치하는 것입니다.
다행히도, 이 단계는 건너뛸 수 있습니다.
create vue 패키지가 이미 이 패키지를 설치해 주었기 때문입니다.
혹시 수동으로 이 패키지를 설치해야 할 경우에는

npm i pinia

명령어를 실행하면 됩니다.
이 패키지를 설치한 후에는 플러그인으로 등록해야 합니다.
잠시 멈추고 플러그인에 대해 이야기해봅시다.

plugin

플러그인은 그 이름이 말해주듯이, Vue 애플리케이션을 추가 기능으로 확장할 수 있습니다.
대부분의 경우에는 애플리케이션 개발을 돕기 위해 제 3자 라이브러리를 다운로드할 것입니다.
Vue는 플러그인 API를 제공하여 다른 라이브러리가 Vue를 확장할 수 있는 방법을 제공합니다.
플러그인은 거의 모든 것을 할 수 있습니다.
프로젝트에서 플러그인을 설치하는 데는 두 단계가 있습니다.

첫째, 플러그인을 가져와야 합니다.
둘째, 플러그인을 등록해야 합니다.
모든 플러그인은 Vue 인스턴스가 생성되기 전에 등록되어야 합니다.
그렇지 않으면 플러그인이 제공하는 모든 기능에 접근하지 못할 수 있습니다.
main.js 파일을 열어보겠습니다.
Vue에 의해 생성된 파일은 이전과 다릅니다.

// main.ts
import './assets/base.css'
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

createApp과 mount 함수 사이에 추가적인 코드가 있습니다.
플러그인을 등록하는 것은 인스턴스를 마운트하기 전에 수행되어야 합니다.
use 메서드를 사용하여 플러그인을 등록할 수 있습니다.
여기서 플러그인의 책임은 Vue를 확장하는 것입니다.
플러그인을 등록하는 것은 use 함수에 객체를 전달하는 것만큼 간단합니다.
이 경우에는 Router와 Store라는 두 개의 플러그인이 등록되고 있습니다.
router 객체는 다음에 말해보도록 하겠습니다.

createPinia 함수에 초점을 맞추겠습니다.
이 함수는 Vue의 플러그인 API와 호환되는 객체를 반환할 것입니다.
문제는 Pinia가 내부적으로 무엇을 하는가입니다.
Pinia는 Vue 개발자 도구와 플러그인을 등록합니다.
개발자 도구는 완전히 확장 가능합니다.
Pinia 패키지는 상태와 상호작용하는 새로운 도구를 추가할 것입니다.
디버깅에 도움이 필요하다면 항상 플러그인을 등록해야 합니다.
플러그인을 살펴보기 위해 브라우저로 전환해봅시다.
Vue 개발자 도구를 열고 Inspector 섹션에서 다른 도구로 전환할 수 있습니다.
보시다시비 Pinia가 옵션으로 나열되어 있습니다.

이 옵션을 선택하면 애플리케이션의 데이터를 볼 수 있습니다.
현재는 비어 있을 것입니다.

아직 애플리케이션에 상태를 등록하지 않았기 때문입니다.

에디터로 돌아가서 src 디렉토리 내의 stores 폴더를 살펴봅시다.
이 폴더가 stores라고 불리는 이유를 이해하기 전에, 상태 관리에서 사용되는 용어를 파악하는 것이 중요합니다.
store라는 단어는 저장소를 의미합니다.
우리는 store를 창고로 생각할 수 있습니다.
창고는 다양한 아이템을 저장할 수 있습니다.
우리는 음식, 가구 또는 일반 가정용품 등을 저장할 수 있습니다.
창고는 특정 섹션으로 나눠져있을 수 있습니다.
음식은 한 섹션에, 가구는 다른 섹션에 배치될 수 있습니다.
그렇지 않으면, 아이템을 찾기 위해 온 창고를 돌아다녀야 할 것입니다.
상태 관리에도 이와 같은 개념이 적용됩니다.
우리는 데이터를 창고에 넣는 것으로 생각할 수 있습니다.
우리는 사용자, 블로그 게시물 등 다양한 유형의 데이터에 대해 다른 저장소를 가질 수 있습니다.
프로젝트에서 Vue는 이 디렉토리 내에서 store를 정의하는 것을 권장합니다.
필수는 아니지만, 여기선 이 관행을 따를 것입니다.

이 폴더 안에는 counter.ts라는 파일이 있습니다.
이 파일을 열어보겠습니다.

// counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

이 파일에서는 Pinia 패키지에서 defineStore 함수를 가져옵니다.
이 함수는 특별한 유형의 객체를 생성합니다.
이 함수에 의해 생성된 객체는 데이터가 추적됩니다.
Pinia는 전역적으로 사용되도록 의도되었으며, 이는 여러 컴포넌트에서 데이터를 변경할 수 있다는 것을 의미합니다.
변경 사항을 추적하고, 어떤 변경이 적용되어야 하는지 판단하며 다른 컴포넌트에 어떤 것을 전송해야 하는지를 결정하는 것이 중요합니다.
Pinia는 이러한 작업을 쉽게 처리할 수 있습니다.
상태에 변경이 발생하면 모든 컴포넌트가 업데이트에 대해 알림을 받고 상태와 동기화를 유지합니다.
변경 사항이 추적되기 때문에 애플리케이션을 디버깅하는 데 더 쉽게 접근할 수 있습니다.
그래서 이 메소드(defineStore)를 호출해야 합니다.
이 메소드는 상태를 추적하는 특별한 객체를 만듭니다.
이 객체는 스크립트에서 내보내집니다.
객체를 생성하기 전에, state, getters, actions라는 세 가지 추가 객체를 전달하고 있습니다.
각 속성은 강의가 진행됨에 따라 탐색될 것입니다.

counter.ts 파일 삭제

# 80. Reviewing the Pinia Configuration

# plugin

80. Reviewing the Pinia Configuration

plugin