Pinia

Pinia는 Vue.js 애플리케이션을 위한 상태 관리 라이브러리입니다. Vuex의 후계자로 간주되며, Vue 3의 컴포지션 API와 완벽하게 통합되도록 설계되었습니다. 그러나 Vue 2와도 호환되도록 만들어져 있어서 어느 버전의 Vue를 사용하더라도 Pinia를 활용할 수 있습니다.

Pinia의 주요 특징은 다음과 같습니다:

1. 타입스크립트 통합: Pinia는 타입스크립트와 잘 통합되어 있어서, 타입스크립트를 사용하는 Vue 애플리케이션에서 더 나은 개발 경험을 제공합니다.

2. 개발자 친화적: Vue Devtools와 완벽하게 통합되어 상태 변화를 추적하고 시간 여행 디버깅을 할 수 있게 해줍니다.

3. 모듈식 구조: Pinia는 상태, 게터, 액션을 하나의 스토어에서 관리할 수 있도록 모듈식 구조를 제공합니다. 이는 Vuex에서 볼 수 있는 모듈 구조와 비슷하지만, 더 단순하고 사용하기 쉬운 API를 가지고 있습니다.

4. 컴포지션 API 통합: Vue 3의 컴포지션 API와 잘 어울리도록 설계되었기 때문에, reactivity(반응성) 시스템을 최대한 활용할 수 있습니다.

5. 간단한 API: Pinia는 Vuex에 비해 더 간단하고 직관적인 API를 제공합니다. 이로 인해 새로운 사용자가 Vue.js 상태 관리를 더 쉽게 배우고 사용할 수 있습니다.

Pinia를 사용하여 상태를 관리하는 기본적인 방법은 다음과 같습니다:

1. 스토어 생성: defineStore 함수를 사용하여 스토어를 정의합니다. 이 함수는 고유한 ID와 함께 상태, 게터, 액션을 포함하는 객체를 인자로 받습니다.

2. 상태(state) 정의: 스토어의 state는 함수로 정의되며, 함수는 객체를 반환해야 합니다. 이 객체는 스토어의 상태를 나타냅니다.

3. 게터(getters) 정의: 계산된 상태를 만들기 위해 게터를 사용할 수 있습니다. 게터는 state에 의존하는 함수로, 마치 계산된 속성(computed properties)처럼 작동합니다.

4. 액션(actions) 정의: 비동기 로직이나 여러 상태 변경을 처리하기 위해 액션을 정의할 수 있습니다. 액션은 메서드로서, 스토어의 상태를 변경하는 커밋(commit)을 수행할 수 있습니다.

Pinia 스토어는 Vue 컴포넌트에서 직접 사용할 수 있으며, useStore 훅을 통해 각 컴포넌트에서 필요한 상태를 쉽게 접근하고 조작할 수 있습니다.

PrimeVue

소개

PrimeVue 는 Vue.js 를 기반으로 하는 오픈 소스 UI 컴포넌트 라이브러리이다.
다양한 UI 컴포넌트와 템플릿을 제공하여 FrontEnd 개발자들이 빠르고 효율적인 UI 개발이 가능하다.
Material, Bootstrap, Tailwind 와 같은 다양한 CSS 라이브러리를 지원한다.

https://primevue.org/

장점

1. 다양한 UI 컴포넌트 (버튼, 입력 필드, 표, 그래프, 다이얼로그, 메뉴, 탭 등의 다양한 요소)

2. 커스터마이즈 가능성 (사용자 정의 및 테마 지원)

3. 풍부한 문서 및 예제

4. 커뮤니티 지원

   • discord : https://discord.com/invite/gzKFYnpmCY
   • github : https://github.com/orgs/primefaces/discussions

컴포넌트

PrimeVue는 다양한 UI 컴포넌트를 제공하여 Vue.js 프로젝트에서 사용자 인터페이스를 빠르고 쉽게 개발할 수 있도록 도와준다.
아래 Primve 사이트에서 주요 컴포넌트의 몇 가지 예제를 확인할 수 있다.

PrimeVue 컴포넌트 보러가기

• Button (버튼) : PrimeVue의 버튼 컴포넌트는 기본 버튼, 아이콘 버튼 및 분할 버튼과 같은 다양한 스타일과 옵션을 제공한다.

• Input (입력 필드) : 텍스트 입력, 비밀번호 입력, 숫자 입력, 이메일 입력 및 여러 가지 입력 필드 유형을 지원하는 입력 필드 컴포넌트다.

• Table (표) : 데이터를 표 형식으로 표시하는 데 사용되는 표 컴포넌트다. 정렬, 필터링, 페이지네이션 및 다른 테이블 관련 기능을 제공한다.

• Chart (그래프) : 그래프와 차트를 그리는 데 사용되는 차트 컴포넌트다. 다양한 차트 유형을 지원하며 데이터 시각화에 유용하다.

• Dialog (다이얼로그) : 모달 또는 팝업 다이얼로그를 만들기 위한 컴포넌트다. 다양한 다이얼로그 스타일과 기능을 제공한다.

• Menu (메뉴) : 메뉴와 네비게이션을 만드는 데 사용되는 메뉴 컴포넌트다. 수직 및 수평 메뉴를 만들 수 있다.

• TabView (탭뷰) : 탭 스타일의 다중 탭 인터페이스를 구현할 수 있는 컴포넌트다. 다양한 탭 관련 이벤트를 처리할 수 있다.

• Accordion (아코디언) : 접히고 펼쳐지는 아코디언 스타일의 컴포넌트를 만들 수 있다. 주로 섹션 펼치기 및 축소하기에 사용된다.

• Slider (슬라이더) : 범위 선택이나 단일 값 선택을 위한 슬라이더 컴포넌트다. 사용자 인터페이스에서 값을 선택하는 데 유용하다.

• Tree (트리) : 계층적 데이터를 표시하기 위한 트리 컴포넌트다. 계층 구조를 시각화하는 데 사용된다.

Playground

PrimeVue 에서는 StackBlitz 를 이용해서 대화형 환경인 Playground 를 제공하고 있다.

PrimeVue Playground 보러가기